如何使用 Google API、PHP 和 MySQL 在饼图中过滤日期
How to filter between dates from Pie Chart using Google API, PHP and MySQL
我已经创建了脚本来根据我的数据库中的数据生成饼图。它显示基于部门的工作时间就好了。 但是,我无法通过日期之间的过滤来显示。 请问我需要修复什么代码或如何修复代码才能进行过滤。在数据库中,我已经创建了名为 "CreatedOn" 的时间戳。
<?php
try {
$query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication GROUP BY Department");
$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
// var_dump($data);
} catch (PDOException $e) {
echo $e->getMessage();
}
?>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Department', 'Work Hours'],
<?php
foreach($data as $data) :
echo "['".$data["Department"]."', ".$data["number"]."],";
endforeach;
?>
]);
var options = {
backgroundColor: "none",
title: '',
width: 900,
height: 500,
pieHole: 0.5,
colors: ['#4c325c', '#8ea5cc', '#aa579f', '#391d9d', '#fcbd9c', '#dc346c'],
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<form action="" method="GET">
<label class="text-secondary">From Date</label>
<input type="date" name="from_date2" value="<?php if(isset($_GET['from_date2'])){ echo $_GET['from_date2']; } ?>" class="form-control">
<label class="text-secondary">To Date</label>
<input type="date" name="to_date2" value="<?php if(isset($_GET['to_date2'])){ echo $_GET['to_date2']; } ?>" class="form-control">
<label class="text-secondary">Filter</label> <br>
<button type="submit" class="btn btn-primary">Filter</button>
</form>
<br>
<?php
if(isset($_GET['from_date2']) && isset($_GET['to_date2']))
{
$from_date2 = $_GET['from_date2'];
$to_date2 = $_GET['to_date2'];
try {
$query = $connection->prepare("SELECT * FROM serviceapplication WHERE CreatedOn BETWEEN '$from_date2' AND '$to_date2' ");
$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
$count = 0;
// var_dump($data);
} catch (PDOException $e) {
echo $e->getMessage();
}
foreach($data as $data) :
?>
<div id="piechart"></div>
<?php
endforeach;
}
?>
修改代码,需要相应地设置$data数组。
过滤器 - 按列和必填字段分组(目前我按部门分组)
try {
if (isset($_GET['from_date2']) && isset($_GET['to_date2'])) {
$from_date2 = $_GET['from_date2'];
$to_date2 = $_GET['to_date2'];
//SQL injection you can handle
$query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication WHERE CreatedOn BETWEEN ? AND ? GROUP BY Department");
//$query->bind_param("ss", $from_date2, $to_date2);
$query->execute(array($from_date2, $to_date2));
//$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
$count = 0;
echo "data goes here = date filter ";print_r($data);
} else {
$query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication GROUP BY Department");
$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
echo "data goes here";print_r($data);
}
} catch (PDOException $e) {
echo $e->getMessage();
}
?>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Department', 'Work Hours'],
<?php
foreach($data as $data) :
echo "['".$data["Department"]."', ".$data["number"]."],";
endforeach;
?>
]);
var options = {
backgroundColor: "none",
title: '',
width: 900,
height: 500,
pieHole: 0.5,
colors: ['#4c325c', '#8ea5cc', '#aa579f', '#391d9d', '#fcbd9c', '#dc346c'],
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<form action="" method="GET">
<label class="text-secondary">From Date</label>
<input type="date" name="from_date2" value="<?php if(isset($_GET['from_date2'])){ echo $_GET['from_date2']; } ?>" class="form-control">
<label class="text-secondary">To Date</label>
<input type="date" name="to_date2" value="<?php if(isset($_GET['to_date2'])){ echo $_GET['to_date2']; } ?>" class="form-control">
<label class="text-secondary">Filter</label> <br>
<button type="submit" class="btn btn-primary">Filter</button>
</form>
<br>
<?php
print_r($data);
foreach($data as $dat) :
?>
<div id="piechart"></div>
<?php
endforeach;
?>
我已经创建了脚本来根据我的数据库中的数据生成饼图。它显示基于部门的工作时间就好了。 但是,我无法通过日期之间的过滤来显示。 请问我需要修复什么代码或如何修复代码才能进行过滤。在数据库中,我已经创建了名为 "CreatedOn" 的时间戳。
<?php
try {
$query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication GROUP BY Department");
$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
// var_dump($data);
} catch (PDOException $e) {
echo $e->getMessage();
}
?>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Department', 'Work Hours'],
<?php
foreach($data as $data) :
echo "['".$data["Department"]."', ".$data["number"]."],";
endforeach;
?>
]);
var options = {
backgroundColor: "none",
title: '',
width: 900,
height: 500,
pieHole: 0.5,
colors: ['#4c325c', '#8ea5cc', '#aa579f', '#391d9d', '#fcbd9c', '#dc346c'],
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<form action="" method="GET">
<label class="text-secondary">From Date</label>
<input type="date" name="from_date2" value="<?php if(isset($_GET['from_date2'])){ echo $_GET['from_date2']; } ?>" class="form-control">
<label class="text-secondary">To Date</label>
<input type="date" name="to_date2" value="<?php if(isset($_GET['to_date2'])){ echo $_GET['to_date2']; } ?>" class="form-control">
<label class="text-secondary">Filter</label> <br>
<button type="submit" class="btn btn-primary">Filter</button>
</form>
<br>
<?php
if(isset($_GET['from_date2']) && isset($_GET['to_date2']))
{
$from_date2 = $_GET['from_date2'];
$to_date2 = $_GET['to_date2'];
try {
$query = $connection->prepare("SELECT * FROM serviceapplication WHERE CreatedOn BETWEEN '$from_date2' AND '$to_date2' ");
$query->execute();
$query->setFetchMode(PDO::FETCH_ASSOC);
$data = $query->fetchAll();
$count = 0;
// var_dump($data);
} catch (PDOException $e) {
echo $e->getMessage();
}
foreach($data as $data) :
?>
<div id="piechart"></div>
<?php
endforeach;
}
?>
修改代码,需要相应地设置$data数组。
过滤器 - 按列和必填字段分组(目前我按部门分组)
try { if (isset($_GET['from_date2']) && isset($_GET['to_date2'])) { $from_date2 = $_GET['from_date2']; $to_date2 = $_GET['to_date2']; //SQL injection you can handle $query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication WHERE CreatedOn BETWEEN ? AND ? GROUP BY Department"); //$query->bind_param("ss", $from_date2, $to_date2); $query->execute(array($from_date2, $to_date2)); //$query->execute(); $query->setFetchMode(PDO::FETCH_ASSOC); $data = $query->fetchAll(); $count = 0; echo "data goes here = date filter ";print_r($data); } else { $query = $connection->prepare("SELECT Department, SUM(workHrs) as number FROM serviceapplication GROUP BY Department"); $query->execute(); $query->setFetchMode(PDO::FETCH_ASSOC); $data = $query->fetchAll(); echo "data goes here";print_r($data); } } catch (PDOException $e) { echo $e->getMessage(); } ?> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Department', 'Work Hours'], <?php foreach($data as $data) : echo "['".$data["Department"]."', ".$data["number"]."],"; endforeach; ?> ]); var options = { backgroundColor: "none", title: '', width: 900, height: 500, pieHole: 0.5, colors: ['#4c325c', '#8ea5cc', '#aa579f', '#391d9d', '#fcbd9c', '#dc346c'], }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> <form action="" method="GET"> <label class="text-secondary">From Date</label> <input type="date" name="from_date2" value="<?php if(isset($_GET['from_date2'])){ echo $_GET['from_date2']; } ?>" class="form-control"> <label class="text-secondary">To Date</label> <input type="date" name="to_date2" value="<?php if(isset($_GET['to_date2'])){ echo $_GET['to_date2']; } ?>" class="form-control"> <label class="text-secondary">Filter</label> <br> <button type="submit" class="btn btn-primary">Filter</button> </form> <br> <?php print_r($data); foreach($data as $dat) : ?> <div id="piechart"></div> <?php endforeach; ?>