❮ Highcharts Line Labels Highcharts Bar Basic ❯

Highcharts Clock

The following example demonstrates a clock.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.

Configuration

chart.type Configuration

Set the chart type to 'gauge'. The chart.type describes the type of the chart. The default value is "line".

var chart = {
   type: 'gauge'
};

pane Configuration

The pane is applicable only for polar charts and angular gauges. This configurable object holds common options for combining x and y axes. Each x and y axis can be associated with a pane by index.

var pane = {
  startAngle: -150,  // Starting degree of the x-axis or gauge axis, given in degrees. 0 is north
  endAngle: 150      // Ending degree of the x-axis or angular axis, given in degrees. 0 is north
};

Example

Filename: highcharts_gauge_clock.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://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: '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>

Try it »

The output of the above example is:

Highcharts Gauge Chart

❮ Highcharts Line Labels Highcharts Bar Basic ❯