I have several tabs in my application, and each tab loads a different sub-page via jQuery load() function.
My problem is that some of the pages contain Google Visualization plugins and these will not work.
My first approach was to have the JavaScript for the Visualization API in the sub-page being loaded, but that did not work - the page would go blank and get stuck while loading something from apis.google
My second approach was to just insert a div where the visualization is supposed to go, then call a script (that I defined earlier) which would populate this div.
Here is the script that generates the visualization:
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperature');
data.addColumn('number', 'Humidity');
data.addRows([
<?php echo /* raw data outputted by generating functions */ ?>
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
chart.draw(data, {
displayAnnotations: true,
'scaleColumns': [0,1],
'scaleType': 'allmaximized',
'displayZoomButtons': false
});
}
Here is the script that I use to call the above script (when a tab is clicked).
$('#loadarea').load('tab1.php');
drawChart();
Also, this might be related: At the beginning of the document, I use jQuery to pre-load some other spaces on the page:
$(document).ready(function() {
$('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});
Thanks,
I have several tabs in my application, and each tab loads a different sub-page via jQuery load() function.
My problem is that some of the pages contain Google Visualization plugins and these will not work.
My first approach was to have the JavaScript for the Visualization API in the sub-page being loaded, but that did not work - the page would go blank and get stuck while loading something from apis.google.
My second approach was to just insert a div where the visualization is supposed to go, then call a script (that I defined earlier) which would populate this div.
Here is the script that generates the visualization:
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperature');
data.addColumn('number', 'Humidity');
data.addRows([
<?php echo /* raw data outputted by generating functions */ ?>
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
chart.draw(data, {
displayAnnotations: true,
'scaleColumns': [0,1],
'scaleType': 'allmaximized',
'displayZoomButtons': false
});
}
Here is the script that I use to call the above script (when a tab is clicked).
$('#loadarea').load('tab1.php');
drawChart();
Also, this might be related: At the beginning of the document, I use jQuery to pre-load some other spaces on the page:
$(document).ready(function() {
$('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});
Thanks,
Share Improve this question asked Apr 8, 2010 at 21:06 GoroGoro 10.2k23 gold badges79 silver badges108 bronze badges1 Answer
Reset to default 5There were two things wrong with this:
google.setOnLoadCallback(drawChart)
was calling the function, so I got rid of that.the script was attempting to fill up the
div
before it was loaded, so I added the function call todrawChart()
inside the tab-changing script:$('#loadarea').load('tab1.php', function() { drawChart(); });
This works now.