Menu
I am using Google Charts to display some data. I initialize the chart I want and then call a function that formats my data. That function will then call the drawChart(parameter) function to draw the chart. The google.charts.setOnLoadCallback(drawChart(parameter)); function does this. When I do this, however, it gives me this error: Uncaught TypeError: Cannot read property 'DataTable' of undefined Here's my code:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="chart_div"></div>
<script>
google.charts.load('current', {
'packages': ['annotationchart']
});
</script>
</body>
</html>
chart.js
function formatData(worksheet) {
//excess function removed to make question simpler.
google.charts.setOnLoadCallback(drawChart(dataArr));
}
function drawChart(dataArr) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'In');
data.addColumn('number', 'Out');
data.addRows([
[new Date(2017, 2, 15, 06, 00, 00), 12400,
10645],
[new Date(2017, 2, 15, 07, 00, 00), 24045,
12374
],
[new Date(2017, 2, 15, 08, 00, 00), 35022,
15766
],
[new Date(2017, 2, 15, 09, 00, 00), 12284,
34334
],
[new Date(2017, 2, 15, 10, 00, 00), 8476,
66467
],
[new Date(2017, 2, 15, 11, 00, 00), 0,
79463
]
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
chart.draw(data);
}
When I remove the parameter, the chart gets displayed and there is no error. How can I make it so that it is able to display the chart when I pass in a parameter and not give me that error?
213
setOnLoadCallback takes a reference to a --> function
not the result of a --> function()
try it like this...
function formatData(worksheet) {
google.charts.setOnLoadCallback(function () {
drawChart(dataArr);
});
}
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
