Google Column Chart with multiple background zones

Question

There seems to be one feature in FusionCharts preventing me from migrating to the Google Charts API; trend zones (see the second example). Using these I can set horizontal background colours - trends - behind my columns.

It's a powerful visualisation in my use case where I'm banding values.

I have sifted through the documentation and just can't quite find what I need. Has anyone hacked something together that might do the trick?

Thanks for any help you can give!

Answer 1

I wrote a hack that does pretty much exactly what you are looking for:

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

    var y = 50;
    // fill with 100 rows of random data
    for (var i = 0; i < 100; i++) {
        y += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 2));
        if (y < 0) {
            y = 10;
        }
        if (y > 100) {
            y = 90;
        }
        // make the colored bands appear every 20
        data.addRow([i, y, 20, 20, 20, 20, 20]);
    }

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        isStacked: true,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        series: {
            0: {
                type: 'line'
            },
            1: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            2: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            3: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            4: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            5: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            6: {
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            }
        }
    });
}

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

See it working here: http://jsfiddle.net/asgallant/apH2B/