我想显示一个折线图,该折线图从数据库的表中获取信息。我遇到了Google Graphs,它似乎最适合我的需求。我可以得到图形来显示我放置在代码中的数据,但是当我尝试使用echo从数据库添加数据时,它将无法工作。请在下面找到我的代码。我不确定我在这里做错了什么。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Number of Products');
data.addRows([
<!--CHANGE FOR PHP TO PULL INFORMATION FRO MYSQL DBA-->
<?php
// Create connection
$con=mysqli_connect("host","username","password","database");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM table");
$start = 0;
while($row = mysqli_fetch_array($result)){
echo "['".$row["dateadded"]."', ".$row["products"]."],";
mysqli_close($con);
?>
]);
// Set chart options
var options = {'title':'Product Count History',
'width':600 ,
'height':550};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_product_history'));
chart.draw(data, options);
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<div id="chart_product_history"></div>
</td>
<td width="50%">
</td>
</tr>
<tr>
<td width="50%">
</td>
<td width="50%">
</td>
</tr>
</table>
谢谢瑞安
最佳答案
我用一些固定的随机数据尝试了您的代码,它确实生成了一个图形(尽管数组中有一个逗号,这有时可能会引起问题)。
您似乎在查询结果周围的循环中缺少右花括号。
尝试以下
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Number of Products');
data.addRows([
<!--CHANGE FOR PHP TO PULL INFORMATION FRO MYSQL DBA-->
<?php
// Create connection
$con=mysqli_connect("host","username","password","database");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM table");
$start = 0;
$OutArray = array();
while($row = mysqli_fetch_array($result))
{
$OutArray[] = "['".$row["dateadded"]."', ".$row["products"]."],";
}
echo explode(',', $OutArray);
mysqli_close($con);
?>
]);
// Set chart options
var options = {'title':'Product Count History',
'width':600 ,
'height':550};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_product_history'));
chart.draw(data, options);
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<div id="chart_product_history"></div>
</td>
<td width="50%">
</td>
</tr>
<tr>
<td width="50%">
</td>
<td width="50%">
</td>
</tr>
</table>
关于php - Google Graphs和PHP,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18251987/