如何用mySQL数据库中的数据填充Google折线图。(单文件/内联解决方案)
我有一个带有温度和湿度传感器的MCU(ESP8266)。 MCU通过MQTT将测量数据发送到在我的Synology NAS上运行的MQTT代理。 在NAS上运行的还有一个MQTT客户机(Node.js),它将接收到的数据写入NAS上的MySQL数据库。 最后但并非最不重要的一点是,网络服务器和PHP服务器也在NAS上运行 现在我想制作一个网站,将数据库中的数据显示为折线图 问题:如何用mySQL数据库中的数据填充Google折线图。(单文件/内联解决方案),mysql,charts,google-visualization,flatpickr,Mysql,Charts,Google Visualization,Flatpickr,我有一个带有温度和湿度传感器的MCU(ESP8266)。 MCU通过MQTT将测量数据发送到在我的Synology NAS上运行的MQTT代理。 在NAS上运行的还有一个MQTT客户机(Node.js),它将接收到的数据写入NAS上的MySQL数据库。 最后但并非最不重要的一点是,网络服务器和PHP服务器也在NAS上运行 现在我想制作一个网站,将数据库中的数据显示为折线图 问题: 如何用mySQL数据库中的数据填充Google折线图 是否可以使用单个文件(.php)来执行此操作 如何管理日期范
- 如何用mySQL数据库中的数据填充Google折线图
- 是否可以使用单个文件(.php)来执行此操作
- 如何管理日期范围选择
- 如何选择/取消选择图表上的线条
这是我对我的问题的回答 由于我对所使用的编程语言没有太大的了解,我不得不在网上搜索、阅读和测试大量的源代码,以便将结果一起复制:-) 我将在将来扩展它一点,但对我来说,它工作得非常完美 我想在这里介绍这个解决方案,以帮助其他人开始。 但是,当然有很多方法可以改进代码。 如果有人愿意,我很乐意接受建议。 在Github上完成文件。
到目前为止,您尝试了什么?看起来很多问题都集中在一个问题上你们真的很快。。在复杂的答案编写过程中-1 Karma:-)您的PHP代码非常容易受到SQL注入的攻击。另外,为什么从未调用
getData
?这从第一步开始就行不通谢谢你的提示。如何防止SQL注入?我的理解是这样的:在第一次调用时,没有PHP代码被执行,直到在JS部分中到达这个位置:“code”google.charts.setOnLoadCallback(drawChart);函数drawChart(){var data=new google.visualization.DataTable();@Nico Haase。我刚刚在谷歌上搜索了SQL注入。好的,我会改进的。非常感谢
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<style>
*{font-family:Arial;}
.page-wrapper{ width:90%; margin:0 auto; }
input { border: 2px solid whitesmoke;border-radius: 12px; padding: 12px 10px; text-align: center; font-size: 16px; font-weight: bold; width: 250px;background: cornflowerblue; color: yellow;}
button { border: none; border-radius: 10px; text-align: center; padding: 12px 10px; cursor: pointer; font-weight: bold; background: cornflowerblue; color: white;}
</style>
</head>
<body>
<div class="page-wrapper"> </div>
<input type="text" style="float:left" id="rangeDate" placeholder="Select Timespan" data-input>
<br>
<p id="LineCount" > </p>
<div id="line_chart" style="width: 100%; height: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
// Setup and show Google line chart
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable(<?php echo getData()[0]?>); // Call PHP-Function an receive JSON
document.getElementById("LineCount").innerHTML= " " + <?php echo getData()[1]?> + " Records loaded"; // Get record count
var options = {
series: {
0:{color: 'red', visibleInLegend: true, targetAxisIndex: 0},
1:{color: 'blue', visibleInLegend: true, targetAxisIndex: 1}
},
vAxes: {
// Adds labels to each axis; they don't have to match the axis names.
0: {title: 'Temp (°C)' }, // , 'minValue': 0, 'maxValue': 30
1: {title: 'Feuchte(%)'}
},
title:'Chickenhouse',
legend:{position:'top'},
chartArea:{width:'75%', height:'65%'},
//curveType: 'function',
hAxis: {
title: 'Datum', titleTextStyle: {color: '#333'},
format: 'd.M HH:mm',
slantedText:true, slantedTextAngle:80
},
explorer: {
actions: ['dragToPan', 'dragToZoom', 'rightClickToReset'], // 'dragToZoom'
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 28.0,
maxZoomOut: 1.0,
zoomDelta: 1.5
},
colors: ['#D44E41'],
};
var date_formatter = new google.visualization.DateFormat({ // Tooltip format
pattern: "dd.MM.yyyy - HH:mm"
});
date_formatter.format(data, 0);
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
// Select / deselect lines by clicking on the label
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});
// Flatpickr to select date range
$("#rangeDate").flatpickr({
enableTime: false,
mode: 'range',
time_24hr: true,
dateFormat: "Y-m-d",
maxDate: "today",
defaulDate: "today",
onClose: function test(selectedDates, dateStr, instance){
arDateTime = dateStr.split(" to ");
dateTimeStart = arDateTime[0] + " 00:00" ;
dateTimeEnd = arDateTime[1] + " 23:59" ;
strNeu = "?startDate=" + dateTimeStart + "&endDate=" + dateTimeEnd;
window.location = strNeu;
},
});