Colored horizontal bands as chart background

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('string', 'Category');
    data.addColumn('number', 'Value');
    data.addColumn('number', 'color band 1');

    data.addRows([
        ['', null, 50], // extra first row
        ['Foo', 60, 50],
        ['Bar', 70, 50],
        ['Baz', 30, 50],
        ['', null, 50] // extra last row
    ]);
    
    var view = new google.visualization.DataView(data);
    view.setColumns([{
        type: 'number',
        label: data.getColumnLabel(0),
        calc: function (dt, row) {
            return {v: row, f: dt.getValue(row, 0)};
        }
    }, 1, 2]);
    
    // build list of axis labels
    var ticks = [];
    for (var i = 1; i < view.getNumberOfRows() - 1; i++) {
        ticks.push({
            v: view.getValue(i, 0),
            f: view.getFormattedValue(i, 0)
        });
    }
    
    // get the range of values in the view
    var range = view.getColumnRange(0);
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    
    chart.draw(view, {
        height: 400,
        width: 600,
        hAxis: {
            viewWindow: {
                min: range.min,
                max: range.max
            },
            ticks: ticks
        },
        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});