Click here to Skip to main content
Click here to Skip to main content

Set Background Image in Google Charts - Internet Explorer 8

By , 15 Jul 2013
Rate this:
Please Sign up or sign in to vote.

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.

License

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

About the Author

pravink83

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 15 Jul 2013
Article Copyright 2013 by pravink83
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid