问题
I've got several functions that instantiate various charts using Google Charts API.
When I call them without jQuery's $(document).ready method, everything works fine. But with that method, I'm looking at blank screen.
Why?
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
function drawColumnChart1(){..some code..}
function drawColumnChart2(){..some code..}
function drawGeoChart(){.some code..}
//This works fine.
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);
//This doesn't work
$(document).ready(function(){
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);
});
UPDATE Here is the error I get in Firebug:
uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20" data: no]
http://www.google.com/jsapi
Line 22
回答1:
google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?
is probably the closest answer, and Ryan Wheale's answer on the following may also be helpful.
Is it ok to use google.setOnLoadCallback multiple times?
回答2:
According to the google visualization documentation you need to load the visual package(s) prior to onload or jquery ready. I would suggest loading immediately after the jsapi script reference as shown below.
Otherwise you will get a 1) google is not defined (reference error) or 2) if using ajax possibly a blank response & blank page with no errors.
load sequence: (using your example)
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>
$(document).ready(function(){
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);
});
回答3:
Here is the paradigm I am using. Set a callback for the google.load method, and don't use the google.setOnLoadCallback at all (AFAIK this is not needed).
MyChart.prototype.render = function() {
var self = this;
google.load("visualization",
"1",
{ callback: function() { self.visualize(); },
packages: ["corechart"] }
);
}
MyChart.prototype.visualize = function() {
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("mychart_div"));
chart.draw(data, options);
}
回答4:
Hi that solution doesn't worked for me, apparently (i'm guessing i'm not sure) google library has some scope issues when you call it inside a jquery object, so the solution is quite simple (although got it wasn't so simple :s) define a global variable and assign the google librari:
var localGoogle = google;
looks funny huh :)... then use the variable you defined to invoque the setOnCallback, it worked for me i hope it work for you..
$(document).ready(function(){
localGoogle.setOnLoadCallback(window.drawColumnChart1);
}
回答5:
For an alternate solution you can use 'autoloading' to include the packages you want in the script tag. This negates the need for "google.setOnLoadCallback".
see https://developers.google.com/loader/#AutoLoading for details.
So, you can do everything as you would normally from as jquery document ready event.
There is also a wizard that can set up a URL for you, but currently the link is broken. Here it is anyway: http://code.google.com/apis/loader/autoloader-wizard.html
回答6:
you hav to call https://www.google.com/jsapi instead of http://www.google.com/jsapi
good luck
回答7:
This works for me:
google.load("visualization", "1", {packages:["corechart"],
callback:function(){drawChart();}});
//google.setOnLoadCallback(drawChart);
function drawChart() {
console.log("enter draw");
var data = google.visualization.arrayToDataTable([
['Year', 'value', { role: 'style' } ],
['2010', 10, ' color: gray'],
['2010', 200, 'color: #76A7FA'],
['2020', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8;
fill-color: #BC5679; fill-opacity: 0.2']
]);
var view = new google.visualization.DataView(data);
var options = {
title: 'Company Performance',
tooltip: {isHtml: false},
legend: 'none',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
Demo: jsfiddle
回答8:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {
$.ajax({
url: "http://localhost/reporte/response.php",
type: "GET",
dataType: "JSON",
cache: false,
async: false,
data: {start:gstart,end:gend,id:gid},
success: function(data) {
var len = 0;
if (data.length)
{
len = data.length;
}
if(len > 0)
{
dataarray = [[gtitle,glabel]];
for (var i = 0; i< len; i++) {
dataarray.push([data[i].label,data[i].value]);
}
}
else if(len==0)
{
}
},
error:function(data)
{
}
});
var values = new google.visualization.arrayToDataTable(dataarray);
var options = {title: gtitle,width:gwidth,height:gheight};
switch(gtype){
case 'PieChart':
var chart = new google.visualization.PieChart(document.getElementById('chart'));
break;
case 'LineChart':
var chart = new google.visualization.LineChart(document.getElementById('chart'));
break;
case 'ColumnChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
case 'AreaChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
}
chart.draw(values, options);
}
$(document).ready(function(){
//drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
//drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
//drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
回答9:
Try to close the call to ready?
$(document).ready(function(){
...
});
^^^
来源：https://stackoverflow.com/questions/5197547/google-charts-api-shows-blank-screen-with-document-ready-method