NEW KPI Charts - threshold

by Roydon DSouza

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function () {

    // Create the chart
    $('#container').highcharts({


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'KPN'
        },

        yAxis: {
            gridLineWidth: 0,
                minorGridLineWidth: 0,
            plotBands: [{ // Light air
                from: 15,
                to: 40,
               color:'#fbdbd1',/*rgba(255, 0, 0, 0.1)',*/
               
                label: {
                    text: '',
                    style: {
                        color: 'red'
                    }
                }
            }],
            plotLines: [{ 
                label: {
                    text: 'Baseline',
                    x: 25
                },
                color: 'orange',
                width: 0,
                value: 15,
                dashStyle: 'longdashdot'
            }],
        },
        
        series: [{
            name: 'KPN12345',
            data: [
                
                [1361404800000, 6],
                [1361491200000, 6],
                [1361836800000, 5],
                [1361923200000, 10],
                [1362009600000, 17],
                [1362096000000,20],
                [1362441600000, 10]

            ],
            threshold: 15,
            negativeColor: '#6fd0f4', /*54b2f9*/
            color: '#a9d47a',/*14af00*/
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});