php - 使用 mysql 数据创建谷歌图表
问题描述
我必须用 MySQL 数据填充谷歌图表。
数据看起来像。
+----+-------+---------+-------+-----------+---------+------+
| id | name | physics | maths | chemistry | biology | sst |
+----+-------+---------+-------+-----------+---------+------+
| 1 | Name1 | 10 | 25 | 35 | 42 | 62 |
| 2 | Name2 | 80 | 45 | 45 | 45 | 25 |
| 3 | Name3 | 63 | 25 | 63 | 36 | 36 |
| 4 | Name4 | 82 | 36 | 75 | 48 | 42 |
| 5 | Name5 | 45 | 45 | 78 | 25 | 24 |
| 6 | Name6 | 36 | 36 | 15 | 75 | 36 |
| 7 | Name7 | 99 | 45 | 24 | 24 | 45 |
| 8 | Name8 | 45 | 85 | 85 | 85 | 96 |
+----+-------+---------+-------+-----------+---------+------+
我必须基于此创建谷歌图表
-namewise - 当我选择一个名称时,它会在柱形图中显示该特定名称的所有主题标记
-markswise - 当我选择一个主题时,它会显示该特定主题中带有标记的所有名称。
考虑到可能会添加数据,我也必须积累这些数据,因为我确实做到了
<?php
include("connection.php");
$query = "SELECT name FROM csv GROUP BY name DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<title>Google charts</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-9">
<h3 class="panel-title">Student Wise Marks Data</h3>
</div>
<div class="col-md-3">
<select name="name" class="form-control" id="name">
<option value="">Select Student</option>
<?php
foreach($result as $row)
{
echo '<option value="'.$row["name"].'">'.$row["name"].'</option>';
}
?>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div id="chart_area" style="width: 1000px; height: 620px;"></div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback();
function load_student_data(name, title)
{
var temp_title = title + ' '+name+'';
$.ajax({
url:"fetch.php",
method:"POST",
data:{name:name},
dataType:"JSON",
success:function(data)
{
drawStudentwiseChart(data, temp_title);
}
});
}
function drawStudentwiseChart(chart_data, chart_main_title)
{
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Physics');
data.addColumn('number', 'Maths');
data.addColumn('number', 'Chemistry');
data.addColumn('number', 'Biology');
data.addColumn('number', 'SST');
$.each(jsonData, function(i, jsonData){
var Physics = jsonData.Physics;
var Maths = jsonData.Maths;
var Chemistry = jsonData.Chemistry;
var Biology = jsonData.Biology;
var SST = jsonData.SST;
data.addRows([[Physics,Maths,Chemistry,Biology,SST]]);
});
var options = {
title:chart_main_title,
hAxis: {
title: "Subjects"
},
vAxis: {
title: 'Percentage'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
chart.draw(data, options);
}
</script>
<script>
$(document).ready(function(){
$('#name').change(function(){
var name = $(this).val();
if(name != '')
{
load_student_data(name, 'Student wise marks data');
}
});
});
</script>
为了获取数据
// fetch.php
<?php
include('connection.php');
if(isset($_POST["name"]))
{
$query = "
SELECT * FROM csv
WHERE name = '".$_POST["name"]."'
ORDER BY id ASC
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output[] = array(
'Physics' => $row["Physics"],
'Maths' => $row["Maths"],
'Chemistry' => $row["Chemistry"],
'Biology' => $row["Biology"],
'SST' => $row["SST"],
);
}
echo json_encode($output);
}
?>
它显示一个空白页。
但是,当我玩奇异值时,即一次一个主题时,它显示得很好
解决方案
推荐阅读
- symfony - 5 如何通过给定的 id 在 EntityType 选项列表中设置选定的选项
- css - 在使用 scss 的 Vuejs 应用程序中包含 node_modules css
- javascript - 如何获取网站的完整代码以抓取所有图像(python)
- java - 使用 POI 从电子表格中提取工作表
- configuration - BIOS 存储 com 端口在哪里启用?
- javascript - 在渲染次数相同的情况下对 PureComponent 与 Component 做出反应
- windbg - ClrMd Execute "~*k" 返回带有 clr!DllUnregisterServerInternal 而不是正确值的堆栈跟踪
- python - 尝试使用 ExponentialSmoothing 进行预测时出现 ConvergenceWarning
- javascript - 在 app.js 中出现此错误,尝试再次运行此代码,但得到相同的错误帮助我
- ruby-on-rails - 以视图形式访问嵌套参数