Different color for each column in ColumnChart (works too in BarChart)

30 views
Skip to first unread message

Patricio Tarantino

unread,
Jan 28, 2012, 10:43:50 PM1/28/12
to Google Visualization API
(Sorry for my english)

This is not a question, but a solution so I want to share.

Yesterday I wanted to do what the title says: put a couple of columns
in my chart. Sadly, they look with the same color. I googled but I
find hard hacks to do that. Today I improve my own hack which is very
simple.

If you understand how ColumnChart works you will get very easily :)

The idea is to use each serie as a different column. Imagine we want
to have a columnChart with Goal Scorers.

Something like this:

dataP.addColumn('string', '');
dataP.addColumn('number', '');
dataP.addRows([
['Messi',120],
['Ronaldo',118],
['Tevez',110]

will return three columns with the same color. So we use series:

dataP.addColumn('string', '');
dataP.addColumn('number', '');
dataP.addColumn('number', '');
dataP.addColumn('number', '');
dataP.addRows([
['Messi',120,0,0],
['Ronaldo',0,118,0],
['Tevez',0,0,110]

We get every column with its own color (defined in the options). The
only problem is its width: very thin, and besides, they are aligned to
the left, center and right respectively. The trick to solution that is
to put:

isStacked: true,

in the options. And voilè! Every column has full width and its own
color.

I hope you understand me!
Reply all
Reply to author
Forward
0 new messages