Sonsivri
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
January 20, 2021, 03:26:39 03:26


Login with username, password and session length


Pages: [1]
Print
Author Topic: Req: Real-time graph using websocket  (Read 344 times)
0 Members and 1 Guest are viewing this topic.
puta
Junior Member
**
Offline Offline

Posts: 80

Thank You
-Given: 261
-Receive: 24


« on: November 07, 2020, 05:44:58 05:44 »


I am building a project that need to send and display data on a graph in a browser every 10ms.

I am using websocket from a micro ESP8266 to send data to a browser on a PC.
I am running the webserver to source the web page on the ESP8266, however could not find a suitable web app to display the graph on a browser do update the graph at the rate ~100 Hz.

I greatly appreciate if anyone could help me pointing me to a suitable graph.   
Logged
Sideshow Bob
Cracking Team
Hero Member
****
Offline Offline

Posts: 749

Thank You
-Given: 207
-Receive: 725



« Reply #1 on: November 07, 2020, 10:02:18 10:02 »

Why do you need 100Hz? A graph updated with 10 to 20 Hz will be felt as a realtime graph for a human observer. This will put less strain on your system.
Logged

I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum
Xwing
Active Member
***
Offline Offline

Posts: 178

Thank You
-Given: 468
-Receive: 1482



« Reply #2 on: November 07, 2020, 10:15:37 10:15 »

A good way to display graphs on the browser is to use java script, ready-made scripts for graphs and gauges of various types are easily found.
I agree with Sideshow Bob that a 10 ms update is useless, as well as creating an overload on the browser, updates are usually done a few times per second if not every few seconds.
Logged
puta
Junior Member
**
Offline Offline

Posts: 80

Thank You
-Given: 261
-Receive: 24


« Reply #3 on: November 07, 2020, 10:52:31 10:52 »

Thank you Sideshow Bob and Xwing.

It is a health monitor applience, and it spits data packets at the rate of about 100 packets per sec. One paket represents co-ordinate of one instanious point in the graph (10 ms between two points). One screen need to show atleast about 4 ~5 secs long plotting.  

I tried Chart.js at low data rates and seems ok, but at heigher rates, the graph become dodgy and unstable. Any thoughts?  
« Last Edit: November 07, 2020, 10:57:41 10:57 by puta » Logged
Sideshow Bob
Cracking Team
Hero Member
****
Offline Offline

Posts: 749

Thank You
-Given: 207
-Receive: 725



« Reply #4 on: November 07, 2020, 11:50:25 11:50 »

Even if the server sends data at 100 Hz. You do not have to show it at that rate. You can buffer data and show them at lower rate.
Logged

I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum
b555b
Junior Member
**
Offline Offline

Posts: 59

Thank You
-Given: 71
-Receive: 84


« Reply #5 on: November 07, 2020, 11:50:57 11:50 »

Maybe try plotly (https://plotly.com/javascript/).

I made a quick test in codepn by modifying one of their sample (https://plotly.com/javascript/streaming/#30-points-using-update), changing the data set to 3000 points and the update rate to 25ms. In Chrome it works nicely without jitter. At 10ms update rate there is some jitter, but as others have written, human brain will see no real difference if a graph is updated every 100ms versus 10ms.
Logged
Pages: [1]
Print
Jump to:  


DISCLAIMER
WE DONT HOST ANY ILLEGAL FILES ON THE SERVER
USE CONTACT US TO REPORT ILLEGAL FILES
ADMINISTRATORS CANNOT BE HELD RESPONSIBLE FOR USERS POSTS AND LINKS

... Copyright 2003-2999 Sonsivri.to ...
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines LLC | HarzeM Dilber MC