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

Dashboard
1

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

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

2

You'll need to feed complete data set for the day to chart to be rendered.
It is explained in documentation how to use stored data in charts.

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

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

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

Tks again!
Raoni.

4

Hello!! Where can i paste that code?

5

You can read how to import a flow.json here

6

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