IE 8 Background Transparency for Google Bubble Charts using jQuery

IE 8 Background Transparency for Google Bubble Charts using jQuery

Greetings.
I am completely new to JQuery, and it seems like this may offer a solution to the IE8 issue of not supporting transparency. I am attempting to draw a google bubble chart onto a transparent layer, which has another image underneath it to achieve a background image under the chart. It works fine in chrome, but fails in IE8... and I found a post that says this about a fix for IE8: 

$('#vis iframe').attr('allowTransparency', 'true'); $('#vis iframe').contents().find('body').css('background', 'transparent');

But I am not sure how to use it. Below is an example of my code that works in chrome. If there are any ways to get this to work in IE8 with jQuery my life would be grand- as this has been something I am struggling with for over a month. Thank you in advance for anyone who has any ideas!!


<!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>TEST</title>
<style type="text/css">
<!--

}

.style1 {
font-size: 18px;
font-weight: bold;

}
-->
</style>

</head>

<body>
<br />
<table width="530" height="447" border="1" >
  <tr>
    <td background="Background_Image.png"><p>
    

<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',                         ' INVESTMENT'],
            ['85',    2.39,              1.94,          '85  ',                     720.1],
            ['118',   2.14,              1.53,          '118  ',         136.436],
            ['34',    2.26,               2.60,          '34 ',                       1669.49],
            ['142',   2.09,              2.33,          '142 ',         183.121],
            ['143',   2.41,              1.53,             '143 ',      119.614],
            ['147',   2.44,              2.00,           '147 ',                     177.838],
            ['122',   2.53,              1.63,          '122 ',                      159.944],
            ['58',    2.29,              2.38,          '58 ',                      2893.088],
            ['64',    2.28,               1.47,          '64 ',                           2.155],
          ]);
      
          var options = {
          
title: 'TEST',
            hAxis: {title: 'H AXIS'},
            vAxis: {title: 'V AXIS'},
            bubble: {textStyle: {fontSize: 11}},
          };
      
          // Create and draw the visualization.
          var chart = new google.visualization.BubbleChart(
              document.getElementById('visualization'));
/////////////////////////////  
// SELECT EVENT HANDLER FOR WHEN YOU SELECT THE BUBBLE CHART

function selectHandler() {
          var selectedItem = chart.getSelection()[0];
         
        }
  
  google.visualization.events.addListener(chart, 'select', selectHandler);
/////////////////////////////  
          chart.draw(data, {
 

backgroundColor: 'transparent',

 title: 'BUSINESS SCORE: 2.69     TECHNICAL SCORE: 2.17',
 sizeAxis:{maxSize:'1'},
sizeAxis:{minSize:'1'},
  hAxis: {
                maxValue: 4,
                minValue: 1.25,
gridlines: {color: '#1E4D6B'},
gridlines: {count: '0'},
            },
            vAxis: {
                maxValue: 4,
                minValue: 1.25,
gridlines: {color: '#1E4D6B'},
gridlines: {count: '0'},
            }
 },options);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
    </p>
    <div id="visualization" style="width: 800px; height: 600px;">
    
    </div>
    
  
    <p>&nbsp;</p></td>
  </tr>
</table>
<br />

<div style="position: relative; top: -200px; left: 220px; color: #ffa500; font-size: 20px; z-index: 1; padding: 0;" ><br />
<br />
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 450px; height: 350px;"></div>
</body>
</html>
​
<p>&nbsp; </p>
</body>

</html>