Php 用Google图表填充MySQL数据
我想创建一个饼图,基本上应该显示一个学生在分配给他的所有任务中完成了多少任务。我的任务表如下所示 任务 任务|任务|学生|任务|状态 *task_student_id*引用students表中的*user_id*Php 用Google图表填充MySQL数据,php,mysql,google-visualization,Php,Mysql,Google Visualization,我想创建一个饼图,基本上应该显示一个学生在分配给他的所有任务中完成了多少任务。我的任务表如下所示 任务 任务|任务|学生|任务|状态 *task_student_id*引用students表中的*user_id* <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="http://www.google.com/jsapi"></script
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart,table package.
google.load('visualization', '1', {'packages':['corechart','table']});
function drawItems(num) {
var jsonPieChartData = $.ajax({
url: "getpiechartdata.php",
data: "q="+num,
dataType:"json",
async: false
}).responseText;
var jsonTableData = $.ajax({
url: "gettabledata.php",
data: "q="+num,
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var piechartdata = new google.visualization.DataTable(jsonPieChartData);
var tabledata = new google.visualization.DataTable(jsonTableData);
// Instantiate and draw our pie chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(piechartdata, {
width: 700,
height: 500,
chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
});
// Instantiate and draw our table, passing in some options.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(tabledata, {showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<form>
<select name="users" onchange="drawItems(this.value)">
<option value="">Select a student:</option>
<?php
$dbuser="";
$dbname="";
$dbpass="";
$dbserver="";
// Make a MySQL Connection
mysql_connect($dbserver, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
// Create a Query
$sql_query = "SELECT user_id, user_name FROM students";
// Execute query
$result = mysql_query($sql_query) or die(mysql_error());
while ($row = mysql_fetch_array($result)){
echo '<option value='. $row['user_id'] . '>'. $row['user_name'] . '</option>';
}
mysql_close($con);
?>
</select>
</form>
<div id="chart_div"></div>
<div id="table_div"></div>
</body>
</html>
因此,假设我的示例数据为具有user_id的学生,在tasks表中如下所示
任务|任务|学生|任务|状态
16完成
2.6完成
3 6不完整
4 6不完整
5.6完成
因此,该学生的饼图应显示完成和未完成任务的数量或百分比(即40%未完成60%完成)
我在网上找到了一本教程。有两个php文件,第一个允许您从students表中选择用户id
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart,table package.
google.load('visualization', '1', {'packages':['corechart','table']});
function drawItems(num) {
var jsonPieChartData = $.ajax({
url: "getpiechartdata.php",
data: "q="+num,
dataType:"json",
async: false
}).responseText;
var jsonTableData = $.ajax({
url: "gettabledata.php",
data: "q="+num,
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var piechartdata = new google.visualization.DataTable(jsonPieChartData);
var tabledata = new google.visualization.DataTable(jsonTableData);
// Instantiate and draw our pie chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(piechartdata, {
width: 700,
height: 500,
chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
});
// Instantiate and draw our table, passing in some options.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(tabledata, {showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<form>
<select name="users" onchange="drawItems(this.value)">
<option value="">Select a student:</option>
<?php
$dbuser="";
$dbname="";
$dbpass="";
$dbserver="";
// Make a MySQL Connection
mysql_connect($dbserver, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
// Create a Query
$sql_query = "SELECT user_id, user_name FROM students";
// Execute query
$result = mysql_query($sql_query) or die(mysql_error());
while ($row = mysql_fetch_array($result)){
echo '<option value='. $row['user_id'] . '>'. $row['user_name'] . '</option>';
}
mysql_close($con);
?>
</select>
</form>
<div id="chart_div"></div>
<div id="table_div"></div>
</body>
</html>
//加载可视化API和piechart、table包。
load('visualization','1',{'packages':['corechart','table']});
函数drawItems(num){
var jsonPieChartData=$.ajax({
url:“getpiechartdata.php”,
数据:“q=”+num,
数据类型:“json”,
异步:false
}).responseText;
var jsonTableData=$.ajax({
url:“gettabledata.php”,
数据:“q=”+num,
数据类型:“json”,
异步:false
}).responseText;
//使用从服务器加载的JSON数据创建我们的数据表。
var piechartdata=new google.visualization.DataTable(jsonPieChartData);
var tabledata=new google.visualization.DataTable(jsonTableData);
//实例化并绘制饼图,传入一些选项。
var chart=new google.visualization.PieChart(document.getElementById('chart_div');
图表绘制(piechartdata{
宽度:700,
身高:500,
图表区:{左:“5%”,顶:“5%”,宽:“90%”,高:“90%”
});
//实例化并绘制表,传入一些选项。
var table=新的google.visualization.table(document.getElementById('table_div');
draw(tabledata,{showRowNumber:true,alternatingRowStyle:true});
}
选择一名学生:
然后,第二个php文件根据所选的用户id填充图表
<?php
$q=$_GET["q"];
$dbuser="";
$dbname="";
$dbpass="";
$dbserver="";
$sql_query = "SELECT task_status, COUNT(*) FROM tasks
WHERE task_student_id=" . $q . ""
$con = mysql_connect($dbserver,$dbuser,$dbpass);
if (!$con){ die('Could not connect: ' . mysql_error()); }
mysql_select_db($dbname, $con);
$result = mysql_query($sql_query);
$data = array('cols' => array(array('label' => 'Not completed', 'type' => 'string'),
array('label' => 'Completed', 'type' => 'string')),
'rows' => array());
while($row = mysql_fetch_row($result)) {
$data['rows'][] = array('c' => array(array('v' => $row[0]), array('v' => $row[1])));
}
echo json_encode($data);
mysql_close($con);
?>
我肯定我在数组和查询方面出了问题。我还考虑创建两个单独的sql查询,并将它们保存在两个php变量中$未完成,$completed并将其填充到图表中。不知道哪一个是我问题的最佳选择。有人能帮忙吗?看看谷歌图表的文档。如果您已经有了$complete和$not_complete两个变量,那么您可以使用这个示例,您应该通过使用mysql_结果来改进您的mysql/php代码
$tasks_completed = mysql_result(mysql_query("SELECT COUNT(*) FROM tasks..."),0);
谢谢你的回答。我将把查询放在您发送给我的代码中的什么位置?另外,我应该创建两个查询,对吗?对不起,我是一个初学者,在插入值之前,您必须建立mysql连接并获得查询结果(因为php和html输出被划分在哪里并不重要)。下面是一个如何管理它的示例