Gauge central value for gauge chart - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Gauge Chart

Description

Gauge central value for gauge chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from w  ww.  j  a v  a2 s. c om*/
   var chart = new Highcharts.Chart({
       chart: {
           renderTo: 'container',
           type: 'gauge',
           alignTicks: false,
           plotBackgroundColor: null,
           plotBackgroundImage: null,
           plotBorderWidth: 0,
           plotShadow: false
       },
       title: {
           text: 'Speedometer with dual axes'
       },
       pane: {
           startAngle: -150,
           endAngle: 150
       },
       yAxis: [{
           min: 0,
           max: 200,
           lineColor: '#339',
           tickColor: '#339',
           minorTickColor: '#339',
           offset: -25,
           lineWidth: 2,
           labels: {
               distance: -20,
               rotation: 'auto'
           },
           tickLength: 5,
           minorTickLength: 5,
           endOnTick: false
       }, {
           min: 0,
           max: 124,
           tickPosition: 'outside',
           lineColor: '#933',
           lineWidth: 2,
           minorTickPosition: 'outside',
           tickColor: '#933',
           minorTickColor: '#933',
           tickLength: 5,
           minorTickLength: 5,
           labels: {
               distance: 12,
               rotation: 'auto'
           },
           offset: -20,
           endOnTick: false
       }],
       series: [{
           name: 'Speed',
           data: [80],
           dataLabels: {
               formatter: function () {
                   var kmh = this.y,
                       mph = Math.round(kmh * 0.621);
               },
               backgroundColor: {
                   linearGradient: {
                       x1: 0,
                       y1: 0,
                       x2: 0,
                       y2: 1
                   },
                   stops: [
                       [0, '#DDD'],
                       [1, '#FFF']
                   ]
               }
           },
           tooltip: {
               valueSuffix: ' km/h'
           }
       }]
   },
   // Add some life
   function(chart) {
       setInterval(function() {
           var point = chart.series[0].points[0],
               newVal, inc = Math.round((Math.random() - 0.5) * 20);
           newVal = point.y + inc;
           if (newVal < 0 || newVal > 200) {
               newVal = point.y - inc;
           }
           point.update(newVal);
       }, 3000);
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials