TypeError: google.visualization.DataTable is not a constructor

Question

On my webpage I have a google map as well as three diagrams. When the page loads the map in order, but the charts either don't load, or just one or two. Keep getting the error TypeError: google.visualization.DataTable is not a constructor.

function load() { //map object var MY_MAP = new google.maps.Map(document.getElementById("map"), { center: {lat: 54.870902, lng: -6.300565}, zoom: 14 }); //call to get and process data downloadUrl("Map.php", processXML); } // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawAltitudeChart()); google.setOnLoadCallback(drawDisplacementChart()); google.setOnLoadCallback(drawDistanceChart()); function drawAltitudeChart(){ //console.log('hello'); var graph = []; downloadUrl("Map.php", function (data){ var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); var dataTable = new google.visualization.DataTable(); var options = {title:'Altitude (m above sea level)', curveType:'function', legend:{position:'bottom'}, is3d:true }; var chart; for(var i = 0; i<markers.length; i++){ graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; } dataTable.addColumn('string', 'id'); dataTable.addColumn('number', 'Altitude'); dataTable.addRows(graph); chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(dataTable, options); }); } 

Answer 1

I don’t think you can add more than one callback.

Alternatively, you can define a callback in the load method, for example ...

 google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawCharts}); function drawCharts() { drawAltitudeChart(); drawDisplacementChart(); drawDistanceChart(); } 

---

EDIT

the load statement above is for a library older than ...

<script src="http://www.google.com/jsapi"></script>

according to release notes ...

The version of Google Charts that remains available through the jsapi bootloader is not constantly updated. From now on, you can use the new gstatic loader.

using the library new ...

<script src="https://www.gstatic.com/charts/loader.js"></script>

changes the load statement to ...

 google.charts.load('current', {'packages': ['corechart'], 'callback': drawCharts}); 

---

EDIT 2

you can also load all the packages you need in a single load statement, like
instead...

 google.charts.load('current', { 'packages': ['table'] }); google.charts.load('current', { 'packages': ['bar'] }); google.charts.load('current', { 'packages': ['pie'] }); // <-- 'pie' package does not exist google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawCharts); 

he must be ...

 google.charts.load('current', { callback: drawCharts, packages: ['bar', 'corechart', 'table'] }); 

Answer 2

I received the same message, but only because I forgot to download the package

  // was -> google.charts.load('current', {'packages':['bar', 'corechart']}); google.charts.load('current', {'packages':['bar', 'corechart', 'table']});