admin管理员组文章数量:1278853
so this is my set up on my index.html. the api key has been generated at console.developers.google and I don't think that it was causing an error.
the problem is the arrayToDataTable is undefined, I put it on my index.html just to test if this would work but in my real apps it was separated to a ponent.
<script type="text/javascript" src=".js"></script>
<script type="text/javascript" src=""></script>
<script>
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyC1PKyylEm8Xe0l0fnv81tuuUS-eOlrRCQ'
});
google.charts.setOnLoadCallback(drawStuff());
function drawStuff() {
var MapData = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
console.log(MapData);
// Set chart options
var MapOptions = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.GeoChart(document.getElementById('chartdiv'));
chart.draw(MapData, MapOptions);
};
</script>
I really don't know what's missing in the set up.
so this is my set up on my index.html. the api key has been generated at console.developers.google. and I don't think that it was causing an error.
the problem is the arrayToDataTable is undefined, I put it on my index.html just to test if this would work but in my real apps it was separated to a ponent.
<script type="text/javascript" src="https://www.gstatic./charts/loader.js"></script>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script>
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyC1PKyylEm8Xe0l0fnv81tuuUS-eOlrRCQ'
});
google.charts.setOnLoadCallback(drawStuff());
function drawStuff() {
var MapData = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
console.log(MapData);
// Set chart options
var MapOptions = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.GeoChart(document.getElementById('chartdiv'));
chart.draw(MapData, MapOptions);
};
</script>
I really don't know what's missing in the set up.
Share Improve this question asked Sep 5, 2017 at 11:30 Joshua FabillarJoshua Fabillar 4962 gold badges10 silver badges24 bronze badges 3- try console.log(google.visualization.arrayToDataTable); is function? – invernomuto Commented Sep 5, 2017 at 11:34
- @InferOn it was undefined. but when I try the console.log(google) everything are present. weird. but when I try console.log(google.visualization). it was undefined. – Joshua Fabillar Commented Sep 5, 2017 at 11:39
- I have modified an official jsfiddle and seems to work jsfiddle/6fru9eo6/1 – invernomuto Commented Sep 5, 2017 at 11:50
3 Answers
Reset to default 9First, remove the parentheses in ...
google.charts.setOnLoadCallback(drawStuff) // not drawStuff()
When you have the parenthesis, you are passing the result of calling the function, but the API wants to be given a handler function (not its result).
Furthermore, instead of ...
["Code", "Name", "Value"],
...try using the label syntax, like so...
[{label: 'Code', type: 'string'},
{label: 'Name', type: 'string'},
{label: 'Value', type: 'number'}],
The API should be able to figure it out without this change, but this is a "just-in-case-its-needed" sort of change that also makes the code more self-documenting.
Hi try with this console online for web html js css :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
// Set chart options
var options = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}<script src="http://www.google./jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>In my case use angular 9, i consume WS service and next i try to send value on arrayToDataTable and ComboChart or GeoChart, and have the same error.
i fix issues i call the same function until all ponents angular is ready. add google chart on asset folder in angular and then i call you on index.html
i hope helpfully.
Example
your_function_name(){
your_ws_name().subscribe(
(data) => {
try {
//is ok
}
catch(e){
//to make until all elements google char on ready.
if (e.toString().includes('arrayToDataTable') ||
e.toString().includes('ComboChart')) {
this.your_function_name();
}
}
}
);
}
本文标签： javascriptCannot read property 39arrayToDataTable39 of undefined at Google Geo ChartsStack Overflow
版权声明：本文标题：javascript - Cannot read property 'arrayToDataTable' of undefined at Google Geo Charts - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741303008a2371203.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论