Highcharts Demo

author(s): Torstein Hønsi

by ewolden

HTML

<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-cpu" class="chart-container"></div>

JavaScript

$(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge',
      events: {
      	load: function() {
        	var currentValue = this.series[0].points[0].y;
          var newColor = 'black';
          console.log(currentValue)
        	if(currentValue < 50) {
          	newColor = 'red'
          } else if(currentValue < 90) {
          	newColor = 'green'
          } else {
          	newColor = 'yellow'
          }
          this.series[0].points[0].update({color: newColor}, true)
        }
      }
    },

    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
    },

    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    series: [{
      name: 'HDD',
      data: [51]

    }]

  });
});