Highcharts - Clock

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Clock is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart.type

Configure the chart type to be gauge based. Set the type as 'gauge'.

var chart = {
   type: 'guage'
};

pane

This type applies only to polar charts and angular gauges. This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.

var pane = {
   startAngle: -150,
   endAngle: 150
};

Example

highcharts_guage_clock.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>    
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>    
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(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 chart = {      
               type: 'gauge',
               plotBackgroundColor: null,
               plotBackgroundImage: null,
               plotBorderWidth: 0,
               plotShadow: false,
               height: 200
            };
            var credits = {
               enabled: false
            };
            var title = {
               text: 'The Highcharts clock'
            };
            var 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
                  }
               ]
            };
            // the value axis
            var 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
               }
            };
            var tooltip = {
               formatter: function () {
                  return this.series.chart.tooltipText;
               }
            };
            var 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
               }
            }];     
            
            var json = {};   
            json.chart = chart; 
            json.credits = credits;
            json.title = title;       
            json.pane = pane; 
            json.yAxis = yAxis; 
            json.tooltip = tooltip; 
            json.series = series;   
            $('#container').highcharts(json, chartFunction);  
   
            // Add some life
            var chartFunction = 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: 'easeOutElastic'};

                  // 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);
            };
         });
         
         // Extend jQuery with some easing (copied from jQuery UI)
         $.extend($.easing, {
            easeOutElastic: function (x, t, b, c, d) {
               var s = 1.70158;var p = 0;var a = c;
               if (t==0) return b;  
               if ((t/=d)==1) return b+c;  
               if (!p) p = d*.3;
               if (a < Math.abs(c)) { a = c; var s = p/4; }
               else 
               var s = p/(2*Math.PI) * Math.asin (c/a);
               return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
            }
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_angular_gauges.htm