Load annotated google chart in jquery ui tab content using ajax method
I am facing problem trying to load google annotated chart ( http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html ) in jquery ui tab using content via ajax method ( http: // jqueryui. com / demos / tabs / # ajax ).
If instead I use the default tabbing functionality while writing out the code, everything works 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 jquery ui tab ajax method and point to partial for the tab, it doesn't work completely. The page is displayed, and as soon as the chart is loaded, the browser window turns white. However, you can see a partial flash of the tab just before the chart appears to finish rendering (the chart never appears). I have verified that the partial load does indeed load without a diagram.
<div id="tabs">
<ul>
<li><a href="ajax/tabs-1">Chart</a></li>
</ul>
</div>
a source to share
You have JavaScript inside the middle of the HTML, so the script runs before the html page loads to the end and before the google rendering API is loaded.
Also, the idea of using a jQuery UI tab along with the content loaded via ajax is not good for me in your case. On the page http://jqueryui.com/demos/tabs/#ajax you can read the following:
The required HTML is different from the one used for static tabs: a list of links pointing to existing resources (from where the content is loaded) and no additional containers at all (unobtrusive!).
So, I would recommend keeping things simple and using the select
control event tabs
.
a source to share