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>
