问题描述
该想法是动态获取有关存储在MysqL数据库中的平均下载速度的当月，上个月和2个月的回溯信息。
数据库结构为：
+-----------+-----------+------+-----+---------------------+-------------------------------+
| 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),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)'],0)']];
}
# Prepare a query to the MysqL database and get average hourly based download speed 2 months ago
$sql3 = "select hour(date_time),INTERVAL 3 MONTH)),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)'],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,[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“]]; >
解决方法
为了画多条线，
您将在google数据表中显示多列。
而且由于您想比较多个月，
我们可以加载多个数据表，然后将它们连接在一起。
在php中，建议在php中构建完整数组，
然后在添加到脚本时将它们编码为json。
而不是使用echo作为字符串。
请参阅以下php代码段...
<?php
# 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),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)'],0)']];
}
# Prepare a query to the mySQL database and get average hourly based download speed 2 months ago
$sql3 = "select hour(date_time),INTERVAL 3 MONTH)),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)'],0)']];
}
?>
var data_month1 = <?php echo json_encode($data1); ?>;
var data_month2 = <?php echo json_encode($data2); ?>;
var data_month3 = <?php echo json_encode($data3); ?>;
然后我们可以使用上述月份数组填充google数据表，
并绘制图表。
看到以下片段...
google.charts.load('current',{
packages: ['corechart']
}).then(function drawChart() {
// month 1
var data1 = new google.visualization.DataTable();
data1.addColumn({label: 'Hour',type: 'number'});
data1.addColumn({label: 'Month 1 Avg',type: 'number'});
data1.addRows(data_month1);
// month 2
var data2 = new google.visualization.DataTable();
data2.addColumn({label: 'Hour',type: 'number'});
data2.addColumn({label: 'Month 2 Avg',type: 'number'});
data2.addRows(data_month2);
// month 3
var data3 = new google.visualization.DataTable();
data3.addColumn({label: 'Hour',type: 'number'});
data3.addColumn({label: 'Month 3 Avg',type: 'number'});
data3.addRows(data_month3);
// join data tables
var join1 = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);
var join2 = google.visualization.data.join(join1,data3,[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
请参见以下工作片段，以获取结果外观的示例...
var data_month1 = [[1,10],[2,12],[3,15],[4,9],[5,6]];
var data_month2 = [[1,5],8],11],14],16]];
var data_month3 = [[1,7],3]];
google.charts.load('current',options);
}); // End bracket from drawChart<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>,
这是完整的工作代码：
<?php
# Prepare a connection to the mySQL database
$connection = new mysqli("192.168.x.x","username","password","dbname");
# 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),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)'],0)']];
}
# Prepare a query to the mySQL database and get average hourly based download speed last month
$sql2 = "select hour(date_time),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)'],0)']];
}
# Prepare a query to the mySQL database and get average hourly based download speed 2 months ago
$sql3 = "select hour(date_time),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)'],0)']];
}
?>
<html>
<head>
<!-- start of the HTML part that Google Chart needs -->
<script type="text/javascript" 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() {
var data_currentmonth = <?php echo json_encode($data1,JSON_NUMERIC_CHECK); ?>;
var data_lastmonth = <?php echo json_encode($data2,JSON_NUMERIC_CHECK); ?>;
var data_monthb4lastmonth = <?php echo json_encode($data3,JSON_NUMERIC_CHECK); ?>;
// Current month
var data1 = new google.visualization.DataTable();
data1.addColumn({label: 'Hour',type: 'number'});
data1.addColumn({label: 'Current Month 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 Month 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,[1]);
var join2 = google.visualization.data.join(join1,[1]);
//sort data
join2.sort([
{column: 0}
]);
// Curved line
var options = {
title: '',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>
这将创建具有3行不同颜色的图像。 现在，我很容易了解随着时间的推移我的4G连接下载速度是如何发展的。 07：00-12：00之间的“滑稽”下降是因为操作者由于基站附近的逃生者而降低了发射功率。