Transparency Fix for IE 8: Bubble Charts

tnt...@yahoo.com

unread,

May 6, 2013, 1:21:30 PM5/6/13

to google-visua...@googlegroups.com

In Chrome and later versions of IE, you can set a transparent background in Google charts, which makes it handy to put something like a custom graphic behind the bubble charts. I've been trying to find a solution for IE8, which does not allow the same transparent background setting...and it's been driving me mad for week. Finally an interesting idea come to mind, and it works pretty well on the IE 8 browsers I have tested. If you set the google bubble chart background to a color that is near-white, but not white itself, then use IE 8's chroma plugin and set the layer to the same color, they cancel each other out and become transparent. I got the idea from back-in-the-day when I used green screens to superimpose over live video... This feature is deprecated in IE 9+ but should work in 7 and 8.

Here are the calls that make it work:

backgroundColor: '#FFFFCC',

Here is an example where I setup a table with a background, put the chart in the same table and call the chroma plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>TRANSPARENCY TEST</title>

</head>

<body>

<tr>

<td>

google.load('visualization', '1', {packages: ['corechart']});

</script>

function drawVisualization() {

// Create and populate the data table.

var data = google.visualization.arrayToDataTable([

['ID ', 'A ', 'B ', 'NAME ', 'D '],

['85', 2.39, 1.94, '85 ', 720],

['86', 2.59, 2.94, '86 ', 420],

['87', 2.19, 3.24, '87 ', 320],

['64', 2.28, 1.47, '64 ', 500],

['0', .1, .1, '', 0]

]);

var options = {

title: 'TEST',

hAxis: {title: 'X AXIS'},

vAxis: {title: 'Y AXIS'},

bubble: {textStyle: {fontSize: 11}},

};

// Create and draw the visualization.

var chart = new google.visualization.BubbleChart(

document.getElementById('visualization'));

function selectHandler() {

var selectedItem = chart.getSelection()[0];

}

google.visualization.events.addListener(chart, 'select', selectHandler);

chart.draw(data, {

backgroundColor: '#FFFFCC',

title: 'TRANSPARENCY TEST',

sizeAxis:{maxSize:'1'},

sizeAxis:{minSize:'1'},

hAxis: {

maxValue: 4,

minValue: 1.25,

gridlines: {count: '0'},

},

vAxis: {

maxValue: 4,

minValue: 1.25,

gridlines: {count: '0'},

}

},options);

}

google.setOnLoadCallback(drawVisualization);

</script>

</p>

</div>

</td>

</tr>

</table>

</body>

</html>

I hope if there are others forced to be on older versions of IE that this comes in handy.

Thanks!

asgallant

unread,

May 6, 2013, 3:41:32 PM5/6/13

to google-visua...@googlegroups.com

In testing this, I found that it usually filters out most of the chart elements along with the chart's background (and those that remain flicker on and off as the mouse moves). This could be due to imperfect emulation of IE 8 in IE 10, but it might be worth looking into.

Todd Telle

unread,

May 14, 2013, 9:30:42 AM5/14/13

to google-visua...@googlegroups.com

Hey asgallant, wanted to just followup and let you know I've tested in multiple IE8 browsers (not simulated using a higher version) and it works pretty well. The only problem I have seen is a little choppiness along the edge of the circles, but not even noticeable to most people; better than no solution at all. Thanks!

Reply all

Reply to author

Forward