Chart area background

[Nicholas Newlands]

Hi,

I am trying to get an different background color for the inner chart area and the outer wrapper as shown here:

https://chart.googleapis.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200x125&chxt=x,y&chxl=0:%7CJun%7CJuly%7CAug%7C1:%7C%7C20%7C30%7C40%7C50&chf=c,s,0000ff%7Cbg,s,EFEFEF

Set by the 'chf' query string. I believe this is the older chart api and i was just wondering if i could get the same effect in the visualisation one, i cant find it anywhere. I have firebugged the iframe which is returned and discovered all i have to do is set the opacity of the second rectangle to 1 in order to achieve my goal, however, there is no way for me to target the rect since its within an iframe.

Thanks,

Nick

[asgallant]

Javascript has ways to get at the contents of an iframe (I find jQuery's to be the easiest to use), so you can target the <rect> elements; the problem is that the IE versions of the charts use VML, not SVG, so your code might not work for them.  You can grab the contents of the iframe with jQuery like this:

$('#chart_div').find('iframe').contents();

[Nicholas Newlands]

Site needs to be relatively cross browser unfortunately :( so im pretty much hoping someone has a solution using the API. Thanks for your response, will certainly be my backup plan along with my classic "well..... IE is shit" speal.

[asgallant]

You can certainly detect the presence of IE (jQuery assists with $.browser.msie is true if using IE).  The problem would be identifying the VML elements, as IE is missing a comprehensive tool set to analyse document objects.

[Nicholas Newlands]

Just thought i would post up my solution, this works in chrome, i have yet to cross browser:

            var myIFrame = chartDiv.getElementsByTagName('iframe')[0];

            var content = myIFrame.contentWindow.document.body;

            var rect = content.getElementsByTagName('rect')[2];

            rect.setAttribute('fill-opacity', '1');

You should also be able to change the chart area background color with:

           rect.setAttribute('fill', '#000000');

Thank you for your help asgallant.