gauge chart with marker for setting threshold value - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

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

Description

gauge chart with marker for setting threshold value

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

.highcharts-yaxis-grid .highcharts-grid-line {
   display: none;
}


      </style> 
   </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 style="width: 600px; height: 400px; margin: 0 auto"> 
         <div id="container-speed" style="width: 300px; height: 200px; float: left"></div> 
      </div> 
      <script type="text/javascript">
var gaugeOptions = {//from ww w  . j  ava2 s  .c o  m
  chart: {
    type: 'solidgauge'
  },
  title: null,
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  tooltip: {
    enabled: false
  },
  // the value axis
  yAxis: {
  plotBands: {
     from: 70,
    to: 71,
    color: '#DF5353',
    thickness: '45%',
    outerRadius: '105%'
  },
    stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 2,
    title: {
      y: -70
    },
    labels: {
      y: 16
    }
  },
  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 5,
        borderWidth: 0,
        useHTML: true
      }
    }
  }
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed'
    }
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Speed',
    data: [80],
    dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
        '<span style="font-size:12px;color:silver">km/h</span></div>'
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]
}));
// Bring life to the dials
setInterval(function() {
  // Speed
  var point,
    newVal,
    inc;
  if (chartSpeed) {
    point = chartSpeed.series[0].points[0];
    inc = Math.round((Math.random() - 0.5) * 100);
    newVal = point.y + inc;
    if (newVal < 0 || newVal > 100) {
      newVal = point.y - inc;
    }
    point.update(newVal);
  }
}, 2000);

      </script>  
   </body>
</html>

Related Tutorials