Introduction
This is a trick to resolve the problem in Internet Explorer 8 when showing
background image in Google Charts.
Background
Since the last few days I was working with Google Charts and Table API to display some data and charts on SharePoint web parts a.k.a. webpages. Everything was working fine except the background image to be set to the charts
was not getting displayed...specifically I was using Column and Line charts.
I
have gone through some tricks online and set the backgroundColor : { fill: 'none'} in the chart options and set the image as background image in the underlying
div which is used to render the chart. However, this was working only in Chrome and Firefox and not in Internet Explorer. I was targeting only these three browsers so I did not take effort to test for others.
I spent many hours reading online blogs and Google Charts API documentation to find out something that resolves the issue in IE. Then I came across a situation that the charts are rendered in IFrames in IE and I started working on IFrames.....Still after several hours spent across two days I found the trick finally. It is very cumbersome to select the chart elements in developer toolbar of IE as it sometimes does not show the dynamically generated HTML in the IFrame that is displaying the chart. This may take 2-3 refreshes of the page to select the chart elements and read the HTML in the developer toolbar.
Using the code
I was having five different charts on the page, so I had the loop below.
var totalFrames = window.frames.length;
for (var frameCounter = 0; frameCounter < totalFrames; frameCounter++) {
window.frames[frameCounter].window.document.body.style.backgroundColor = "transparent";
}
This JavaScript basically captures all IFrame objects using window.frames[number] and then set the background of
the body object to transparent, so that the background image set in the underlying div (that is rendering the chart) comes as the background of the chart.
Note: This trick works in IE only as the charts are rendered in IFrame objects in IE.
Points of Interest
As I ran behind this for a long time (as I kept this as a lowest priority issue)......
I added this blog as I thought this may help someone.
