使用 Google Charts 填充 MySQL 数据
Posted
技术标签:
【中文标题】使用 Google Charts 填充 MySQL 数据【英文标题】：Populating MySQL data with Google Charts 【发布时间】：2013-03-23 21:36:33 【问题描述】：我想创建一个饼图，它基本上应该显示学生在分配给他的所有任务中完成了多少任务。所以我的任务表是这样的
任务 任务ID | task_student_id |任务状态
*task_student_id* 引用学生表中的*user_id*
假设我的 user_id 学生的示例数据在任务表中看起来像这样
task_id | task_student_id |task_status 1 6 完成 2 6 完成 3 6 未完成 4 6 未完成 5 6 完成
因此，该学生的饼图应显示已完成和未完成任务的数量或百分比（即 40% 未完成 60% 完成）
我在网上找到了一个教程。有两个 php 文件，第一个让您从学生表中选择 user_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>
然后第二个 php 文件根据所选的 user_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 变量中； $not_completed, $completed 并将其填充到图表中。不知道哪一个是我的问题的最佳选择。有人可以帮忙吗？
【问题讨论】：
【参考方案1】：查看https://developers.google.com/chart/ 以查找谷歌图表的文档。如果你已经有了 $complete 和 $not_complete 这两个变量，你可以使用这个例子http://pastebin.com/qsB0hqmJ，你应该使用 mysql_result 来改进你的 mysql/php 代码。
$tasks_completed = mysql_result(mysql_query("SELECT COUNT(*) FROM tasks..."),0);
【讨论】：
感谢您的回答。我会将查询放在您发送给我的代码中的什么位置？另外，我应该创建两个查询对吗？对不起，我是初学者 你必须在插入值之前建立mysql连接并获取查询结果（因为php和html输出在哪里分开并不重要）。这是一个如何管理它的示例pastebin.com/tkTJQdFA以上是关于使用 Google Charts 填充 MySQL 数据的主要内容，如果未能解决你的问题，请参考以下文章
Google Charts interpolateNulls无效
Google Charts：在相同的“X”值上绘制多个“Y”值