admin管理员组文章数量:1277267
I am using Google Geocharts and following Google's documentation () 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?
I am using Google Geocharts and following Google's documentation (https://developers.google./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?
Share Improve this question edited May 23, 2017 at 12:02 CommunityBot 11 silver badge asked Feb 1, 2016 at 1:34 Sujay PhadkeSujay Phadke 2,1961 gold badge25 silver badges44 bronze badges 1-
no. this is the only place where drawRegionsMap is called from. nothing more here. 'a1' is simply defined as an array at the top of the javacript starting block as:
var a1 = [['Countries', 'Popularity'], ['US', '1']];– Sujay Phadke Commented Feb 1, 2016 at 2:07
4 Answers
Reset to default 6Note 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./charts/loader.js"></script>
<script type="text/javascript" src="https://www.google./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./charts/loader.js"></script>
<script src="https://www.google./jsapi"></script>
<div id="div_geochart"></div>In the off-chance someone has the same issue as I had: build in a small delay using setTimeout()
For some reason the callback function wasn't doing it's job when I bined the loader.js VueJS. After some digging and building in the delay - VOILA! A map :)
Here is my workaround:
Add <script> tag in the head section and use "defer" to it.
<head>
<script defer async=false src="https://www.google./jsapi"></script>
<script defer src="https://www.gstatic./charts/loader.js"></script>
</head>
本文标签： javascriptGoogle visualization undefined for setOnLoadCallbackStack Overflow
版权声明：本文标题：javascript - Google visualization undefined for setOnLoadCallback - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741209408a2358805.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论