Menu
I am using Google Geocharts and following Google's documentation (https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en) to setup a chart like this:
google.charts.load('current', {'packages':['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
...
var data = google.visualization.arrayToDataTable(a1);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('div_geochart'));
chart.draw(data, options);
};
array a1 is defined globally. The script include lines are present in the header. The problem is, sometimes, I get an error saying:
Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined
and the chart doesn't load. The real problem is that it's hard to pinpoint the problem since it doesn't happen always. It seems that sometimes the google.visualization hasn't as yet been set up? But isn't the whole point of calling drawRegionsMap using setOnLoadCallback that, it will be called after google.visualization has been successfully set up?
I did try changing the location of the setOnLoadCallback lines as mentioned here: Google Visualization - TypeError: Cannot read property 'DataTable' of undefined [Chrome specific]. I also put those 2 lines in the <head> section of the page but the error still occurs sometimes (tested in Chrome and IE).
Could someone give me pointers as to how to avoid getting this error?
960
Note that google.setOnLoadCallback is different from google.charts.setOnLoadCallback. If you use google.charts.load() you need to also use google.charts.setOnLoadCallback(). They go together.
Furthermore, since you are using the GeoChart, you probably still need to load the jsapi loader, which is used to load the geocoding data via Google Maps. This is no longer true, however, for the latest version, but still applies if you are using an older version. So your document should look something like this:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawSomeGeoChart);
function drawSomeGeoChart() {
...
}
</script>
I typically wait for the load event, before loading google.
You can also define the callback function, within the google.charts.load statement.
var a1 = [
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
];
// wait for page to load
window.addEventListener('load', loadGoogle, false);
function loadGoogle() {
// define callback in load statement
google.charts.load('current', {'packages':['geochart'], 'callback': drawRegionsMap});
}
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable(a1);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('div_geochart'));
chart.draw(data, options);
};<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="div_geochart"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
