Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {

    var chartSeriesData = [],
        globalBackground;

    chartSeriesData.push({
        showInLegend: false,
        data: [200, 200, 200, 210, 220, 200, 200],
        fillColor: '#333',
        fillOpacity: 0.1,
        lineColor: '#333',
        marker: {
            enabled: false
        }
    });
    chartSeriesData.push({
        showInLegend: false,
        data: [150, 150, 150, 160, 170, 150, 150],
        fillColor: '#666',
        fillOpacity: 0.1,
        lineColor: '#666',
        marker: {
            enabled: false
        }
    });
    chartSeriesData.push({
        type: 'line',
        name: 'Values',
        lineColor: '#27a5f9',
        color: '#27a5f9',
        data: [180, 190, 176, 110, 100, 150, 180]
    });

    //add the toggle colorbands functionality to the first colorband
    chartSeriesData[0].showInLegend = true;
    chartSeriesData[0].name = 'Color Bands';
    chartSeriesData[0].events = {
        legendItemClick: function () {
            var doHide = true;
            if (!this.visible) {
                doHide = false;
            }

            var series = this.chart.series;
            for (var i = 0; i < series.length; i++) {
                if (series[i].type == 'area') {
                    if (doHide) {
                        series[i].hide();
                    } else {
                        series[i].show();
                    }
                }
            }

            if (doHide) {
                globalBackground = '#fff';
                this.chart.plotBackground.attr({
                    fill: '#fff'
                });
            } else {
                globalBackground = '#000';
                this.chart.plotBackground.attr({
                    fill: '#00a'
                });
            }
            return false;
        }
    };

    var chartingOptions = {
        chart: {
            renderTo: 'container',
            type: 'area',
            plotBackgroundColor: '#00a000'
 ...