Can I modify elements of a Google Chart after the page has loaded? Specifically, colors

Question

I'm working with the Visualization API and column chart package for Google Charts. I can generate a graph with the data I want, but can I modify parts of the chart after the page has loaded? Specifically, I want to change the color of one column. I've done this by editing the DOM in Chrome's Element's Panel tool, but is there a way I can actually code this into my page, or am I out of luck? Thanks!

Anything you can edit by hand you can manipulate with javascript. Have you actually tried this? If so, what was the result? What problems did you face? What color are you trying to change? Why are you trying to change it this way? This question is far too vague to give any practical advice to right now... — jmac

PerryW PerryW · Accepted Answer · 2013-04-22T03:40:51

I had a similar challenge. In my case I needed a different color for each bar in a bar chart, something that the vis api doesn't support.

I ended up with this (using jquery, but no reason why it can't be done just using native dom functions) statusCols btw is just an array of html colors...

 function colorBars(){
  $("#masterstatus g rect[fill='#3366cc']").each(function(){$(this).attr("bar", 'true')})
  $("#masterstatus g rect[bar='true']").each(function(barNo){
   $(this).attr("fill", statusCols[barNo]);
  });
 }

The secret (as it sounds like you have already discovered) is in identifying the dom element to change, that's the $("#masterstatus g rect[fill='#3366cc']") bit - I'm just selecting bars in the default color and iterating through them, in your case you want to pic an ordinal (eg the third one in the collection)

Hope that helps.

Actually I hope even more that someone else comes up with a better way...

Can I modify elements of a Google Chart after the page has loaded? Specifically, colors

1 Answers