TypeError: google.visualization is undefined

Question

I\'m trying to work with Google charts API, but I get an error I can\'t understand:

Here is my code:

Answer 1

Timing problem. Typically you call google chart like

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

So, when visualization package is loaded function to draw is called.

Now, in your case everything is done later, so you have to do:

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

function doStats() {

var statisticsOverview = {
    init: function() {
        console.log('init');
        this.drawIncomeChart();
        this.drawExpensesChart();
        this.drawEconomiesChart();
    },
    ...
};    

statisticsOverview.init()
}

google.setOnLoadCallback(doStats);

Similar result can be get using

setTimeout(function() {
    statisticsOverview.init();
}, 3000);

without wrapper function.

Answer 2

Try this way. This is working fine for me

    var timeout;
    google.charts.load('current', { 'packages': ['corechart'] });
    $(document).ready(function(){
       timeout = setInterval(function () {
          if (google.visualization != undefined) {
             drawChart();
             clearInterval(timeout);
          }
       }, 300);
    });

    function drawChart(range, type) {
       var data = new google.visualization.DataTable();
    .....
    }