Stacked Bar Graphs

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 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.

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

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

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