Parse and plot MQTT data on a chart

Dashboard
1

I am streaming data to my broker from a microcontroller using the following format:
"1234567890123;1234"
the first part of the message is a long epoch the second my data.
(I am not relying on the broker timer)

I have sparsed the data in a function node with 2 outputs:
var msg1={};
var msg2={};
var buffer=msg.payload.split(";");
msg1.payload=buffer[0];
msg2.payload=buffer[1];
return [msg1,msg2];

But I am struggling to plot msg2.payload against msg1.payload using a chart.

Would you like to help me with this?
(this might be trivial to you, but I am beginning with node-red)

2

Hi @sylvanoMTL

Firstly, regarding this...

You would benefit greatly from sending valid JSON from your controller - then there would be no need to split values & if you add anything in the future, your solution will continue to work (JSON is extensible)

e.g. you could send a JSON string like this...

 '{  "topic": "data",  "payload": 1234,  "timestamp": 1234567890123 }'

then upon receiving this data in node-red - its a simple case of specifying the value is JSON and node-red would convert it to a JS object

OK, on to the chart thing...

If you read the built in help - you will see this...
image

which will take you to this nugget...

image
image946Ă—108 4.46 KB

So for your data to be plotted and use the timestamp/epoch, you need to build a msg (JS object) that looks like this...

{
    "topic": "data", 
    "payload": 1234, 
    "timestamp": 1234567890123
}

So putting it all together...

put this in your function node...

var buffer=msg.payload.split(";");
msg.topic = "you_chose_a_topic";
msg.timestamp = parseInt(buffer[0]);
msg.payload = parseInt(buffer[1]);
return msg;

... and link it to the graph & it will plot your value against the timestamp in your data.

1 Like
3

Many Thanks Steve, with a T as it opened my eyes.
For templating data for the chart, I have tried this things that works too.

var buffer=msg.payload.split(";");
var m = [
    {topic:"X", timestamp:Number(buffer[0]), payload:Number(buffer[1])}
    ];
return [m];

I am not familiar with JS but I guess that is an equivalent to what you suggested.

I will try Json formatting on my controller later when I have some time.

Note I am sending data every 50ms, the chart seems to update each time the web browser can refresh. Is there any relevant thread on how to avoid this refreshing. It is fine on my PC, though on my cellphone it is pretty laggy.

4

50ms is a bit much. What do you hope to see / achieve with data moving across the screen so quickly? It might look cool but I can see what benefits you'd have over updating say every 1s or every 1min?

5

Hi Steve,
I am not sure if I will use node-red to display live-data. I have discovered node-red last winter and started to scratch some ideas with it.
Display seems to be the main limitation so far.. But I need to display the data. I expect to measure displacement at possibly 1Hz-2Hz.

I see different options:

  • send a message: timestamp, data1, data2,...
    Make a buffer under node-red (and i need to learn this)
    send the buffer to the graph

  • create a buffer on the micro-controller
    Send the buffer to the broker
    Decompile and linl to the graph.

I guess I am trying hard, but i am sure other people have tried that before.
happy to get some guideline

6

Hi-speed processing isn't necessarily Node-RED's forte. You would probably be better off sending the data direct to InfuxDB and using Grafana to produce a suitable chart. There is no way any human is going to get anything useful out of such fast updates in real-time. InfluxDB is a time-series db and can easily do clever things to summarise time-based data. Grafana will talk direct to InfluxDB and has easy setup of charts and queries.

You can then use Node-RED for any other processing you'd like to do with that data since there are nodes to read InfluxDB data (thought you don't really need them since InfluxDB has a web query interface). Things like alerting or translation from the input data to an LED display or whatever you might want to do.

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.