# Configurable X axis (bar graph) per time (hour - hour)

**URL:** <https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373>\
**Category:** Dashboard\
**Created:** [4 January 2019 00:25 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373 "2019-01-04T00:25:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rrl.raoni](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@rrl.raoni](https://discourse.nodered.org/u/rrl.raoni)\
**Post date:** [4 January 2019 00:25 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/1 "2019-01-04T00:25:22Z")

</div>

Hello, colleagues. How are you?  
Could you help me?

What I want is: based on the real hour (just hour, without minut),in X axis, I want press my trigger and this will incremented each time when I press my trigger, like a counter. When the hour change (e.g. 10am - 11am) I have to put my variable increment in 0 to do the new counter.

The graph is similar image below (without table).  
 ![Capturar](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0683ca180beb311998d0562d7540439a915b1e6f.png)

Do you have examples that I can do it? I mean, work with real time and set values in X axis (because the bar graph doesn't permit do it in its configuration).

Help me! I'm lost!

Thanks!

Regards,  
Raoni

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 January 2019 07:48 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/2 "2019-01-04T07:48:23Z")

</div>

You'll need to feed complete data set for the day to chart to be rendered.  
It is explained [in documentation](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md#stored-data) how to use stored data in charts.

And here is little bit of flow for you as the starting point

```auto
[{"id":"ce882998.462658","type":"inject","z":"898969b8.c071f8","name":"increment","topic":"increment","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":340,"wires":[["3afc2e42.168ee2"]]},{"id":"3afc2e42.168ee2","type":"function","z":"898969b8.c071f8","name":"update element in data array ","func":"var data = context.get(\"data\") || [];\nif(data.length === 0 || msg.topic === \"clear\"){\n data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];\n}\nif(msg.topic === \"increment\"){\n var hour = new Date().getHours();\n data[hour] ++;\n}\ncontext.set(\"data\",data);\nmsg.payload = data;\nreturn msg;","outputs":1,"noerr":0,"x":550,"y":360,"wires":[["ad0a04c3.a71b48"]]},{"id":"ad0a04c3.a71b48","type":"function","z":"898969b8.c071f8","name":"format data for chart","func":"var data = msg.payload;\nmsg.payload = [{\n \"series\": [\"X\"],\n \"data\": [data],\n \"labels\": [\"00\",\"01\",\"02\",\"03\",\"04\",\"05\",\"06\",\"07\",\"08\",\"09\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\"]\n}];\nreturn msg;","outputs":1,"noerr":0,"x":770,"y":360,"wires":[["861ffad5.be4588"]]},{"id":"861ffad5.be4588","type":"ui_chart","z":"898969b8.c071f8","name":"","group":"595895b0.98866c","order":0,"width":0,"height":0,"label":"CHART","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":true,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":930,"y":360,"wires":[[],[]]},{"id":"79b32a61.8e1b64","type":"inject","z":"898969b8.c071f8","name":"clear","topic":"clear","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":380,"wires":[["3afc2e42.168ee2"]]},{"id":"595895b0.98866c","type":"ui_group","z":"","name":"Default","tab":"c9285c84.26c5a","disp":true,"width":"12","collapse":false},{"id":"c9285c84.26c5a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![rrl.raoni](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@rrl.raoni](https://discourse.nodered.org/u/rrl.raoni)\
**Post date:** [9 January 2019 23:30 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/3 "2019-01-09T23:30:25Z")

</div>

Very nice hotNipi!!  
Thanks for your help!! I'll do it and I'll say if I succeeded.

Tks again!  
Raoni.

---

<div class="post-metadata">

**Author:** ![itzjujo092](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/itzjujo092/32/76970_2.png) [@itzjujo092](https://discourse.nodered.org/u/itzjujo092)\
**Post date:** [23 November 2022 20:33 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/4 "2022-11-23T20:33:45Z")

</div>

Hello!! Where can i paste that code?

---

<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:** [23 November 2022 20:49 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/5 "2022-11-23T20:49:30Z")

</div>

You can read how to [import a flow.json here](https://nodered.org/docs/user-guide/editor/workspace/import-export)

---

<div class="post-metadata">

**Author:** ![itzjujo092](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/itzjujo092/32/76970_2.png) [@itzjujo092](https://discourse.nodered.org/u/itzjujo092)\
**Post date:** [23 November 2022 20:54 UTC](https://discourse.nodered.org/t/configurable-x-axis-bar-graph-per-time-hour-hour/6373/6 "2022-11-23T20:54:39Z")

</div>

Yes, but, Which node i paste that? If you can send me a ScreenShot nice