Highcharts Demo

author(s): Torstein Hønsi

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
    
        chart: {
            renderTo: 'container',
            zoomType: 'x',
            type: 'area'
        },
    
        
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                },
                stacking: 'normal'
                // connectNulls: false // by default
            }
        },
    
        series: [{
            type: 'spline',
            color: 'black',
            lineWidth: 2,
            name: 'actual',
            data: [29.9*2, 71.5*2, 106.4*2, 129.2*2, 125*2, 176.0*2, 135.6*2, 148.5*2, 216.4*2, 194.1*2, 95.6*2, 54.4*2,29.9*2, 71.5*2, 106.4*2, 129.2*2, 50*2, 176.0*2, 135.6*2, 148.5*2, 216.4*2, 194.1*2, 95.6*2, 1.9*2, 71.5*2, 106.4*2, 129.2*2, 176.0*2, 135.6*2, 148.5*2, 216.4*2, 194.1*2, 95.6*2, 54.4*2, 71.5*2, 106.4*2, 100*2, 44*2, 176.0*2, 135.6*2, 148.5*2, 216.4*2, 194.1*2, 95.6*2, 54.4*2]
        },{
            fillColor: 'rgba(0,0,255,0.5)',
            color: 'blue',
            lineWidth: 0,
            name: 'max',
            data: [29.9, 71.5, 106.4, 129.2, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, null, null, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6]
        },{
            fillColor: 'rgba(255,0,0,0.5)',
            color: 'red',
            lineWidth: 0,
            name: 'min',
            data: [29.9, 71.5, 106.4, 129.2, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, null, null, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6]
        },{
            fillColor: 'rgba(1,1,1,0)',
            color: 'white',
            shadow: false,
            lineWidth: 0,
            showInLegend: false,
            data: [29.9, 71.5, 106.4, 129.2, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, null, null, null, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6]
        }]
    
    });
});