Google Column Chart with multiple background zones - colors

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/