Google Chart Individual Color Plots
I've read tons of other questions about this and tried every code example but none worked. I need to have individual colors for each bar and this is the data that I am passing to the chart:
var data = google.visualization.arrayToDataTable([
['Month', 'Count'],
['January 2009', 10],
['February 2009', 20],
['March 2009', 10],
['April 2009', 20],
['May 2009', 10],
['June 2009', 20],
['July 2009', 10],
['August 2009', 20],
['September 2009', 10],
['October 2009', 20],
['November 2009', 10],
['December 2009', 20]
]);
I've tried the method of setting the data as suggested here by Google Chart, a different color for each bar , but that doesn't seem to work with string values on the X-axis.
How do I get the X string values, Y numerical values and set the colors separately?
Ideally I would also like to set the color explicitly for each bar, rather than just passing in an array of colors, is this possible?
source to share
One way to do this is to create a different series for each dataset. Instead of customizing your data like this:
var data = google.visualization.arrayToDataTable([
['Month', 'Count'],
['January 2009', 10],
['February 2009', 20],
['March 2009', 10],
['April 2009', 20],
['May 2009', 10],
['June 2009', 20],
['July 2009', 10],
['August 2009', 20],
['September 2009', 10],
['October 2009', 20],
['November 2009', 10],
['December 2009', 20]
]);
You add a separate column for each dataset like this:
var data = google.visualization.arrayToDataTable([
['Month', 'Jan', 'Feb', 'Mar', 'Apr'],
['January 2009', 10, null, null, null],
['February 2009', null, 20, null, null],
['March 2009', null, null, 10, null],
['April 2009', null, null, null, 20],
]);
This will make each series a different color (it will also make each series and individual element in the legend, which may or may not be unattractive depending on your application).
You can write a for loop to look at the original data and add zeros automatically with the following:
for (var i = 0; i < rawData.getNumberOfRows(); i++) {
data.addColumn('string', rawData.getFormattedValue(i, 0));
};
for (var j = 0; j < rawData.getNumberOfColumns() - 2; j++) {
data.addRow();
data.setValue(j, 0, rawData.getColumnLabel(j + 1));
for (var i = 0; i < rawData.getNumberOfRows(); i++) {
data.setValue(j, i + 1, rawData.getValue(i, j+1));
};
};
Adding a column will add all the "null" values, then you can simply set the data values as you like. Without doing it in this relatively awkward way (adding all the extra series), there is no way to color the different series in the API.
If you don't want to do it this way, your best bet is to look into SVG and figure out how to use SVG with CSS (however, this can cause browser compatibility issues with IE).
source to share