# Plotting Points on a Chart with a Delay

**URL:** <https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842>\
**Category:** General\
**Tags:** node-red-dashboard, function-node\
**Created:** [27 August 2023 17:02 UTC](https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842 "2023-08-27T17:02:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ranbrant](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@ranbrant](https://discourse.nodered.org/u/ranbrant)\
**Post date:** [27 August 2023 17:02 UTC](https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842/1 "2023-08-27T17:02:35Z")

</div>

Hi,

I'm new to Node-Red and I was hoping I can get some help. I have a random generated array that I coded up using the function block that outputs 5 values.

I would like to plot each value from the generated array after a delay. At the moment, upon injection, it plots out all 5 data points in one go. I'd like it to plot 1 data point after every two seconds instead of all the 5 data points in a single go. I've tried to use the split and delay block, but I can't seem to get it to work.

My plan is to use the same block of code and output a random array of 100 values where each point in that random array is plotted after a delay of 2 seconds.

Thank you.

**Code:**

```auto
[{"id":"609bd1f48eb65be2","type":"tab","label":"Array to Chart with Delay","disabled":false,"info":"","env":[]},{"id":"c82a8c828ad12f1f","type":"comment","z":"609bd1f48eb65be2","name":"Charting an Array","info":"Simple example of how to chart values in an array","x":260,"y":160,"wires":[]},{"id":"4394cd6b6ac74c99","type":"function","z":"609bd1f48eb65be2","name":"Charting Array","func":"let data = [];\nlet labels = [];\n\n// Create the data\nfor (var i = 0; i < 5; i++)\n{\n \n data[i] = Math.round(Math.random() * 100);\n labels[i] = i+1;\n\n}\n\n// format it nicely for node-red\nvar chart = [{\n \"series\": [\"X\"],\n \"data\": [data],\n \"labels\": labels\n}];\n\nmsg.payload = chart;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":220,"wires":[["a5d42321065c9f99","658cc8fd571581b6"]]},{"id":"a5d42321065c9f99","type":"ui_chart","z":"609bd1f48eb65be2","name":"Chart: Array Data","group":"07dfaaf31abffa87","order":1,"width":"8","height":"6","label":"Engine Bay Temperature <i class=\"fa fa-thermometer-empty\" style=\"font-size:46px\"></i>","chartType":"line","legend":"false","xformat":"Data Point","interpolate":"linear","nodata":"","dot":true,"ymin":"0","ymax":"100","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#ff0059","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":750,"y":240,"wires":[[]]},{"id":"658cc8fd571581b6","type":"debug","z":"609bd1f48eb65be2","name":"Array Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":730,"y":160,"wires":[]},{"id":"2c409302fd9d1c32","type":"inject","z":"609bd1f48eb65be2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":220,"wires":[["4394cd6b6ac74c99"]]},{"id":"07dfaaf31abffa87","type":"ui_group","name":"Chart Example of an Array","tab":"01c5a8f39d591610","order":1,"disp":false,"width":"8","collapse":false,"className":""},{"id":"01c5a8f39d591610","type":"ui_tab","name":"ARRAYS","icon":"web_asset","order":2,"disabled":false,"hidden":false}]

```

**Image: Block Code**

 ![1-Flow_Blocks](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e3974c3d4a0d8aa934bd5e624bdcf237cb00ea38.jpeg)

**Image: Function Script**

 ![2-Function_Code](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/ccbe2a8a1bf781c4bd5603bb6deb0f1069931735.jpeg)

---

<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:** [27 August 2023 18:25 UTC](https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842/2 "2023-08-27T18:25:19Z")

</div>

Have you tried a delay node set to rate limit 1 message every 2 seconds.

[edit] as you are wanting to send a reading with a delay it may be best to send [live data format](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

e.g

```auto
[{"id":"2c409302fd9d1c32","type":"inject","z":"609bd1f48eb65be2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":220,"wires":[["21485a7e4747e0b5"]]},{"id":"21485a7e4747e0b5","type":"trigger","z":"609bd1f48eb65be2","name":"","op1":"[]","op2":"","op1type":"json","op2type":"payl","duration":"50","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":250,"y":280,"wires":[["a5d42321065c9f99"],["4394cd6b6ac74c99"]]},{"id":"a5d42321065c9f99","type":"ui_chart","z":"609bd1f48eb65be2","name":"Chart: Array Data","group":"07dfaaf31abffa87","order":1,"width":"8","height":"6","label":"Engine Bay Temperature <i class=\"fa fa-thermometer-empty\" style=\"font-size:46px\"></i>","chartType":"line","legend":"false","xformat":"","interpolate":"linear","nodata":"","dot":true,"ymin":"0","ymax":"100","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#ff0059","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":730,"y":280,"wires":[[]]},{"id":"4394cd6b6ac74c99","type":"function","z":"609bd1f48eb65be2","name":"Charting Array","func":"msg.topic = \"x\"\n\n// Create the data\nfor (var i = 0; i < 5; i++)\n{\n \n msg.payload = Math.round(Math.random() * 100);\n msg.timestamp = i*1000;\n node.send(msg)\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":320,"wires":[["658cc8fd571581b6","e77c37130a9d54be"]]},{"id":"e77c37130a9d54be","type":"delay","z":"609bd1f48eb65be2","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"2","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":600,"y":340,"wires":[["a5d42321065c9f99"]]},{"id":"658cc8fd571581b6","type":"debug","z":"609bd1f48eb65be2","name":"Array Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":160,"wires":[]},{"id":"07dfaaf31abffa87","type":"ui_group","name":"Chart Example of an Array","tab":"01c5a8f39d591610","order":1,"disp":false,"width":"8","collapse":false,"className":""},{"id":"01c5a8f39d591610","type":"ui_tab","name":"ARRAYS","icon":"web_asset","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![ranbrant](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@ranbrant](https://discourse.nodered.org/u/ranbrant)\
**Post date:** [28 August 2023 17:23 UTC](https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842/3 "2023-08-28T17:23:23Z")

</div>

Thank you for your prompt help, I tried the delay node as you said and it doesn't work but your alternative suggestion gives me something to work with.

---

<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:** [27 October 2023 17:23 UTC](https://discourse.nodered.org/t/plotting-points-on-a-chart-with-a-delay/80842/4 "2023-10-27T17:23:54Z")

</div>

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