TypeError: google.visualization.DataTable is not a constructor
Question
On my web page I have a google map, as well as three charts. When the page loads the map is fine, but the charts either don't load or only one or two do. 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);
});
}
3 answers
solution1
19 ACCPTED 2015-09-08 13:58:27
I don't think you can add more than one callback like that.
Also, you can define the callback in the load method, like so...
google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawCharts});
function drawCharts() {
drawAltitudeChart();
drawDisplacementChart();
drawDistanceChart();
}
EDIT
the above load statement is for the older library...
<script src="http://www.google.com/jsapi"></script>
according to the release notes ...
The version of Google Charts that remains available via the
jsapiloader is no longer being updated consistently. Please use the new gstatic loader from now on.
using the new library...
<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 one load statement, eg
instead of...
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);
it should be...
google.charts.load('current', {
callback: drawCharts,
packages: ['bar', 'corechart', 'table']
});
solution2
9 2018-03-09 18:54:29
I got the same message, but just because I forgot to load the package
// was -> google.charts.load('current', {'packages':['bar', 'corechart']});
google.charts.load('current', {'packages':['bar', 'corechart', 'table']});
solution3
0 2021-03-08 12:54:53
Even if you are using the right strategy ie loading google charts and using callbacks on the load event, it is necessary to keep the scripts in the head tag unlike we keep the scripts at the bottom to prevent slow page load.
I am quoting this directly from documentation of google charts:
With few exceptions, all web pages with Google Charts should include the following lines in the <head> of the web page:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
...
</script>
Reference: Basic Chart Loading
PS: I followed each detail but missed to keep the loading scripts in head tag, i got this error coninuously TypeError: google.visualization.arrayToDataTable is not a function . Keeping the scripts in head tag resolved the issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.