Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

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: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge'
    },

    title: {
        text: 'Compass'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

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

		tickInterval: 45,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            rotation: 'auto',
            formatter: function () {
            	return {
                	0: 'N',
                    45: 'NE',
                    90: 'E',
                    135: 'SE',
                    180: 'S',
                    225: 'SW',
                    270: 'W',
                    315: 'NW'
                }[this.value] || this.value + '°';
            }
        }
    },

    series: [{
        name: 'Direction',
        data: [80],
        tooltip: {
            valueSuffix: '°'
        },
        dataLabels: {
        	format: '{y}°'
        }
    }]

},
// 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) * 20);

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

            point.update(newVal);

        }, 3000);
    }
});