我有一个带温度和湿度传感器的mcu(esp8266)。mcu通过mqtt将测量数据发送到在我的synology nas上运行的mqtt代理。在nas上运行的还有一个mqtt客户机(node.js),它将接收到的数据写入nas上的mysql数据库。最后,web服务器和php服务器也在nas上运行。
现在我想做一个网站来显示数据库的数据作为一个折线图。
问题:
如何用mysql数据库中的数据填充google折线图?
是否可以使用一个文件(.php)来执行此操作?
如何管理日期范围选择?
如何选择/取消选择图表上的行?
1条答案
按热度按时间ca1c2owp1#
这是我对我问题的回答。
由于我对所使用的编程语言没有太大的概念,我不得不在网上搜索、阅读和测试大量的源代码,以便将结果复制到一起:-)我将在将来对其进行一些扩展,但对我来说,它工作得非常完美。
我想在这里介绍这个解决方案,以帮助其他人开始。但是,当然有很多方法可以改进代码。如果有人愿意,我很乐意接受建议。在github上完成文件。https://github.com/diydave/mysql-and-google-line-chart
PHP。从数据库读取数据并将json字符串返回到javascript
css和html。或多或少只是为了格式化和设置占位符。
javascript。谷歌图表。接受json数据并将其显示为折线图。这里有许多可能的选择。详情如下:https://developers.google.com/chart/interactive/docs/gallery/linechart
javascript。通过单击图例选择显示的行。
};
javascript。弗拉特皮克。酷javascript应用程序选择日期和时间。也可以选择我在这里使用的日期范围。https://flatpickr.js.org/
在github上完成文件。https://github.com/diydave/mysql-and-google-line-chart
结果:截图