Highcharts Clock Example

Keywords : Clock example using highcharts, How to implement clock using highcharts with example, Highcharts live clock example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Clock Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.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();
            var chartype = {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                height: 200
            }
            var chartcredits = {
                enabled: false
            }
            var chartitle = {
                text: 'The Highcharts clock'
            }
            var chartooltip = {
                formatter: function () {
                    return this.series.chart.tooltipText;
                }
            }
            var chartpane = {
                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
                }]
            }
            var chartyaxis = {
                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
                }
            }
            var chartseries = [{
                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
                }
            }]
            $('#container').highcharts({
                chart: chartype,
                credits:chartcredits,
                title: chartitle,
                tooltip: chartooltip,     
                pane:chartpane,
                yAxis: chartyaxis,
                series: chartseries
            },
            // Move
        function (chart) {
            setInterval(function () {
                now = getNow();
                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);
        });
        });
        /**
 * Easing function from https://github.com/danro/easing-js/blob/master/easing.js
 */
        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" style="width: 300px; height: 300px; margin: 0 auto">
    </div>
</body>
</html>

Highcharts Clock Example

Example

Result