I have the following code where I am able to load the graph from the database, but I am trying to apply multiple colors which is not working
function drawStatuChart() {
show('loading3', true);
var data = JSON.stringify({
'GraphId': 5,
'startDt': $("#from-date").val(),
'endDt': $("#to-date").val()
});
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = new google.visualization.DataTable();
var cols = r.splice(0, 1);
cols[0].forEach(function (col, index) {
if (index === 0) {
data.addColumn('string', col);
} else {
data.addColumn('number', col);
}
});
if (r.length > 0) {
data.addRows(r);
} else {
data.addRow(['', null]);
}
show('loading3', false);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation",
}
]);
var options = {
width: '350',
height: '300',
'overflow': 'hidden',
bar: { groupWidth: "65%" },
legend: { position: "none" },
colors: ['#f8aa00', '#00778d'],
fontName: 'Montserrat',
chartArea: {
left: "17%",
top: "2%",
height: "250",
width: "250"
}
};
var chart = new google.visualization.BarChart($("#status")[0]);
chart.draw(view, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
I get the following data from db, but some how I am not able to apply different colors
Showing only one color