我正在尝试使用 PHP 和 MySql 渲染 google 图表,但没有渲染图表,也没有显示错误消息。 html 代码是否正确?
I am trying to render google chart using PHP and MySql but no chart is rendered and no error message is displayed. Is the html code correct?
<?php
$host = "localhost";
$username = "root";
$password = "root";
$db = "ujval";
$conn = new mysqli($host, $username, $password, $db);
if($conn->connect_error) {
die ("Connection failed:". $conn->connect_error);
} else {
echo "Awesome";
}
到目前为止一切正常
$sql = "SELECT * FROM sub_list";
$qresult = $conn->query($sql);
$results = array();
while($res = $qresult->fetch_assoc()) {
$results[] = $res;
}
$bar_chart_data = array();
foreach($results as $result)
{
$bar_chart_data[] = array($result['sub_id'], $result['sub_name']);
}
$bar_chart_data = json_encode($bar_chart_data);
$mysqli_free_result($qresult);
$mysqli_close($conn);
?>
我认为主要问题在于上面的部分。我得到的错误是:
Slim 应用程序错误
由于以下错误,应用程序无法 运行:
详情
类型:错误异常
代码:8
消息:未定义的变量:mysqli_free_result
文件:/Applications/MAMP/htdocs/Dream/Dream/templates/charts.php
行:31
<html>
<head>
<!--Load the AJAX API-->
<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:["bar"]});
<!--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 = google.visualization.DataTable();
data.addColumn('string', 'Age Group');
data.addColumn('number', 'Number');
data.addRows($bar_chart_data);
<!--Set chart options-->
var options = {
title: ' '
};
<!--Instantiate and draw our chart, passing in some options.-->
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
[enter image description here][1]<!--Div that will hold the pie chart-->
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>][1]
</body>
</html>
这是浏览器生成的 HTML 代码。
Awesome
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'sub_id');
data.addColumn('string', 'sub_name');
data.addRows({$bar_chart_data});
var options = {
title: ' '
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
并且浏览器中的错误显示:
"Uncaught ReferenceError: bar_chart_data is not defined"
将最后两行改为
mysqli_free_result($qresult);
mysqli_close($conn);
那么您应该不会再收到该错误消息了。
编辑:
并且,此行未正确解析:
data.addRows($bar_chart_data);
无法在 JavaScript 中引用 PHP 变量。但它应该像这样工作得更好:
data.addRows(<? echo $bar_chart_data ?>);
那么您的 JSON 代码应该正确插入。
<?php
$host = "localhost";
$username = "root";
$password = "root";
$db = "ujval";
$conn = new mysqli($host, $username, $password, $db);
if($conn->connect_error) {
die ("Connection failed:". $conn->connect_error);
} else {
echo "Awesome";
}
到目前为止一切正常
$sql = "SELECT * FROM sub_list";
$qresult = $conn->query($sql);
$results = array();
while($res = $qresult->fetch_assoc()) {
$results[] = $res;
}
$bar_chart_data = array();
foreach($results as $result)
{
$bar_chart_data[] = array($result['sub_id'], $result['sub_name']);
}
$bar_chart_data = json_encode($bar_chart_data);
$mysqli_free_result($qresult);
$mysqli_close($conn);
?>
我认为主要问题在于上面的部分。我得到的错误是:
Slim 应用程序错误 由于以下错误,应用程序无法 运行:
详情
类型:错误异常 代码:8 消息:未定义的变量:mysqli_free_result 文件:/Applications/MAMP/htdocs/Dream/Dream/templates/charts.php 行:31
<html>
<head>
<!--Load the AJAX API-->
<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:["bar"]});
<!--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 = google.visualization.DataTable();
data.addColumn('string', 'Age Group');
data.addColumn('number', 'Number');
data.addRows($bar_chart_data);
<!--Set chart options-->
var options = {
title: ' '
};
<!--Instantiate and draw our chart, passing in some options.-->
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
[enter image description here][1]<!--Div that will hold the pie chart-->
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>][1]
</body>
</html>
这是浏览器生成的 HTML 代码。
Awesome
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'sub_id');
data.addColumn('string', 'sub_name');
data.addRows({$bar_chart_data});
var options = {
title: ' '
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
并且浏览器中的错误显示: "Uncaught ReferenceError: bar_chart_data is not defined"
将最后两行改为
mysqli_free_result($qresult);
mysqli_close($conn);
那么您应该不会再收到该错误消息了。
编辑:
并且,此行未正确解析:
data.addRows($bar_chart_data);
无法在 JavaScript 中引用 PHP 变量。但它应该像这样工作得更好:
data.addRows(<? echo $bar_chart_data ?>);
那么您的 JSON 代码应该正确插入。