load google annotated chart within jquery ui tab content via ajax method

Question

Hi, I am encountering an issue with trying to load a google annotated chart (http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html) within a jquery ui tab using content via ajax method (http://jqueryui.com/demos/tabs/#ajax).

If instead I use the default tabs functionality, writing out the code things work fine:

<div id="tabs">
   <ul>
       <li><a href="#tabs-1">Chart</a></li>
   </ul>
   <div id="tabs-1">
      <script type="text/javascript"> 
         google.load('visualization', '1', {'packages':['annotatedtimeline']});
         google.setOnLoadCallback(drawChart);

      function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('date', 'Date');
         data.addColumn('number', 'cloudofinc.com');
         data.addColumn('string', 'header');
         data.addColumn('string', 'text')
         data.addColumn('number', 'All Clients');
            data.addRows([
               [new Date('May 12, 2010'), 2, '2 New Users', '', 3],
               [new Date('May 13, 2010'), 0, undefined, undefined, 0],
               [new Date('May 14, 2010'), 0, undefined, undefined, 0],
            ]);

            var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_users'));

            chart.draw(data, {
        displayAnnotations: false, 
        fill: 10,
        thickness: 1
            });
         }
      </script> 
      <div id='chart_users' style='width: 100%; height: 400px;'></div> 
   </div>
</div>

But if I use the ajax method for jquery ui tab and point to the partial for the tab, it doesn't work completely. The page renders and once the chart loads, the browser window goes white. However, you can see the tab partial flash just before the chart appears to finish rendering (the chart never actually displays). I have verified that the partial is indeed loading properly without the chart.

<div id="tabs">
  <ul>
    <li><a href="ajax/tabs-1">Chart</a></li>
  </ul>
</div>

Answer 1

You have JavaScript inside of the middle of HTML, so the script start running before the html page are loaded till the end and before the Google visualization API is loaded.

Moreover the idea of using jQuery UI tab together with content loaded via ajax I find not good in your case. On the page http://jqueryui.com/demos/tabs/#ajax you can read following:

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!).

So I would you recommend to make all easier and use select event of the tabs control.