Highcharts Demo

author(s): Torstein Hønsi

by Sascha

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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 510px; max-width: 800px; height: 500px; margin: 0 auto"></div>

CSS

.highcharts-gauge-series .highcharts-dial {
    fill: black;
    stroke: black;
	  stroke-width: 3px;
}

.highcharts-gauge-series .highcharts-tracker { 
    transform: scale(2, 1);
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
       
    },

    title: {
        text: 'Speedometer'
    },

    pane: {
        startAngle: -150,
        endAngle: 140,      
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 6000,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 30,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 35,
        tickColor: '#666',
	        labels: {
          	distance: -50,
            step: 2,
            rotation: 'auto',
            style: { 
            fontSize: '13px'
            }
        },
        title: {
            text: 'x1000 feeds/hour'
        },
        plotBands: [{
            from: 0,
            to: 2200,
            color: '#DF5353', // red,
            thickness: 30
        }, {
            from: 2200,
            to: 3400,
            color: '#DDDF0D', // yellow
            thickness: 30
        }, {
            from: 3400,
            to: 6000,
            color: '#55BF3B', // green
            thickness: 30
        }]
    },

    series: [{
        name: 'Speed',
        data: [4000],
        tooltip: {
            valueSuffix: ' feeds'
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5 ) * 6000);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 6000) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 1000);
    }
});