# How can I present a daily variable in a bar chart for each day for 1 month

**URL:** <https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104>\
**Category:** General\
**Created:** [4 February 2025 11:04 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104 "2025-02-04T11:04:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olaa/32/73030_2.png) [@Olaa](https://discourse.nodered.org/u/Olaa)\
**Post date:** [4 February 2025 11:04 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/1 "2025-02-04T11:04:22Z")

</div>

I use Watt2kwh. I store its metrics in a variable, "energyVal" until  
at 24:00 when everything is reset and starts over.

How can I present the "energyVal" variable in a bar chart for each day for 1 month.

thanks for the help 🙂

---

<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:** [4 February 2025 13:36 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/2 "2025-02-04T13:36:36Z")

</div>

Define a month?  
Where do you wish to display, a dashboard? which one?

---

<div class="post-metadata">

**Author:** ![Olaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olaa/32/73030_2.png) [@Olaa](https://discourse.nodered.org/u/Olaa)\
**Post date:** [4 February 2025 13:57 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/3 "2025-02-04T13:57:44Z")

</div>

Yes a month is a month. 30, 31 days works fine. It should be built up by the variable and present every day. then it can be set to zero.  
Dashboard, I don't know really and can put it where it fits, big large what ever!

---

<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:** [4 February 2025 14:06 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/4 "2025-02-04T14:06:20Z")

</div>

Do you need to display today's energyValue only at midnight or must the bar reflect consumption through the day?

You probably need to store each day's total as an array in persistent context.  
At midnight, add the new data then if the array has a full month's worth of data, drop the first element.

Feed this to the chart node as stored data.

---

<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:** [4 February 2025 15:18 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/5 "2025-02-04T15:18:16Z")

</div>

You are being very vague with information.

Here are two examples  
1st will add a value every day and reset stored data on the !st day of the month.  
2nd will maintain a store of last 31 days.

```auto
[{"id":"16ea4d09e1e70ebf","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"watt_array2","pt":"flow","to":"$append(\t $flowContext(\"watt_array2\"),\t [\t {\t \"watts\":$$.payload, \t \"date\": $now(),\t \"series\": \"watts\"\t }\t]\t)[[-31..-1]]","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"watt_array2","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":6120,"wires":[["07ac632d9a15a794"]]},{"id":"8944a8b57c416fee","type":"inject","z":"d1395164b4eec73e","name":"simulate watts at midnight every day","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"00 00 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"$round($random()*10, 2)","payloadType":"jsonata","x":212.99998474121094,"y":5919.000036239624,"wires":[["6f4385e091f94665"]]},{"id":"6f4385e091f94665","type":"switch","z":"d1395164b4eec73e","name":"start of month","property":"$moment().format(\"D\")","propertyType":"jsonata","rules":[{"t":"eq","v":"1","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":462.99998474121094,"y":5919.000036239624,"wires":[["cfeb5deb520af5ad"],["b64b80d16e377168"]]},{"id":"cfeb5deb520af5ad","type":"change","z":"d1395164b4eec73e","name":"reset watt array on 1st day of month","rules":[{"t":"set","p":"watt_array","pt":"flow","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":732.9999847412109,"y":5899.000036239624,"wires":[["b64b80d16e377168"]]},{"id":"b64b80d16e377168","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"watt_array","pt":"flow","to":"$append(\t $flowContext(\"watt_array\"),\t [\t {\t \"watts\":$$.payload, \t \"date\": $split($now(), \"T\")[0],\t \"series\": \"watts\"\t }\t ]\t)","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"watt_array","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":662.9999847412109,"y":5959.000036239624,"wires":[["0bc883638dbb695a"]]},{"id":"0bc883638dbb695a","type":"ui-chart","z":"d1395164b4eec73e","group":"9d83cd8b3d5ee33c","name":"Watts","label":"Watts","order":2,"chartType":"bar","category":"series","categoryType":"property","xAxisLabel":"","xAxisProperty":"date","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"watts","yAxisPropertyType":"property","ymin":"0","ymax":"10","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#ffffff"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":592.9999847412109,"y":5999.000036239624,"wires":[["bba69892327d4a7e"]]},{"id":"bba69892327d4a7e","type":"debug","z":"d1395164b4eec73e","name":"debug 2578","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":632.9999847412109,"y":6059.000036239624,"wires":[]},{"id":"1f8f3037f2ace8cf","type":"inject","z":"d1395164b4eec73e","name":"simulate watts at midnight every day","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"00 00 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"$round($random()*10, 2)","payloadType":"jsonata","x":270,"y":6120,"wires":[["16ea4d09e1e70ebf"]]},{"id":"07ac632d9a15a794","type":"ui-chart","z":"d1395164b4eec73e","group":"9d83cd8b3d5ee33c","name":"Watts","label":"Watts","order":3,"chartType":"bar","category":"series","categoryType":"property","xAxisLabel":"","xAxisProperty":"date","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"watts","yAxisPropertyType":"property","ymin":"0","ymax":"10","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#ffffff"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":690,"y":6120,"wires":[["c0c5c652a92bcfb7"]]},{"id":"c0c5c652a92bcfb7","type":"debug","z":"d1395164b4eec73e","name":"debug 2579","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":830,"y":6120,"wires":[]},{"id":"9d83cd8b3d5ee33c","type":"ui-group","name":"Group1","page":"c694d0ebe0d2b702","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"c694d0ebe0d2b702","type":"ui-page","name":"Page1","ui":"1805777f90e92057","path":"/page1","icon":"home","layout":"grid","theme":"a965ccfef139317a","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":1,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

Using [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/@flowfuse/node-red-dashboard)

Hope this helps you get started.

---

<div class="post-metadata">

**Author:** ![Olaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/olaa/32/73030_2.png) [@Olaa](https://discourse.nodered.org/u/Olaa)\
**Post date:** [4 February 2025 15:26 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/6 "2025-02-04T15:26:10Z")

</div>

No it's not need for presentation during day. I only need to show the day before.

Thanks I'm going to take a look on your examples 🙂

Yes an Array could solve the wishes. But I'm bad in coding.

Thank you so much 🙂

---

<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:** [5 May 2025 15:26 UTC](https://discourse.nodered.org/t/how-can-i-present-a-daily-variable-in-a-bar-chart-for-each-day-for-1-month/95104/7 "2025-05-05T15:26:37Z")

</div>

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