How to create an horizontal stacked bar

Dashboard
1

Hello, I've briefly seen that it was possible to create horizontal bar chart using the node ui_chart, although I don't know about stacked chart. The problem is that I have no clue about how to do it.

Here are examples of what I would like to do:
image
image

Thanks in advances!

2

Here is a little example

[{"id":"a9b523ce.0acde","type":"function","z":"c9512783.9493c8","name":"ui_control","func":"\nmsg.ui_control = {\n    options: {\n        scales: {\n            xAxes: [\n                {\n                stacked: true,\n                ticks: {\n                    fontColor: '#00ff00'\n                },\n                gridLines :{\n                    zeroLineColor:'#00ff00',\n                    color:'#00ff00',\n                    lineWidth:0.5\n                },\n            }\n            ],\n            yAxes: [{\n                stacked: true,\n                ticks: {\n                    fontColor: '#ffff00'\n                },\n                gridLines :{\n                    zeroLineColor:'#00ff00',\n                    color:'#00ff00',\n                    lineWidth:0.5\n                },\n            }]\n        }\n    }\n}\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":420,"wires":[["364f1246.5ba72e"]]},{"id":"21056f95.203bf","type":"inject","z":"c9512783.9493c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":420,"wires":[["a9b523ce.0acde","146a4606.6cd3aa"]]},{"id":"364f1246.5ba72e","type":"ui_chart","z":"c9512783.9493c8","name":"","group":"65dfd687.bc39a8","order":0,"width":0,"height":0,"label":"chart","chartType":"horizontalBar","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"],"outputs":1,"useDifferentColor":false,"x":670,"y":420,"wires":[[]]},{"id":"41a3820a.7356fc","type":"function","z":"c9512783.9493c8","name":"chart data","func":"msg.payload = [{\n    \"series\": [\"X\", \"Y\", \"Z\" ],\n    \"data\": [ [5,6,9,10], [3,8,5,11], [6,7,2,12] ],\n    \"labels\": [ \"Jan\", \"Feb\", \"Mar\", \"Apr\" ]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":460,"wires":[["364f1246.5ba72e"]]},{"id":"146a4606.6cd3aa","type":"delay","z":"c9512783.9493c8","name":"","pauseType":"delay","timeout":"40","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":310,"y":460,"wires":[["41a3820a.7356fc"]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"6","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
3

Thank you for your answer it was quite what I was looking for and I managed to create what I wanted with your code.

Do you also know a way for me to get rid of the numbers at the bottom in order to make the chart look cleaner

Nevermind about this I found a way to do this
image
Also is it possible to write text directly (pourcentage) into the chart like in the first image I posted in this thread for exemple.

4

To get rid of axes just add display:false for axis configuration


msg.ui_control = {
    options: {
        scales: {
            xAxes: [{
                    display:false,
                    stacked: true,
                    ticks: {
                        fontColor: '#00ff00'
                    },
                    gridLines :{
                        zeroLineColor:'#00ff00',
                        color:'#00ff00',
                        lineWidth:0.5
                    },
                }
            ],
            yAxes: [{
                stacked: true,
                display:false,
                ticks: {
                    fontColor: '#ffff00'
                },
                gridLines :{
                    zeroLineColor:'#00ff00',
                    color:'#00ff00',
                    lineWidth:0.5
                },
            }]
        }
    }
}

To show numbers on top of bars, that takes to have access to the chart object which is impossible in case of ui_chart node is used.
It is possible to use ui_template node and create the chart using bare chartjs library and then you have access and can add pluggble functions.

5

I see, well thank you for your help!

6

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