# Smooth counting up

**URL:** <https://discourse.nodered.org/t/smooth-counting-up/86685>\
**Category:** Dashboard\
**Created:** [23 March 2024 09:53 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685 "2024-03-23T09:53:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [23 March 2024 09:53 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/1 "2024-03-23T09:53:55Z")

</div>

![smooth_counting](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/1772b8a7754d2e78fcc11f2055108984914c18bb.gif)

I intend to get the display at left similar (ui-text node) to the gauge (smooth updating from previous value to next value, without jumping to the next value directly. i had asked the question already in the above query, but i could not understand the solution provided. any other hint please ...

> [@How to smoothen the counter display](https://discourse.nodered.org/t/how-to-smoothen-the-counter-display/85345):
>
> Hi, I have a input from a source which gives me a count every 1 second (usually 3 to 5, maximum 6). I want to totalise this and display as a cumulative counter for one minute and reset. currently the Minute counter displays like, 5,10,15,19 etc depending upon the first input. what would be the way to display the Minute counter as 1,2,3,4,5 so that the counting is continuous and smooth ? current display and expected display shown below. Current Display [counter] Expected (simulation here) [c…

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 March 2024 12:08 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/2 "2024-03-23T12:08:10Z")

</div>

Something like this might work, except it's integers only. You could multiply by 10 at the start and divide by 10 at the end to get 1 decimal place.  
The rate limit node regulates how quickly the text output catches up with the latest input.  
A lower input than is currently in context storage will reset to 0 but it will finish counting up before restarting.

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

```auto
[{"id":"1f95199e774389dc","type":"function","z":"cf400f7f1844d87c","name":"Accumulate total","func":"let start = context.get('total') || 0\nif (msg.payload < start) {\n start = 0\n}\nconst stop = msg.payload\nfor (msg.payload = start + 1; msg.payload <= stop; msg.payload ++) {\n context.set ('total', msg.payload)\n node.send (msg)\n}\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":160,"wires":[["4afb22a5c06fdd78"]]},{"id":"f366e5e5a184cbb3","type":"inject","z":"cf400f7f1844d87c","name":"n = 19","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"19","payloadType":"num","x":130,"y":160,"wires":[["1f95199e774389dc"]]},{"id":"5a5b2dfcf9a12ece","type":"inject","z":"cf400f7f1844d87c","name":"n = 14","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"14","payloadType":"num","x":130,"y":120,"wires":[["1f95199e774389dc"]]},{"id":"be42348f9b7f4d80","type":"inject","z":"cf400f7f1844d87c","name":"n = 45","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"45","payloadType":"num","x":130,"y":200,"wires":[["1f95199e774389dc"]]},{"id":"7a74b8e1b0aafc1d","type":"debug","z":"cf400f7f1844d87c","name":"debug 474","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":630,"y":160,"wires":[]},{"id":"4afb22a5c06fdd78","type":"delay","z":"cf400f7f1844d87c","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"5","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":470,"y":160,"wires":[["7a74b8e1b0aafc1d"]]}]

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 March 2024 12:16 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/3 "2024-03-23T12:16:53Z")

</div>

This is not as simple as it might seem, I would recommend an external library like [countUp](https://inorganik.github.io/countUp.js/) with a template node

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [23 March 2024 12:22 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/4 "2024-03-23T12:22:45Z")

</div>

this is exactly what i was needing, now i see the logic, the function node quickly goes through the counting, but the limit node gives out smoothly. excellent.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [23 March 2024 12:24 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/5 "2024-03-23T12:24:10Z")

</div>

I did lookup the countUp js but getting it in a template node, was not in my skill list. thanks for the input.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [23 March 2024 12:41 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/6 "2024-03-23T12:41:06Z")

</div>

the msg.payload is giving in random steps of 4 to 5 liters jump, but the display is going through liter by liter smoothly... exactly like i wanted... just need to set the limit to suit my inflow speed so that it catches up, which can be easily done. thanks again @jbudd

![smooth_counting1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae68833b04773be28e99f54c3e2ffdc6cf7848df.gif)

---

<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:** [6 April 2024 12:42 UTC](https://discourse.nodered.org/t/smooth-counting-up/86685/7 "2024-04-06T12:42:07Z")

</div>

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