Does anyone know if I can hack google's visualization ColumnChart api chart somehow, to make a single column stand out with a different color, like so:

I know you can do it with ImageChart, so I don't need that (it fires no events and has no x/y labels).

Can I traverse the result with javascript somehow and change the CSS style, if it is truly rendered in SVG?

Does anyone know if I can hack google's visualization ColumnChart api chart somehow, to make a single column stand out with a different color, like so:

I know you can do it with ImageChart, so I don't need that (it fires no events and has no x/y labels).

Can I traverse the result with javascript somehow and change the CSS style, if it is truly rendered in SVG?

• javascript
• svg
• google-visualization

3 Answers 3

A really cheap hack (that works quite well) is the following:

In the Options for your Chart, do: isStacked(true);

Now pass data in two separate series: one that's zero everywhere except at your off-colored bar, and one that's zero only at the off-colored bar. The "stacked" bars yield just the effect your posted in your screenshot.

Well using jQuery I was able to get to my iframe for the graph. It's not pretty, but it works. It's also shorter than using prototype:

$('#google-chart iframe').contents().find("#chartArea g>g>rect")[2].attributes['5'].value = "#eea746";                                         

In the code above attributes['5'] refers to the "fill" attribute of the rect object.

You can traverse the result if you want sure (it's generating inline svg fragments by the looks of it), just open your fave web debugging tool (opera dragonfly, firebug or webkit web inspector) to see what it looks like.

I'm guessing it might be simpler to just use the API to make one bar have a different color, but if you want to traverse the tree and assign some style to it that should work just fine. You can use standard DOM core methods for traversing the tree, just like in HTML, e.g firstChild, nextSibling, parentNode.