Use parameter in function passed to google.setOnLoadCallback();
I'm trying to use Google Visualization API to display data gathered from a MySQL server. I want to get the data using PHP and then pass it into the javascript function call to create a chart. When I do this, I'm having a problem passing parameters to the function passed to google.setOnLoadCallback();. I'm fairly new to web programming, so bear with me. The working code (pretty much from their docs) looks like this:
<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(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1000);
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>
I was trying to first see if I could set up the data outside of the drawChart() function and 开发者_开发百科pass it as a parameter as so:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
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);
google.setOnLoadCallback(drawChart(data1));
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>
I'm not too sure why this doesn't work. What would be the best way to create the DataTable object using dynamically gathered data from a PHP MySQL call? Thanks for your time.
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>
加载中,请稍侯......
精彩评论