Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="graphReceptors0" style="width: 500px; height: 250px; margin: 0 auto"></div>
<p> Show receptor: <select id="receptorsList0">
    <option value="0.23">Subsidence limitation</option>
    <option value="0.41">Enbankments stability</option>
</select></p>
<!--button id="title" class="autocompare">Set title</button-->
<!--button id="subtitle" class="autocompare">Set subtitle</button-->
<!--button id="color" class="autocompare">New color</button-->

JavaScript

$(function () {
    var i = 1,
        chart,
        table = {
            'Subsidence limitation' : 'rec(1)',
            'Enbankments stability': 'rec(2)'
        };

    $('#graphReceptors0').highcharts({
        chart : {
            type : 'gauge',
            plotBorderWidth : 1,
            plotBackgroundColor : {
                linearGradient : { x1 : 0, y1 : 0, x2 : 0, y2 : 1 },
                stops : [ [ 0, '#F0F0F0' ],[ 0.3, '#FFFFFF' ],[ 1, '#F0F0F0' ] ]
            },
            plotBackgroundImage : null,
            height : 250
        },
        credits : { enabled : false },
        title : { text : 'Subsidence limitation' },
        tooltip : { enabled : false },
        pane : [ {
            startAngle : -45, 
            endAngle : 45,
            background : null,
            center : [ '50%', '165%' ],
            size : 500
        } ],
        yAxis : [ {
            min : 0, max : 1,
            minorTickPosition : 'outside',
            tickPosition : 'outside',
            labels : { rotation : 'auto', distance : 20 },
            plotBands : [ {
                from : 0.00, to : 0.33,
                color : '#C11B17',
                innerRadius : '100%',
                outerRadius : '102%'
            }, {
                from : 0.66, to : 1.00,
                color : '#347C17',
                innerRadius : '100%',
                outerRadius : '102%'
            } ],
            pane : 0,
            title : { text : 'rec(1)<br/><span style="font-size:8px">Subsidence limitation</span>', y : -40 }
        } ],
        plotOptions : {
            gauge : {
                dataLabels : { enabled : false },
                dial : { radius : '100%' }
            }
        },
        series : [ { data : [ 0.23 ], yAxis : 0 } ]
    });
    chart = $('#graphReceptors0').highcharts();
    

    $('#receptorsList0').change(function() {
        var selectedOption = $("#receptorsList0 option:selected");
        var selectedValue =...