# Stacked Bar Graphs

**URL:** <https://discourse.nodered.org/t/stacked-bar-graphs/34416>\
**Category:** Dashboard\
**Created:** [17 October 2020 15:07 UTC](https://discourse.nodered.org/t/stacked-bar-graphs/34416 "2020-10-17T15:07:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alcor007](https://avatars.discourse-cdn.com/v4/letter/a/b77776/32.png) [@alcor007](https://discourse.nodered.org/u/alcor007)\
**Post date:** [17 October 2020 15:07 UTC](https://discourse.nodered.org/t/stacked-bar-graphs/34416/1 "2020-10-17T15:07:16Z")

</div>

Hi all,

I feel a bit stupid and I am somewhat afraid to ask, but after hours of trial and error, I simply don't understand how to make a stacked bar graph using ACTUAL data. I used the example provided in the post [https://discourse.nodered.org/t/how-to-create-a-stacked-bar-graph/21470/2](https://discourse.nodered.org/t/how-to-create-a-stacked-bar-graph/21470/2) This example contains fake data, but of course I would like to use my own data. But I don't understand how to amend the example so that it works with my data. I'm feeling kind of desperate now. Could someone please help me to change my flow so that I can learn from it? Please see the flow below.

```auto
[{"id":"e36d4b81.b27e38","type":"tab","label":"Stacked Bars","disabled":false,"info":""},{"id":"845661ca.6aff9","type":"function","z":"e36d4b81.b27e38","name":"kwh_t2","func":"msg.topic = \"kwh_t2\"\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":140,"wires":[["b5081f84.cbcf5"]]},{"id":"cb3fbe50.d8e66","type":"function","z":"e36d4b81.b27e38","name":"kwh_t1","func":"msg.topic = \"kwh_t1\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":100,"wires":[["b5081f84.cbcf5"]]},{"id":"b5081f84.cbcf5","type":"function","z":"e36d4b81.b27e38","name":"Combine to stacked bar chart","func":"msg.payload = [{\n \"series\": [\"X\", \"Y\", \"Z\"],\n \"data\": [[5,6,9], [3,8,5], [6,7,2] ],\n \"labels\": [\"Jan\", \"Feb\", \"Mar\"]\n}]\nmsg.ui_control = {\n options: {\n scales: {\n xAxes: [{\n stacked: true\n }],\n yAxes: [{\n stacked: true\n }]\n }\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":600,"y":100,"wires":[["9e4c8a53.97ea58"]]},{"id":"dec19387.83aa1","type":"inject","z":"e36d4b81.b27e38","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":90,"y":140,"wires":[["845661ca.6aff9"]]},{"id":"6358ee2c.608a1","type":"inject","z":"e36d4b81.b27e38","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":90,"y":100,"wires":[["cb3fbe50.d8e66"]]},{"id":"9e4c8a53.97ea58","type":"ui_chart","z":"e36d4b81.b27e38","name":"","group":"a8c49673.a2a258","order":5,"width":0,"height":0,"label":"Stacked Bar Chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":1170,"y":100,"wires":[[]]},{"id":"6d498c3c.c39dd4","type":"comment","z":"e36d4b81.b27e38","name":"MQTT Energy data","info":"","x":130,"y":60,"wires":[]},{"id":"457a43e6.08652c","type":"comment","z":"e36d4b81.b27e38","name":"This node contains standard dummy data - how to change to payload data energy?","info":"","x":770,"y":60,"wires":[]},{"id":"a8c49673.a2a258","type":"ui_group","name":"Group 1","tab":"a96366c7.021fc8","order":1,"disp":true,"width":6},{"id":"a96366c7.021fc8","type":"ui_tab","z":"","name":"Example Stacked Bar Chart","icon":"dashboard","order":24,"disabled":false,"hidden":false}]

```

---

<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:** [17 October 2020 16:02 UTC](https://discourse.nodered.org/t/stacked-bar-graphs/34416/2 "2020-10-17T16:02:43Z")

</div>

I added the inject value to the bottom left stack, hit the injects and see it change.

```auto
[{"id":"561e5cc0.5b138c","type":"inject","z":"4ed02988.12fff8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":90,"y":100,"wires":[["14b7a0ab.270e7f"]]},{"id":"dfaa9416.c54a7","type":"inject","z":"4ed02988.12fff8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":90,"y":140,"wires":[["9dd86222.854728"]]},{"id":"14b7a0ab.270e7f","type":"function","z":"4ed02988.12fff8","name":"kwh_t1","func":"msg.topic = \"kwh_t1\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":320,"y":100,"wires":[["4879017e.b70a88"]]},{"id":"9dd86222.854728","type":"function","z":"4ed02988.12fff8","name":"kwh_t2","func":"msg.topic = \"kwh_t2\"\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":140,"wires":[["4879017e.b70a88"]]},{"id":"4879017e.b70a88","type":"function","z":"4ed02988.12fff8","name":"Combine to stacked bar chart","func":"msg.payload = [{\n \"series\": [\"X\", \"Y\", \"Z\"],\n \"data\": [[msg.payload,6,9], [3,8,5], [6,7,2] ],\n \"labels\": [\"Jan\", \"Feb\", \"Mar\"]\n}]\nmsg.ui_control = {\n options: {\n scales: {\n xAxes: [{\n stacked: true\n }],\n yAxes: [{\n stacked: true\n }]\n }\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":100,"wires":[["6b3f48a1.cda6c8","48c272dc.7d1494"]]},{"id":"6b3f48a1.cda6c8","type":"ui_chart","z":"4ed02988.12fff8","name":"","group":"6e910028.048e88","order":5,"width":0,"height":0,"label":"{{msg.topic}}","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":530,"y":180,"wires":[[]]},{"id":"48c272dc.7d1494","type":"debug","z":"4ed02988.12fff8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":560,"y":240,"wires":[]},{"id":"6e910028.048e88","type":"ui_group","name":"Group 1","tab":"d5f79b5b.864938","order":1,"disp":true,"width":6},{"id":"d5f79b5b.864938","type":"ui_tab","z":"","name":"Example Stacked Bar Chart","icon":"dashboard","order":24,"disabled":false,"hidden":false}]

```

---

<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:** [16 November 2020 16:03 UTC](https://discourse.nodered.org/t/stacked-bar-graphs/34416/3 "2020-11-16T16:03:09Z")

</div>

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