Use parameter in function passed to google.setOnLoadCallback();
in the first example you pass in the function to the callback, in the second example you call the function and then pass in the result of that call to the callback.
try:
setOnLoadCallback(function(){ drawChart(data) })
The following are the steps to make it work:
- Place google.load and google.setOnLoadCallback in a separate script tag.
- Use a function expression.
Here is the working code:
<html><head><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(function() { drawChart(data1); });</script><script type="text/javascript"> var data1 = new google.visualization.DataTable(); data1.addColumn('string', 'Year'); data1.addColumn('number', 'Sales'); data1.addRows(4); data1.setValue(0, 0, '2004'); data1.setValue(0, 1, 1000); data1.setValue(1, 0, '2005'); data1.setValue(1, 1, 1170); data1.setValue(2, 0, '2006'); data1.setValue(2, 1, 660); data1.setValue(3, 0, '2007'); data1.setValue(3, 1, 1000); function drawChart(data) { var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }); }</script></head><body> <div id="chart_div"></div></body></html>