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', <div id="visualization" style="width: 800px; height: 600px; filter: progid:DXImageTransform.Microsoft.Chroma(Color='#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";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TRANSPARENCY TEST</title> </head> <body> <table width="530" height="447" border="1" background="Advisors-Current.png" > <tr> <td> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> 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 id="visualization" style="width: 800px; height: 600px; filter: progid:DXImageTransform.Microsoft.Chroma(Color='#FFFFCC')"> </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! -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
