Killertechno
Posts: 139
Joined: Wed Jan 02, 2013 8:28 am

Graph real-time streaming data on webpage

Mon Sep 24, 2018 2:37 pm

Hi to all, I'm newbie in python and webpages.
My target is webpage to show realtime data such this example:

https://github.com/plotly/Streaming-Dem ... ensor-data

I'm going to read realtime sensor data (50 or 100 samples/second), to be shown in 1/2 (or more) seconds refresh interval graph on webpage; sensor is connected to Raspberry GPIO, then I see data locally through browser on laptop connected through ethernet port.

I can't use plotly due I have no internet connection.

Can I solve someway else instead using plotly?
Thanks.

User avatar
MrYsLab
Posts: 117
Joined: Mon Dec 15, 2014 7:14 pm
Location: Noo Joysey, USA

Re: Graph real-time streaming data on webpage

Mon Sep 24, 2018 3:30 pm

Take a look at remi https://github.com/dddomodossola/remi, specifically the matplotlib_app example https://github.com/dddomodossola/remi/b ... lib_app.py

Here is a sample screenshot:
https://imgur.com/a/Yw6Tgba

Killertechno
Posts: 139
Joined: Wed Jan 02, 2013 8:28 am

Re: Graph real-time streaming data on webpage

Mon Sep 24, 2018 3:58 pm

But it looks a simple graph updated when pressing button... or am I wrong?

Heater
Posts: 9841
Joined: Tue Jul 17, 2012 3:02 pm

Re: Graph real-time streaming data on webpage

Mon Sep 24, 2018 4:23 pm

Can I assume:

Your sensors are connected to a Pi.

Your web server will run on the same Pi

The browser you view this with is on your local LAN.

If so, do the following to get real-time updates to graphs or whatever in the browser:

1) Have your program read the sensors.

2) Have the same program serve up web pages that will display your graphs or whatever.

3) Have the Javascript in your web pages make a web socket connection back to your server.

4) Have the server then forward sensor updates to the browser via that web socket connection. Using JSON format is nice and simple for this.

5) The Javascript in your browser can then receive that sensor data from the web socket connection and update its graphs or whatever.

All in all this is much more easily done using Javascript and node.js as your web server.

User avatar
MrYsLab
Posts: 117
Joined: Mon Dec 15, 2014 7:14 pm
Location: Noo Joysey, USA

Re: Graph real-time streaming data on webpage

Mon Sep 24, 2018 6:15 pm

I think it boils down to whether or not you are comfortable programming in JS or not. If you prefer Python, remi will do what you wish. I just noticed in the examples there is a plotly example as well. What you will need to do is modify the example to accept your live data instead of the randomly generated data. If you need to break into the remi event loop, it is simple to do so - you just override the idle() method in remi.

In either case - JS or Python, it will take a little bit of work.

Heater
Posts: 9841
Joined: Tue Jul 17, 2012 3:02 pm

Re: Graph real-time streaming data on webpage

Mon Sep 24, 2018 7:02 pm

MrYsLab,

What you say is true. I believe it's possible to do almost anything in almost any programming language.
In either case - JS or Python, it will take a little bit of work.
Yes, but it will take more work in Python.

Python is great and all but JS is designed from the ground up to make the kind of asynchronous communication our poster wants dead easy.

I believe one should select the language that fits the task at hand.

Return to “Python”

Who is online

Users browsing this forum: No registered users and 7 guests