google jsapi don't load in Drupal 7

Question

i'm developing in Drupal 7. i've created a custom module with reports where a i'd like add charts with google jsapi. I've call this api:

drupal_add_js('https://www.google.com/jsapi');

Then in mymodule.js used the next dummy js:

google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['Task', 'Hours per Day'],
     ['Work',     1],
     ['Eat',      2],
     ['Commute',  2],
     ['Watch TV', 2],
     ['Sleep',    7]
   ]);

   var options = {
     title: 'My Daily Activities',
     pieHole: 0.4,
   };

   var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
   chart.draw(data, options);
 }

This dummy goes to mymodule.admin.inc in:

<div id="donutchart" style="width: 900px; height: 500px;"></div>

The problem is when the site charge the jsapi, all site simply keeps on charging and nothing happen.

I've been following this tutorial https://drupal.org/node/1808654.

I hope someone can help me to solve this problem, Thanks for respond.

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

When including external hosted javascript files, you need to specify that it is external when calling the drupal_add_js function. When not specifying this argument, Drupal will try to load it on the file system (which doesn't exists).

drupal_add_js('https://www.google.com/jsapi', 'external');

Update

It seems that you are experiencing the blank page problem. Could you try with the following javascript code, I've changed the callback definition passing it directly through the load function.

google.load("visualization", "1", { 'callback': 'drawChart', packages: ["corechart"] });

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['Task', 'Hours per Day'],
     ['Work',     1],
     ['Eat',      2],
     ['Commute',  2],
     ['Watch TV', 2],
     ['Sleep',    7]
   ]);

   var options = {
     title: 'My Daily Activities',
     pieHole: 0.4
   };

   var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
   chart.draw(data, options);
}

edited May 23 '17 at 12:28

Community

1
1

answered Oct 15 '13 at 19:23

Mike Vranckx

5,557
3
25
28

Thanks, already changed this line but the problem persist and firebug from mozilla shows this: If – cenceros Oct 15 '13 at 20:49
I've updated my answer with a possible solution. It seems to be problem with the callback declaration. – Mike Vranckx Oct 15 '13 at 21:13
Great! The site works again and the chart displayed,thanks a lot! the problem was fixed! Gracias amigo! – cenceros Oct 15 '13 at 22:07

google jsapi don't load in Drupal 7

1 Answers1