Highcharts Clock Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create a clock chart using highcharts library with examples.

Highcharts Clock Chart Example

Following is the example of creating a clock chart by setting the required chart properties using highcharts library.

 

Live Preview

<html>

<head>

    <title>Highcharts Clock Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script src="https://code.highcharts.com/highcharts-more.js"></script>

    <script type="text/javascript">

        $(function() {

            /**

             * Get the current time

             */

            function getNow() {

                    var now = new Date();

 

                    return {

                        hours: now.getHours() + now.getMinutes() / 60,

                        minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,

                        seconds: now.getSeconds() * 12 / 60

                    };

                }

                /**

                 * Pad numbers

                 */

            function pad(number, length) {

                // Create an array of the remaining length + 1 and join it with 0's

                return new Array((length || 2) + 1 - String(number).length).join(0) + number;

            }

            var now = getNow();

            // Create the chart

            Highcharts.chart('container', {

                    chart: {

                        type: 'gauge',

                        plotBackgroundColor: null,

                        plotBackgroundImage: null,

                        plotBorderWidth: 0,

                        plotShadow: false,

                        height: '80%'

                    },

                    credits: {

                        enabled: false

                    },

                    title: {

                        text: 'The Highcharts clock'

                    },

                    pane: {

                        background: [{

                            // default background

                        }, {

                            // reflex for supported browsers

                            backgroundColor: Highcharts.svg ? {

                                radialGradient: {

                                    cx: 0.5,

                                    cy: -0.4,

                                    r: 1.9

                                },

                                stops: [

                                    [0.5, 'rgba(255, 255, 255, 0.2)'],

                                    [0.5, 'rgba(200, 200, 200, 0.2)']

                                ]

                            } : null

                        }]

                    },

                    yAxis: {

                        labels: {

                            distance: -20

                        },

                        min: 0,

                        max: 12,

                        lineWidth: 0,

                        showFirstLabel: false,

                        minorTickInterval: 'auto',

                        minorTickWidth: 1,

                        minorTickLength: 5,

                        minorTickPosition: 'inside',

                        minorGridLineWidth: 0,

                        minorTickColor: '#666',

                        tickInterval: 1,

                        tickWidth: 2,

                        tickPosition: 'inside',

                        tickLength: 10,

                        tickColor: '#666',

                        title: {

                            text: 'Powered by<br/>Highcharts',

                            style: {

                                color: '#BBB',

                                fontWeight: 'normal',

                                fontSize: '8px',

                                lineHeight: '10px'

                            },

                            y: 10

                        }

                    },

                    tooltip: {

                        formatter: function() {

                            return this.series.chart.tooltipText;

                        }

                    },

                    series: [{

                        data: [{

                            id: 'hour',

                            y: now.hours,

                            dial: {

                                radius: '60%',

                                baseWidth: 4,

                                baseLength: '95%',

                                rearLength: 0

                            }

                        }, {

                            id: 'minute',

                            y: now.minutes,

                            dial: {

                                baseLength: '95%',

                                rearLength: 0

                            }

                        }, {

                            id: 'second',

                            y: now.seconds,

                            dial: {

                                radius: '100%',

                                baseWidth: 1,

                                rearLength: '20%'

                            }

                        }],

                        animation: false,

                        dataLabels: {

                            enabled: false

                        }

                    }]

                },

                // Move

                function(chart) {

                    setInterval(function() {

                        now = getNow();

                        if (chart.axes) { // not destroyed

                            var hour = chart.get('hour'),

                                minute = chart.get('minute'),

                                second = chart.get('second'),

                                // run animation unless we're wrapping around from 59 to 0

                                animation = now.seconds === 0 ?

                                false : {

                                    easing: 'easeOutBounce'

                                };

                            // Cache the tooltip text

                            chart.tooltipText =

                                pad(Math.floor(now.hours), 2) + ':' +

                                pad(Math.floor(now.minutes * 5), 2) + ':' +

                                pad(now.seconds * 5, 2);

                            hour.update(now.hours, true, animation);

                            minute.update(now.minutes, true, animation);

                            second.update(now.seconds, true, animation);

                        }

                    }, 1000);

                });

            Math.easeOutBounce = function(pos) {

                if ((pos) < (1 / 2.75)) {

                    return (7.5625 * pos * pos);

                }

                if (pos < (2 / 2.75)) {

                    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);

                }

                if (pos < (2.5 / 2.75)) {

                    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);

                }

                return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);

            };

        });

    </script>

</head>

<body>

    <div id="container"> </div>

</body>

</html>

If you observe the above example, we created a clock chart using highcharts library with required properties.

 

When we execute the above highcharts example, we will get the result like as shown below.

 

Highcharts clock chart example result

 

This is how we can create a clock chart using highcharts library with required properties. 

Topics Covered