通过Ajax加载Google Chart

时间:2012-03-13 13:04:00

标签: ajax charts google-visualization

我已经整理了一个简单的费用跟踪页面,我目前正在尝试使用.load()加载Google图表 - 但是当我加载页面时,我收到此错误:

google is not defined
function drawChart() {
在我的图表脚本中调用

https://www.google.com/jsapi并自行工作,但在通过Ajax加载时失败。

这是我用来调用图表的方法..

$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);

非常感谢。

- 代码 -

来自chart.pl的片段

总计:19.15英镑
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Description');
data.addColumn('number', 'Cost');
data.addRows([
    ['Groceries', 7.16],
    ['Web / Hosting', 5.99],
    ['Miscellanious', 4.00],
    ['Breakfast', 2.00]

]);
var options = {
    title: ''
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style='height:400px; width:400px; cursor:pointer;'></div>
来自index.pl的

片段

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);

});
</script>

2 个答案:

答案 0 :(得分:1)

您是否在加载和回调方法之前添加了Google JSAPI脚本?

以下是代码,如果你没有:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

答案 1 :(得分:0)

Google可能有跨域政策吗?