Google Charts API shows blank screen with $(document).ready method
https://stackoverflow.com/questions/9125262
-
22-04-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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
Solution
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.
OTHER TIPS
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);
});
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);
}
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);
}
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
you hav to call https://www.google.com/jsapi instead of http://www.google.com/jsapi
good luck
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
<!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>
Try to close the call to ready?
$(document).ready(function(){
...
});
^^^
