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.

Answer 1

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);
}