Activity gauge Chart with Range option - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

Activity gauge Chart with Range option

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() {//  ww  w  . ja v  a  2s . c  om
  Highcharts.chart('container', {
    chart: {
      type: 'solidgauge',
      marginTop: 50
    },
    pane: [{
      startAngle: 0,
      endAngle: 360,
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0
      }]
    }, {
      startAngle: 360,
      endAngle: 0,
      background: [{ // Track for Move
        outerRadius: '72%',
        innerRadius: '48%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0
      }]
    }],
    yAxis: [{
      min: 0,
      max: 100,
      lineWidth: 0,
      tickPositions: [],
      stops: [
        [0.1, '#55BF3B'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#DF5353'] // red
      ],
    }, {
      min: 0,
      max: 100,
      pane: 1,
      lineWidth: 0,
      tickPositions: [],
      stops: [
        [0.1, '#55BF3B'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#DF5353'] // red
      ],
    }],
    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        linecap: 'round',
        dataLabels: {
          enabled: false
        }
      }
    },
    series: [{
      data: [{
        borderColor: 'red',
        color: Highcharts.getOptions().colors[0],
        radius: '100%',
        innerRadius: '100%',
        y: 80
      }]
    }, {
      yAxis: 1,
      data: [{
        borderColor: 'red',
        color: Highcharts.getOptions().colors[0],
        radius: '60%',
        innerRadius: '60%',
        y: 80
      }]
    }]
  }, function(chart) {
    var y1 = this.series[0].data[0].y,
      y2 = this.series[1].data[0].y;
    for (var i = y1; i >= 0; i = i - (y1 / 80)) {
      chart.addSeries({
        data: [{
          y: i,
          radius: '100%',
          innerRadius: '100%',
        }],
        stickyTracking: false,
        enableMouseTracking: false
      }, false);
    }
    for (var i = y2; i >= 0; i = i - (y2 / 80)) {
      chart.addSeries({
        data: [{
          y: i,
          radius: '60%',
          innerRadius: '60%',
        }],
        yAxis: 1,
        stickyTracking: false,
        enableMouseTracking: false
      }, false);
    }
    chart.redraw();
    Highcharts.each(chart.series, function(s) {
      s.update({
        borderColor: s.data[0].color
      }, false);
    });
    chart.redraw();
  });
});

      </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/solid-gauge.js"></script> 
      <div id="container" style="width: 400px; height: 400px; margin: 0 auto"> 
      </div>  
   </body>
</html>

Related Tutorials