title: Numbers on a Google Chart aren't loading on IE (pre-IE10)
body: <p>I've been tasked to fix a Google Chart issue that users (IE8 &amp; IE9) have complained about.</p>
  
  <p>Basically, I have a Google Chart on a "tab" on our front end.  I've made a static instance of our front end (saved the HTML on the browser) and distilled the problem down to the below HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function ShowSection(strSectionName){
          document.getElementById('TAB_TIME').style.backgroundColor='white';
          document.getElementById('TAB_RESPONSES').style.backgroundColor='white';
  
          document.getElementById('SECTION_TIME').style.display='none';
          document.getElementById('SECTION_RESPONSES').style.display='none';
  
          document.getElementById('TAB_'+ strSectionName).style.backgroundColor='lightblue';
          document.getElementById('SECTION_'+ strSectionName).style.display='table-row';
                  }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body style="margin:20px;" onLoad="ShowSection('RESPONSES');"&gt;
  
          &lt;table style="table-layout:fixed;width:1390px;" border="1" cellpadding="6" cellspacing="0"&gt;
              &lt;tr&gt;
                  &lt;td id="TAB_TIME"       onClick="ShowSection('TIME');"&gt;TIME SERIES&lt;/td&gt;
                  &lt;td id="TAB_RESPONSES"      onClick="ShowSection('RESPONSES');"&gt;RESPONSES&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr id="SECTION_RESPONSES"&gt;
                  &lt;td&gt;Hello world&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr id="SECTION_TIME" &gt;
                  &lt;td align="left" valign="top"&gt;
                      &lt;div style="border:1px solid black;" id="CHART_SALES_OVER_TIME_WEEKLY"&gt;&lt;/div&gt;
                      &lt;script type="text/javascript"&gt;
                            google.load("visualization", "1", {packages:["corechart"]});
                            google.setOnLoadCallback(drawChart);
                            function drawChart() {
                              var data = google.visualization.arrayToDataTable([
                                ['Dummy data', 'Sales'],
                              ['1', 1],['2', 1],['3', 3],['4', 0]
                              ]);
  
                              var options = {
                                height: 600,
                                width: 1370
                              };
  
                              var chart = new google.visualization.ColumnChart(document.getElementById('CHART_SALES_OVER_TIME_WEEKLY'));
                              chart.draw(data, options);
                            }
                      &lt;/script&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, if you fire that up, you'll see it's a representation of two tabs (using tables), by onLoad hiding 's, and onClick to swap between them.</p>
  
  <p>Everything works as intended on most browsers when you click on the TIME SERIES "tab", in that you see numbers on the x- and y-axes; However, in IE8 and IE9, the numbers on the axes don't load.  The only exception to that is to change the body tag to point to the TIME SERIES tab onLoad, ie:</p>
  
  <pre><code>    &lt;body style="margin:20px;" onLoad="ShowSection('TIME');"&gt;
  </code></pre>
  
  <p>Doing that makes IE load the numbers.  Can anyone explain to me what incompatibility in IE8 and IE9 is preventing the Google Chart from loading properly (ie. what's happening here!?), and how to rectify it?</p>