Change Band color in Google ComboChart

Viewed 697

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 colorgoogle combochart

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
        }
    }
});
1 Answers
Related