canvasjs를 사용한 '실시간' 그래프
저는 캔버스js를 사용하여 거의 "실시간" 그래프를 만들려고 합니다.저는 라즈베리파이를 이용하여 데이터를 측정하여 외부 가상 서버의 데이터베이스 MariaDB로 전송하고 있습니다.
RPI를 사용하여 n(1부터 무한까지 카운트), napatie(전압, SPI의 값), cas(시간)를 보냅니다.초당 1000개의 샘플만 보내고 있기 때문에 꽤 느립니다..txt 파일에 쓰기만 해도 데이터베이스로 전송되지 않아 초당 약 30,000개의 샘플을 받고 있습니다.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;열 캐스에 데이터 유형 타임스탬프가 있습니다.
마지막으로 문제는 그래프에서 최소한 같은 수의 값을 항상 확인하고 싶다는 것입니다. 생성된 이벤트는 이상한 방식으로 행을 삭제하는 것입니다. 값이 150개 정도이고 때로는 1500개 정도입니다.예를 들어 항상 1000개 정도의 샘플을 보고 싶습니다.
여기에서 볼 수 있습니다: http://147.232.175.92/info_1.php
코드를 변경하여 10개의 값을 수집하고 배치 삽입(INSERT ... VALUES (...), (...), ... (...);)을 클릭한 다음 해당 쿼리를 실행합니다.이로 인해 용량이 초당 1K에서 5K 행으로 증가할 수 있습니다.
하십니까?EVENT삽입 스크립트로 경쟁하시겠습니까?즉, 그들은 같은 테이블을 만지고 있습니까?대신, 스크립트가 다음을 수행하도록 합니다.DELETE그리고 타크LIMIT 1000.
10개의 값을 배치하는 지연을 허용할 수 있다면 대신 100개를 시도하십시오. 그러면 훨씬 더 빨리 실행됩니다.또한 조정합니다.LIMIT.
그DELETE10일마다 교체할 수 있습니다.delayMicroseconds(10);이것은 수정할 다른 것을 추가합니다.
추가 근거:
- 오버헤드와 트랜잭션 ATOMicity 때문에 한 번에 100개의 행을 삽입하는 것이 한 번에 1개의 행보다 약 10배 빠릅니다.(100을 초과하는 것은 '수익률 감소'를 의미합니다.)
- 그
DELETE여러 행을 삭제하는 중입니다.많은 행을 삭제하면 더 많은 영향을 미칩니다.INSERTs그리고.SELECTs데이터에 명백한 차이가 있을 수 있습니다. - 10us 지연은 인간의 인식보다 훨씬 빨라서 그렇게 낮게 가는 것은 불합리해 보입니다.
- 다시 한 번 인간의 경우 +/-10 단위로 그래프를 고정하여 사용자가 한 페이지를 다음 페이지와 더 쉽게 비교할 수 있도록 합니다.
- 그리고 X축이 고르게 펴지지 않고 정확하게 펴지도록 실제 시간을 보내주세요.그런 식으로 여러분은 격차를 볼 수 있고 아마도 그것들이 어떤 패턴을 따르는지 발견할 수 있을 것입니다.
대부분의 작업을 완료한 다음, 더 많은 비판과 조정을 위해 돌아오십시오.
언급URL : https://stackoverflow.com/questions/60390638/real-time-graph-using-canvasjs
'itsource' 카테고리의 다른 글
| C#에서 어제 날짜를 가져오는 방법 (0) | 2023.09.04 |
|---|---|
| 어떤 행사가 먼저 열렸습니까?마스터 페이지 페이지_로드 또는 내용 페이지 페이지_로드 (0) | 2023.09.04 |
| jQuery에서 문서가 아닌 부모를 기준으로 위치 값을 사용하여 요소의 "맨 위, 왼쪽" 속성을 설정하려면 어떻게 해야 합니까? (0) | 2023.09.04 |
| python의 sorted() 함수는 안정성이 보장됩니까? (0) | 2023.09.04 |
| 시스템을 지우는 방법런타임.캐싱.메모리 캐시 (0) | 2023.09.04 |