load google annotated chart within jquery ui tab content via ajax method
- by twmulloy
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>
