Display multiple past array values in Node Red Dashboard

I am trying to display multiple past array values in Node Red Dashboard but it's currently displaying only the latest value.

The output of the function that feeds into the dashboard node is shown in the below pic:

The value that I am trying to output is zero and I am expecting a line at the zero value on the dashboard for different timestamps. But all I see is a point at zero for the latest value of timestamp. See below pic for reference

I have the dashboard node configured to show last 30 minutes of data but that's not happening

Any thoughts on this is greatly appreciated.


Welcome to the forum @Bala

All the timestamps are the same!

I should have explained little further. I am trying to plot the data (100 data points stored in an array) every minute. And yes as you noted, the timestamp is same because all the 100 data points come in at the same exact time. Please see the below picture for reference to the function

What I am trying to find out- Is it possible to plot the 100 data points that come in with the same timestamp and then plot the next set of 100 data points that come in at the next timestamp keeping the previous data as is?

I am new to Node-Red and forgive me if I am trying to do something very silly. Thanks

The timestamps have to be different, so you need to get the timestamp for a minute ago, then add 600 millisecond to to each x value of the array.

let timestamp = new Date().valueOf() - 60000;
let predata = msg.payload;
let data = [];
predata.forEach((element, index) => {
    data.push({x: timestamp + (600 * index), y: element});

Assuming each array of 100 comes in every minute.

Thanks so much for your feedback. With your solution, I am able to plot every point in last data set. But what I am seeing is, it's only still plotting the last data set. It keeps refreshing once the new data set comes in after a minute. The timestamp changes but it keeps overwriting the existing data. Please see below screenshots for reference.

Once again, thanks for taking time to review my problem.

To plot the history you would store the output in a flow var, then when new data arrives append it to the stored data, You could then slice the array to limit it to 1000 data points about 10 mins. Any more and you would be displaying more than screen resolution would allow, and overload the dashboard if you had more charts.

[{"id":"dee773df779934c2","type":"inject","z":"452103ea51141731","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"60","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":1060,"wires":[["79212623d58dae8f"]]},{"id":"79212623d58dae8f","type":"function","z":"452103ea51141731","name":"dummy data","func":"msg.payload=[];\nfor(let i = 0 ; i<100; i++){\n    msg.payload.push(Math.round(Math.random()*100)/100-0.5);\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":1040,"wires":[["71a48add363bea05"]]},{"id":"71a48add363bea05","type":"function","z":"452103ea51141731","name":"function 15","func":"let timestamp = new Date().valueOf() - 60000;\nlet predata = msg.payload;\nlet data = flow.get(\"chart_data\") || [];\n\npredata.forEach((element, index) => {\n    data.push({x: timestamp + (600 * index), y: element} )\n})\nmsg.payload=[\n    {\n        series: [\"a\"],\n        data: [data.slice(-1000)],\n        labels: []\n    }\n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":1040,"wires":[["ac405c71d633ea19"]]},{"id":"ac405c71d633ea19","type":"ui_chart","z":"452103ea51141731","name":"","group":"2d4fe667.28f8ba","order":16,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-1","ymax":"1","removeOlder":"10","removeOlderPoints":"1000","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":650,"y":1040,"wires":[["bc7d8720076fee1c"]]},{"id":"bc7d8720076fee1c","type":"change","z":"452103ea51141731","name":"","rules":[{"t":"set","p":"chart_data","pt":"flow","to":"payload[0].data[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":830,"y":1040,"wires":[["c58ebb5a56f70f5b"]]},{"id":"c58ebb5a56f70f5b","type":"debug","z":"452103ea51141731","name":"debug 99","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":680,"y":980,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thanks so much for your reply. I was able to accomplish my objective using your suggestions.

is your confidence level higher now?
Just asking :smiley:

1 Like

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