Google Visualization - TypeError: Cannot read property 'DataTable' of undefined [Chrome specific]

Question

I am using Google Visualization Library my application was working correctly, I am unable to figure out how on chrome (specifically) this err starts coming up. Working fine in Firefox

function drawVisualization() {

var data = new google.visualization.DataTable(countArray);

// Declare columns
data.addColumn('date', 'Day');
data.addColumn('number', 'Person');

// Add data.
data.addRows(countArrayFinal);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).draw(data, {
    title: 'Performance',
    width : 700,
    height : 300,
    vAxis : {
        maxValue : 4000
    }
});
}drawVisualization();

Answer 1

This error occurs because google visualization is not loaded.

Add this below the drawVisualization function:

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

instead of

drawVisualization();

Answer 2

I had a similar problem using Google Charts, and this alone did not solved it because the .setOnLoadCallback() method did not waited for the library to load, so I had to turn the function into async and use the await keyword before the google.load() method to force it to wait until it was loaded:

function async drawVisualization() {     
await google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback($scope.dibujarGrafica(cantidadDeCadaIntervalo, modo));

...