# Display multiple past array values in Node Red Dashboard

**URL:** <https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862>\
**Category:** Dashboard\
**Created:** [31 October 2022 20:22 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862 "2022-10-31T20:22:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bala](https://avatars.discourse-cdn.com/v4/letter/b/94ad74/32.png) [@Bala](https://discourse.nodered.org/u/Bala)\
**Post date:** [31 October 2022 20:22 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/1 "2022-10-31T20:22:28Z")

</div>

Hello,  
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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3cd2bee6413c76e7eae958ecc815880f83498ac6.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25585f37d81979a4f2e1f5d0d7ac2b4bb38d6637.png)

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.

Thanks,  
Bala

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [31 October 2022 20:38 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/2 "2022-10-31T20:38:31Z")

</div>

Welcome to the forum @Bala

All the timestamps are the same!

---

<div class="post-metadata">

**Author:** ![Bala](https://avatars.discourse-cdn.com/v4/letter/b/94ad74/32.png) [@Bala](https://discourse.nodered.org/u/Bala)\
**Post date:** [31 October 2022 21:02 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/3 "2022-10-31T21:02:22Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7ff869aae3f392b1f2399b42f0b22e46c30d11db.png)

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [31 October 2022 21:16 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/4 "2022-10-31T21:16:45Z")

</div>

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.  
e.g.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Bala](https://avatars.discourse-cdn.com/v4/letter/b/94ad74/32.png) [@Bala](https://discourse.nodered.org/u/Bala)\
**Post date:** [31 October 2022 21:43 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/6 "2022-10-31T21:43:40Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72ff95a41cf25065b7ee16107100a436ddb5d235.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d1249de8b0060f5b4d27c0760a983966e0974664.png)

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [31 October 2022 21:49 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/7 "2022-10-31T21:49:43Z")

</div>

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.  
e.g.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Bala](https://avatars.discourse-cdn.com/v4/letter/b/94ad74/32.png) [@Bala](https://discourse.nodered.org/u/Bala)\
**Post date:** [1 November 2022 17:09 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/8 "2022-11-01T17:09:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reinuke](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@reinuke](https://discourse.nodered.org/u/reinuke)\
**Post date:** [3 November 2022 17:07 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/9 "2022-11-03T17:07:00Z")

</div>

is your confidence level higher now?  
Just asking 😃

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 November 2022 17:07 UTC](https://discourse.nodered.org/t/display-multiple-past-array-values-in-node-red-dashboard/69862/10 "2022-11-17T17:07:01Z")

</div>

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