'使用canvas.js的'实时图'>> [

问题描述 投票:1回答:1
我正在尝试使用canvas.js制作接近“实时”的图表。我正在使用Raspberry Pi来测量数据并将其发送到外部虚拟服务器的数据库MariaDB。

[使用RPI,我正在发送n(从1到无穷大的计数),napatie(电压,来自SPI的值),cas(时间)。这非常慢,因为我每秒仅发送1000个样本。仅仅写入.txt文件而不发送到数据库,我每秒获得大约30k样本。来自RPI的代码:

#include <wiringPi.h> #include <stdio.h> #include <string.h> #include <wiringPiSPI.h> #include <iostream> #include <stdint.h> #include <stdlib.h> #include <mariadb/mysql.h> #include <string> #include <ctime> #include <date.h> using namespace std; int main(){ using namespace date; using namespace std::Chrono; time_t raw time; struct tm * timeinfo; char buffer [80]; //CONNECT TO DB MYSQL *conn; if ((conn = mysql_init(NULL)) == NULL) { fprintf(stderr, "Could not init DB\n"); return EXIT_FAILURE; } if (mysql_real_connect(conn, "IP", "name", "pass", "dbname", 0, NULL, 0) == NULL) { fprintf(stderr, "DB Connection Error\n"); return EXIT_FAILURE; } //READ FROM SPI wiringPiSPISetup(0,2000000); int i=1; wiringPiSetup(); std::time_t now = std::time(0); while (1){ uint8_t spiData [2] ; wiringPiSPIDataRW (0, spiData, 2) ; int MSB_1 = spiData[1]; MSB_1 = MSB_1 >> 1; int MSB_0 = spiData[0] & 0b00011111; MSB_0 = MSB_0 << 7; int a = MSB_1 + MSB_0; float b = ((5.0 *(float)a)/ 4096.0); time (&rawtime); timeinfo = localtime (&rawtime); strftime (buffer, 80,"%Y-%m-%d %H:%M:%S",timeinfo); //INSERT TO DB string query = "INSERT INTO tabulka (n, napatie,cas) VALUES ("+to_string(i)+","+to_string(b)+",'"+buffer+"')"; i++; if ( mysql_query(conn, query.c_str()) !=0) { fprintf(stderr, "Query Failure\n"); return EXIT_FAILURE; } delayMicroseconds(10); } mysql_close(conn); return 0; }


虚拟服务器端:

要刷新页面,我正在使用简单的<meta http-equiv="refresh" content="1" >

在虚拟服务器上制作图形的代码:

<?php //CONNECT TO DB AND READ $dataPoints = array(); $conn = mysqli_connect('127.0.0.1', 'name', 'pass', 'dbname'); if ($conn->connect_error) { die("Connection error: " . $conn->connect_error); } $result = $conn->query("select n, napatie from hodnoty.tabulka"); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { //$dataPoints[] = $row; array_push($dataPoints, array("x"=> $row['n'], "y"=> $row['napatie'])); } } //MAKE GRAPH ?> <!DOCTYPE HTML> <html> <head> <meta http-equiv="refresh" content="1" > <script> window.onload = function() { var dataPoints = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>; var dataLength = 1000; var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title: { text: "NAPATIE NA VSTUPE DO RPI" }, axisX:{ title: "n [/-]" }, axisY:{ includeZero: false, suffix: "U [V]" }, data: [{ type: "line", yValueFormatString: "#,##0.0#", toolTipContent: "{y} Mbps", dataPoints: dataPoints }] }); if (dataPoints.length > dataLength) { // i think this dont work dataPoints.shift(); } chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>

要删除旧数据,我正在使用MariaDB EVENT,如下所示:

CREATE EVENT mazanie ON SCHEDULE EVERY 1 SECOND ENABLE DO DELETE FROM tabulka WHERE 'cas' < CURRENT_TIMESTAMP - INTERVAL 5 SECOND;cas列的数据类型为timestamp。

[最后,问题是,我想总是在图中看到至少相同数量的值,一旦我拥有大约150个值,有时是大约1500个,创建的事件就以一种奇怪的方式删除行。希望始终看到1000个样本。

您可以在这里看到:http://147.232.175.92/info_1.php

我正在尝试使用canvas.js制作接近“实时”的图表。我正在使用Raspberry Pi来测量数据并将其发送到外部虚拟服务器的数据库MariaDB。使用RPI,我正在发送n(从1到...的计数)...] >>

更改代码以收集10个值,构建批处理插入(INSERT ... VALUES (...), (...), ... (...);),然后发出该查询。这可能会将您的容量从每秒1K行增加到每秒5K行。

EVENT是否与插入脚本竞争?也就是说,他们是否碰触同一张桌子?而是让脚本执行DELETE,然后按LIMIT 1000

如果您可以容忍批处理10个值的延迟,请尝试100;这将运行得更快。同时调整LIMIT

DELETE可以每10个delayMicroseconds(10);替换一次。这增加了另一件事。

更多原理:

    由于开销和事务性原子性,一次插入100行大约是一次1行的速度的10倍。 (超过100表示​​“收益递减”。)
  • DELETE正在删除不同数量的行。当它删除许多行时,它对INSERTsSELECTs的影响更大,
  • 可能导致数据中的明显差距。10us延迟比人类的感知要快得多,以至于降低到如此低的水平似乎是不合理的。
php c++ mariadb canvasjs
1个回答
0
投票
更改代码以收集10个值,构建批处理插入(INSERT ... VALUES (...), (...), ... (...);),然后发出该查询。这可能会将您的容量从每秒1K行增加到每秒5K行。
© www.soinside.com 2019 - 2024. All rights reserved.