Click here to Skip to main content
15,860,943 members
Articles / Programming Languages / Javascript
Tip/Trick

Set Background Image in Google Charts - Internet Explorer 8

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
15 Jul 2013CPOL2 min read 12.2K   1  
Trick to show background image in Google Charts in Internet Explorer.

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.

JavaScript
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --