ColumnChart google column color change

Question

Does anyone know if I can somehow hack into the gi- visualization of the ColumnChart api chart to highlight one column with a different color, like this:

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

Can I somehow view the result using javascript and change the CSS style if it really displays in SVG?

Answer 1

Well, using jQuery, I was able to get to my iframe for the chart. This is not very, but it works. It is also shorter than using a prototype:

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

In the code above, the attributes ['5'] refer to the "fill" attribute for the direct object.

Answer 2

Really cheap hack (which works pretty well):

In the settings of your chart, do: isStacked (true);

Now transfer the data in two separate series: one zero everywhere except your asymmetrical canvas, and one that is equal to zero only on a non-color strip. The “folded” bars give only the effect that you posted on the screenshot.

Answer 3

You can pass the result if you want (it generates built-in svg fragments by appearance), just open your web debugging tool (opera dragonfly, firebug or webkit web inspector) to see how it looks.

I suppose it would be easier to just use the API so that one bar has a different color, but if you want to cross the tree and assign it some style that should work fine. You can use standard DOM core methods to navigate the tree, as in HTML, for example firstChild, nextSibling, parentNode .