【发布时间】：2020-08-16 11:35:17
【问题描述】：
这个想法是动态获取存储在 mySQL 数据库中的有关平均下载速度的当前月份、上个月和前两个月的信息。
数据库结构是：
+-----------+-----------+------+-----+---------------------+-------------------------------+
| Field | Type | Null | Key | Default | Extra |
+-----------+-----------+------+-----+---------------------+-------------------------------+
| ping | float | NO | | NULL | |
| download | float | NO | | NULL | |
| upload | float | NO | | NULL | |
| date_time | timestamp | NO | | current_timestamp() | on update current_timestamp() |
+-----------+-----------+------+-----+---------------------+-------------------------------+
按照https://maker.pro/raspberry-pi/tutorial/how-to-extract-and-chart-data-from-mysql 的说明，我能够绘制一条线。然后通过反复试验，我也能够包含另外两行，但它们不被视为单独的信息，而只是对绘制到同一图像的第一行的补充。
我完全不知道如何循环当前月份的数据，然后是前一个月的数据，然后是 2 个月前的数据，这样线条就会有不同的颜色，并且很容易看出是否有任何显着性下载速度的变化。
将所有内容输出到一张图表的代码如下：
<?php
# Prepare a connection to the mySQL database
$connection = new mysqli("192.168.x.x", "username", "password", "dnbname");
# If there are any errors or the connection is not OK
if ($connection->connect_error) {
die ('Connection error: '.$connection->connect_error);
}
# Prepare a query to the mySQL database and get average hourly based download speed this month
$sql = "select hour(date_time), round(avg(download),0) from results where MONTH(date_time) = MONTH(CURDATE()) group by hour(date_time);";
$result = $connection->query($sql);
# This while - loop formats and put all the retrieved data into ['timestamp', 'download'] way.
$data1 = array();
while ($row = $result->fetch_assoc()) {
$data1[] = [$row['hour(date_time)'], $row['round(avg(download),0)']];
}
# Prepare a query to the mySQL database and get average hourly based download speed last month
$sql2 = "select hour(date_time), round(avg(download),0) from results where DATE(date_time) BETWEEN DATE_ADD(LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 2 MONTH)), INTERVAL 1 DAY) AND LAST_DAY(DATE_SUB(CURDATE
(), INTERVAL 1 MONTH)) group by hour(date_time);";
$result2 = $connection->query($sql2);
# This while - loop formats and put all the retrieved data into ['timestamp', 'download'] way.
$data2 = array();
while ($row = $result2->fetch_assoc()) {
$data2[] = [$row['hour(date_time)'], $row['round(avg(download),0)']];
}
# Prepare a query to the mySQL database and get average hourly based download speed 2 months ago
$sql3 = "select hour(date_time), round(avg(download),0) from results where DATE(date_time) BETWEEN DATE_ADD(LAST_DAY(DATE_SUB(CURDATE(), INTERVAL 3 MONTH)), INTERVAL 1 DAY) AND LAST_DAY(DATE_SUB(CURDATE
(), INTERVAL 2 MONTH)) group by hour(date_time);";
$result3 = $connection->query($sql3);
# This while - loop formats and put all the retrieved data into ['timestamp', 'download'] way.
$data3 = array();
while ($row = $result3->fetch_assoc()) {
$data3[] = [$row['hour(date_time)'], $row['round(avg(download),0)']];
}
?>
var data_currentmonth = <?php echo json_encode($data1); ?>;
var data_lastmonth = <?php echo json_encode($data2); ?>;
var data_monthb4lastmonth = <?php echo json_encode($data3); ?>;
<html>
<head>
<!-- start of the HTML part that Google Chart needs -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- This loads the 'corechart' package. -->
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']}).then(function drawChart() {
// Current month
var data1 = new google.visualization.DataTable();
data1.addColumn({label: 'Hour', type: 'number'});
data1.addColumn({label: 'Current months Avg.', type: 'number'});
data1.addRows(data_currentmonth);
// Last Month
var data2 = new google.visualization.DataTable();
data2.addColumn({label: 'Hour', type: 'number'});
data2.addColumn({label: 'Last Months Avg.', type: 'number'});
data2.addRows(data_lastmonth);
// Month Before Last Month
var data3 = new google.visualization.DataTable();
data3.addColumn({label: 'Hour', type: 'number'});
data3.addColumn({label: 'Month Before Last Avg.', type: 'number'});
data3.addRows(data_monthb4lastmonth);
// Join data tables
var join1 = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1], [1]);
var join2 = google.visualization.data.join(join1, data3, 'full', [[0,0]], [1,2], [1]);
//sort data
join2.sort([
{column: 0}
]);
// Curved line
var options = {
title: '',
curveType: 'function',
legend: { position: 'bottom' }
};
// Curved chart
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(join2, options);
}); // End bracket from drawChart
</script>
<div id="curve_chart" style="width: 1800px; height: 960px;"></div>
目前它输出的图像如下所示：
这里有一些示例数据：
var data_currentmonth = [["0","105"],["1","110"],["2","111"],["3","113"],["4 ","119"],["5","121"],["6","119"],["7","61"],["8","45"],["9 ","41"],["10","41"],["11","36"],["12","111"],["13","110"],["14 ","110"],["15","105"],["16","96"],["17","97"],["18","93"],["19 ","95"],["20","86"],["21","73"],["22","73"],["23","90"]];
var data_lastmonth = [["0","104"],["1","112"],["2","119"],["3","120"],["4 ","122"],["5","128"],["6","120"],["7","65"],["8","48"],["9 ","47"],["10","49"],["11","47"],["12","119"],["13","122"],["14 ","118"],["15","119"],["16","113"],["17","116"],["18","111"],["19 ","105"],["20","101"],["21","89"],["22","81"],["23","92"]];
var data_monthb4lastmonth = [["0","106"],["1","109"],["2","112"],["3","114"],["4 ","117"],["5","117"],["6","113"],["7","65"],["8","52"],["9 ","49"],["10","48"],["11","47"],["12","115"],["13","109"],["14 ","109"],["15","111"],["16","113"],["17","106"],["18","104"],["19 ","102"],["20","97"],["21","87"],["22","78"],["23","90"]];
【问题讨论】：
标签： php mysql charts google-visualization