Loading Google Visualizations via AJAX in jQueryUI tabs
After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs with ajax. While it worked perfectly for the example Visualization chart provided, it did not work for core charts such as column or pie charts. Is there something different that needs to be done for those types of charts?
The index page includes the following script:
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
$(function() {
$("#switch").tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."
);
});
}
});
}); //for switches
google.load("visualization", "1", {packages:["corechart"]});
The ajax page contains:
<script type='text/javascript'>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id='chart_div' style='width: 700px; height: 240px;'></div>