Colored horizontal bands as chart background

by dlaliberte

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add colored horizontal bands as a chart background</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

JavaScript

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addColumn('number', 'color band 1');

    
    var y = 50;
    data.addRow([-1, 0, 50]);  // Extra row before, to cover bar.
    
    // fill with 100 rows of random data

    for (var i = 0; i < 20; i++) {
        y += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 4));
        if (y < 0) {
            y = 10;
        }
        if (y > 100) {
            y = 90;
        }
        // make the colored bands appear every 20
        data.addRow([i, y, 50]);
    }
    data.addRow([20, 0, 50]);  // Extra row after
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    
    chart.draw(data, {
        height: 400,
        width: 600,
        isStacked: true,
        hAxis: {
            viewWindow: { min: -0.5, max: 19.5 }
        },
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        series: {
            0: {
                type: 'bars'
            },
            1: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            }
        }
    });
}

google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});