如何使用 Google 图表绘制多条线
How to draw multiple lines with Google Charts
我们的想法是动态获取当前月份、上个月和前 2 个月的有关平均下载速度的信息，这些信息存储在 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 处的说明，我绘制了一条线。然后通过 trial/error 我也能够包括另外两条线，但它们不被视为单独的信息，而只是对绘制到同一图像的第一条线的补充。
我完全不知道如何循环当前月份的数据，然后是前一个月的数据，然后是 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 "]];
为了绘制多条线，
google 数据 table.
中有多个列
并且由于您想比较多个月份，
我们可以加载多个数据 tables，然后将它们连接在一起。
在 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), 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_month1 = <?php echo json_encode($data1); ?>;
var data_month2 = <?php echo json_encode($data2); ?>;
var data_month3 = <?php echo json_encode($data3); ?>;
然后我们可以使用上面的月份数组来填充google数据table,
并绘制图表。
请参阅以下片段...
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, '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
请参阅以下工作代码段以了解结果的外观示例...
var data_month1 = [[1, 10],[2, 12],[3, 15],[4, 9],[5, 6]];
var data_month2 = [[1, 5],[2, 8],[3, 11],[4, 14],[5, 16]];
var data_month3 = [[1, 2],[2, 5],[3, 7],[4, 10],[5, 3]];
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, '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 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), 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)']];
}
?>
<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, 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>
这将创建具有 3 条不同颜色线条的图像。
现在，我可以很容易地了解我的 4G 连接下载速度随时间的变化情况。
07:00-12:00之间的“有趣”下降是因为运营商由于电梯在基站附近工作而降低了发射功率。
我们的想法是动态获取当前月份、上个月和前 2 个月的有关平均下载速度的信息，这些信息存储在 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 处的说明，我绘制了一条线。然后通过 trial/error 我也能够包括另外两条线，但它们不被视为单独的信息，而只是对绘制到同一图像的第一条线的补充。
我完全不知道如何循环当前月份的数据，然后是前一个月的数据，然后是 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 "]];
为了绘制多条线，
google 数据 table.
中有多个列
并且由于您想比较多个月份，
我们可以加载多个数据 tables，然后将它们连接在一起。
在 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), 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_month1 = <?php echo json_encode($data1); ?>;
var data_month2 = <?php echo json_encode($data2); ?>;
var data_month3 = <?php echo json_encode($data3); ?>;
然后我们可以使用上面的月份数组来填充google数据table,
并绘制图表。
请参阅以下片段...
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, '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
请参阅以下工作代码段以了解结果的外观示例...
var data_month1 = [[1, 10],[2, 12],[3, 15],[4, 9],[5, 6]];
var data_month2 = [[1, 5],[2, 8],[3, 11],[4, 14],[5, 16]];
var data_month3 = [[1, 2],[2, 5],[3, 7],[4, 10],[5, 3]];
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, '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 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), 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)']];
}
?>
<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, 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>
这将创建具有 3 条不同颜色线条的图像。 现在，我可以很容易地了解我的 4G 连接下载速度随时间的变化情况。 07:00-12:00之间的“有趣”下降是因为运营商由于电梯在基站附近工作而降低了发射功率。