gauge chart with dynamic data - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

gauge chart with dynamic data

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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from ww w.  ja  va 2  s .c  o m*/
   $('#container').highcharts({
       chart: {
           type: 'gauge',
            title: {
                text: ''
            },
           plotBackgroundImage: null,
           height: 300
       },
       pane: [{
           startAngle: -90,
           endAngle: 90,
           background: null,
       }],
       yAxis: [{
           min: 0,
           max: 90,
            minorTickLength: 0,
            tickLength: 0,
            tickWidth: 0,
           labels: {
              enabled: false
           },
            title: {
                text: '<div class="gaugeFooter">46% Rate</div>',
                useHTML: true,
                y: 80
            },
           plotBands: [{
              from: 0,
              to: 46,
              color: 'pink',
              innerRadius: '100%',
              outerRadius: '0%'
           },{
              from: 46,
              to: 90,
              color: 'tan',
              innerRadius: '100%',
              outerRadius: '0%'
           }],
           pane: 0,
       }],
       plotOptions: {
          gauge: {
             dataLabels: {
                enabled: false
             },
             dial: {
                radius: '100%'
             }
          }
       },
       series: [{
           data: [46],
           yAxis: 0
       }]
   },
   // Let the music play
   function(chart) {
       setInterval(function() {
           var left = chart.series[0].points[0],
                yAxis = chart.yAxis[0],
                leftVal,
               inc = Math.round((Math.random() - 0.5) * 3);
           leftVal =  left.y + inc;
           if (leftVal < 0 || leftVal > 90) {
               leftVal = left.y - inc;
           }
           left.update(leftVal, false);
            yAxis.update({
               title: {
                    text: '<div class="gaugeFooter">'+leftVal+'% Rate</div>'
                },
                plotBands: [{
                  from: 0,
                  to: leftVal,
                  color: 'pink',
                  innerRadius: '100%',
                  outerRadius: '0%'
               },{
                  from: leftVal,
                  to: 90,
                  color: 'tan',
                  innerRadius: '100%',
                  outerRadius: '0%'
               }]
            }, false);
            chart.redraw();
       }, 1000);
   });
});

      </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: 600px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials