【问题标题】:'real time ' graph using canvasjs使用 canvasjs 的“实时”图表
【发布时间】:2020-02-25 08:48:35
【问题描述】:

我正在尝试使用 canvasjs 制作近乎“实时”的图表。 我正在使用 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;
}

虚拟服务器端:

刷新页面我使用简单的&lt;meta http-equiv="refresh" content="1" &gt;

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

<?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' &lt; CURRENT_TIMESTAMP - INTERVAL 5 SECOND; 列 cas 具有数据类型时间戳。

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

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

【问题讨论】:

  • 感谢您告诉我。我检查了我的配置文件并将 display_errors 设置为 OFF。我还注释掉了我尝试手动显示连接错误的部分。

标签: php c++ mariadb canvasjs


【解决方案1】:

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

EVENT 是否与插入脚本竞争?也就是说,他们是否在触摸同一张桌子?相反,让脚本执行DELETE 并添加LIMIT 1000

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

DELETE 可以替换每 10 个delayMicroseconds(10);。这又增加了一个需要调整的地方。

更多理由:

  • 由于开销和事务性原子性,一次插入 100 行的速度大约是一次插入 1 行的 10 倍。 (超过 100 就是“收益递减”。)
  • DELETE 正在删除不同数量的行。当它删除大量行时,它对INSERTsSELECTs 的影响更大,可能导致数据出现明显的差距。
  • 10us 延迟比人类感知的要快得多,设置这么低似乎不合理。
  • 同样,对于人类,请考虑将图表冻结在 +/-10 个单位,从而使用户更容易将一页与下一页进行比较。
  • 并发送实际时间,以便 X 轴正确展开,而不是均匀展开。这样您就可以看到差距,或许还能发现它们遵循的模式。

完成大部分工作,然后回来进行更多批评和调整。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多