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!
On Monday, May 6, 2013 2:41:32 PM UTC-5, asgallant wrote: > > 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. > > On Monday, May 6, 2013 1:21:30 PM UTC-4, [email protected] wrote: >> >> 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="Background_Image.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.
