I found an answer to my previous question about the chart here fill background color horizontally in google line chart on specified area
Now my problem is to change the area color
and the code can be found here (sorry embedding is causing error)
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
}
}
});