admin管理员组文章数量:1332345
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.
本文标签: javascriptLoading Google Visualisations via AjaxStack Overflow
版权声明:本文标题:javascript - Loading Google Visualisations via Ajax - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742250402a2440649.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论