Horizontal Bar Chart: hide specific bars

#1

Hello! I would like to post a question regarding the horizontal bar chart "hiding bars" functionality.
As seen in the image below, I know it is possible to hide specific lines in a Line chart by clicking the
boxes corresponding to the different msg.topics . But for Bar Chart, even though I have different msg.topics,
you can see that only one box appears that hides the entire graph if clicked. Am I doing something wrong or is this a problem? (all values appearing in the charts are random generated for the moment)
Thank you in advance,
Jason.

EDIT: I did not add the image

#2

Take a read of this and import the flow at the end to see how to setup bar charts with legends you can click to hide some of the data

Node-RED-Dashboard Charts

Live data

To display live data just wire up an input with a msg.payload that contains a number.

Line charts

To display two or more lines on the same chart then each msg must also contain topic
property that identifies which data series it belongs to - for example:

{topic:"temperature", payload:22}
{topic:"humidity", payload:66}

Each series will be represented by a different colour.
Alternatively you can use the property series instead of topic if you prefer.

It is possible to create "gaps" in line charts by sending either a null or boolean false as the payload.

You can also insert extra data points by specifying the timestamp property. This must be in
either epoch time (millisecs since Jan 1 1970), or ISO8601 format.

{topic:"temperature", payload:22, timestamp:1520527095000}

Bar, and other charts

If you want all the bars to be the same colour, then use the label property instead.

{label:"indoor temperature", payload:22}
{label:"outdoor temperature", payload:15}

You can have both a label and series property if you want.

Stored data

To display a complete chart in one go - for example from a set of points retrieved from a database,
the data must be supplied in the form of an array, that holds an object that has series,labels, and data arrays.
This is broadly the same as the raw format used by the angular chart.js library.

You will need to process your data into this structure in order to render it correctly.

Line charts

For line charts an example is given below

[{
"series": ["A", "B", "C"],
"data": [
    [{ "x": 1504029632890, "y": 5 },
     { "x": 1504029636001, "y": 4 },
     { "x": 1504029638656, "y": 2 }
    ],
    [{ "x": 1504029633514, "y": 6 },
     { "x": 1504029636622, "y": 7 },
     { "x": 1504029639539, "y": 6 }
    ],
    [{ "x": 1504029634400, "y": 7 },
     { "x": 1504029637959, "y": 7 },
     { "x": 1504029640317, "y": 7 }
    ]
],
"labels": [""]
}]

For non-timeseries data - for example data in labelled categories, rather than use x and y,
the format should be as follows:

[{
    "series": ["X", "Y", "Z" ],
    "data": [ [5,6,9], [3,8,5], [6,7,2] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}]

Bar and Pie charts

for bars of different colours

[{
    "series": [ "X", "Y", "Z"],
    "data": [ [5], [3], [6] ],
    "labels": [ "Jan" ]
}]

for bars of the same colour

[{
    "series": [ "X" ],
    "data": [ [5,6,9] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}]

and these can be mixed - you can have series and labels defined...

[{
    "series": ["X", "Y", "Z" ],
    "data": [ [5,6,9], [3,8,5], [6,7,2] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}]

Example

Here is an example you can import demonstrating many of these formats and capabilities

[{"id":"1c24be99.3dc2f1","type":"function","z":"df030567.d1ff38","name":"","func":"var m={};\nm.labels = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"];\nm.series = ['Series A', 'Series B', 'Series C'];\nm.data = [\n    [65, 59, 80, 81, 56, 55, 40],\n    [28, 48, 40, 19, 86, 27, 90],\n    [38, 28, 20, 49, 45, 60, 20]\n  ];\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":360,"wires":[["80476e4d.6f64a","f4e610a1.1c381","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"80476e4d.6f64a","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"89749fb7.87f01","order":1,"width":0,"height":0,"label":"line chart","chartType":"line","legend":"false","xformat":"auto","interpolate":"linear","nodata":"No Data","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":560,"y":100,"wires":[[],[]]},{"id":"2583d993.df9cb6","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n    \"series\":[\"A\",\"B\",\"C\"],\n    \"data\":[[{\"x\":1504029632890,\"y\":5},{\"x\":1504029636001,\"y\":4},{\"x\":1504029638656,\"y\":2}],[{\"x\":1504029633514,\"y\":6},{\"x\":1504029636622,\"y\":7},{\"x\":1504029639539,\"y\":6}],[{\"x\":1504029634400,\"y\":7},{\"x\":1504029637959,\"y\":9},{\"x\":1504029640317,\"y\":7}]],\n    \"labels\":[\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":200,"wires":[["80476e4d.6f64a"]]},{"id":"c4af128e.0eb42","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":1,"width":0,"height":0,"passthru":false,"label":"Time Line 1","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":200,"wires":[["2583d993.df9cb6"]]},{"id":"f4e610a1.1c381","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"89749fb7.87f01","order":2,"width":0,"height":0,"label":"bar chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"No Data","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":560,"y":160,"wires":[[],[]]},{"id":"ed9dcc7d.422ad","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":5,"width":0,"height":0,"passthru":false,"label":"array","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":130,"y":360,"wires":[["1c24be99.3dc2f1"]]},{"id":"fc7b7968.33bb08","type":"random","z":"df030567.d1ff38","name":"","low":"1","high":"10000000","inte":"true","x":320,"y":560,"wires":[["80476e4d.6f64a"]]},{"id":"12b813b5.e358bc","type":"inject","z":"df030567.d1ff38","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":560,"wires":[["fc7b7968.33bb08"]]},{"id":"c6549407.0c1348","type":"function","z":"df030567.d1ff38","name":"","func":"var m={};\nm.labels = [10,20,30,40,50,60,70];\nm.series = ['Series A', 'Series B', 'Series C', 'Series D'];\nm.data = [\n    [65, 59, 80, 81, 56, 55, 40],\n    [28, 48, 40, 19, 86, 27, 90],\n    [38, 28, 20, 49, 45, 60, 20],\n    [58, 18, 40, 29, 15, 30, 60]\n  ];\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":400,"wires":[["80476e4d.6f64a","f4e610a1.1c381","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"27cc2706.421b18","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":6,"width":0,"height":0,"passthru":false,"label":"array2","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":130,"y":400,"wires":[["c6549407.0c1348"]]},{"id":"7bcd06e3.5cbab8","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n    \"series\":[\"A\",\"B\",\"C\"],\n        \"data\":[[{\"x\":1,\"y\":5},{\"x\":2,\"y\":4},{\"x\":3,\"y\":2}],[{\"x\":4,\"y\":6},{\"x\":5,\"y\":7},{\"x\":6,\"y\":6}],[{\"x\":7,\"y\":7},{\"x\":8,\"y\":9},{\"x\":9,\"y\":7}]],\n    \"labels\":[\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":240,"wires":[["80476e4d.6f64a"]]},{"id":"219123f5.f1d76c","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":2,"width":0,"height":0,"passthru":false,"label":"Time Line 2","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":240,"wires":[["7bcd06e3.5cbab8"]]},{"id":"22caebb3.7cfe94","type":"function","z":"df030567.d1ff38","name":"","func":"var m = {};\nm.labels = [\"Download\", \"In-Store\", \"Mail-Order\"];\nm.data = [[300, 500, 100]];\nm.series = [\"Sales\"];\nreturn {payload:[m],topic:msg.topic};","outputs":1,"noerr":0,"x":310,"y":600,"wires":[["3c681829.4ff7d8","f4e610a1.1c381","80476e4d.6f64a","f5108a61.91a6b8","c7f5183f.012728","fe515729.789e58"]]},{"id":"3c681829.4ff7d8","type":"ui_chart","z":"df030567.d1ff38","name":"pie chart","group":"89749fb7.87f01","order":3,"width":0,"height":0,"label":"pie chart","chartType":"pie","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"30","useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":600,"y":340,"wires":[[],[]]},{"id":"7d0f50b6.398f3","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":10,"width":0,"height":0,"passthru":false,"label":"array for pie","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"Pie 4 T","x":150,"y":600,"wires":[["22caebb3.7cfe94"]]},{"id":"bf37d8d7.9bd558","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n    \"series\":[\"A\",\"B\",\"C\"],\n        \"data\":[[{\"x\":1000000,\"y\":5},{\"x\":2000000,\"y\":4},{\"x\":3000000,\"y\":2}],[{\"x\":4000000,\"y\":6},{\"x\":5000000,\"y\":7},{\"x\":6000000,\"y\":6}],[{\"x\":7000000,\"y\":7},{\"x\":8000000,\"y\":9},{\"x\":9000000,\"y\":7}]],\n    \"labels\":[\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":280,"wires":[["80476e4d.6f64a"]]},{"id":"e897b370.e8548","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":3,"width":0,"height":0,"passthru":false,"label":"Time Line 3","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":280,"wires":[["bf37d8d7.9bd558"]]},{"id":"f6963e44.a328f","type":"function","z":"df030567.d1ff38","name":"","func":"var chart = [{\n    \"series\":[\"A\",\"B\",\"C\"],\n        \"data\":[[{\"x\":1000000000,\"y\":5},{\"x\":2000000000,\"y\":4},{\"x\":3000000000,\"y\":2}],[{\"x\":4000000000,\"y\":6},{\"x\":5000000000,\"y\":7},{\"x\":6000000000,\"y\":6}],[{\"x\":7000000000,\"y\":7},{\"x\":8000000000,\"y\":9},{\"x\":9000000000,\"y\":7}]],\n    \"labels\":[\"\"]\n}];\nmsg.payload = chart;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":320,"wires":[["80476e4d.6f64a"]]},{"id":"9462d11a.374a1","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":4,"width":0,"height":0,"passthru":false,"label":"Time Line 4","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":320,"wires":[["f6963e44.a328f"]]},{"id":"62668961.a49728","type":"function","z":"df030567.d1ff38","name":"","func":"var m={\n    \"series\":[\"X\",\"Y\",\"Z\"],\n    \"data\":[[5,6,9],[3,8,5],[6,7,2]],\n    \"labels\":[\"Jan\",\"Feb\",\"Mar\"]\n};\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":520,"wires":[["80476e4d.6f64a","f4e610a1.1c381","3c681829.4ff7d8","f5108a61.91a6b8","c7f5183f.012728","fe515729.789e58"]]},{"id":"b4c7442f.5481b8","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":9,"width":0,"height":0,"passthru":false,"label":"array3c","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":520,"wires":[["62668961.a49728"]]},{"id":"da3771b3.5a321","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":11,"width":0,"height":0,"passthru":false,"label":"array 2 for pie","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"Pie Hole","x":160,"y":640,"wires":[["2b9c546c.58865c"]]},{"id":"2b9c546c.58865c","type":"function","z":"df030567.d1ff38","name":"","func":"var m = {};\nm.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];\nm.data = [[28, 48, 40, 19, 86, 27, 90]];\nm.series = ['Series A'];\nreturn {payload:[m],topic:msg.topic};","outputs":1,"noerr":0,"x":310,"y":640,"wires":[["3c681829.4ff7d8","f4e610a1.1c381","c7f5183f.012728","f5108a61.91a6b8","80476e4d.6f64a","fe515729.789e58"]]},{"id":"c0d6a942.dc82f8","type":"function","z":"df030567.d1ff38","name":"topic","func":"var m = [\n    {topic:\"X\", payload:22},\n    {topic:\"Y\", payload:66},\n    {topic:\"Z\", payload:42}\n    ];\nreturn [m];","outputs":1,"noerr":0,"x":290,"y":160,"wires":[["f4e610a1.1c381","3c681829.4ff7d8","80476e4d.6f64a","fe515729.789e58"]]},{"id":"b8f011ee.6b874","type":"inject","z":"df030567.d1ff38","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":140,"y":160,"wires":[["c0d6a942.dc82f8"]]},{"id":"23311ede.673912","type":"function","z":"df030567.d1ff38","name":"label","func":"var m = [\n    {label:\"A\", payload:22},\n    {label:\"B\", payload:66},\n    {label:\"C\", payload:42},\n    ];\nreturn [m];","outputs":1,"noerr":0,"x":290,"y":120,"wires":[["f4e610a1.1c381","3c681829.4ff7d8","80476e4d.6f64a","fe515729.789e58"]]},{"id":"564d1920.d756d8","type":"inject","z":"df030567.d1ff38","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":140,"y":120,"wires":[["23311ede.673912"]]},{"id":"437e7323.02763c","type":"function","z":"df030567.d1ff38","name":"","func":"var m={\n    \"series\":[\"X\",\"Y\",\"Z\"],\n    \"data\":[[5],[3],[6]],\n    \"labels\":[\"Jan\"]\n};\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":440,"wires":[["f4e610a1.1c381","f5108a61.91a6b8","c7f5183f.012728","80476e4d.6f64a","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"e741cd13.7e8da","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":7,"width":0,"height":0,"passthru":false,"label":"array3a","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":440,"wires":[["437e7323.02763c"]]},{"id":"10291d1f.0a5d13","type":"function","z":"df030567.d1ff38","name":"","func":"var m={\n    \"series\":[\"X\"],\n    \"data\":[[5,3,6]],\n    \"labels\":[\"Jan\",\"Feb\",\"Mar\"]\n};\nreturn {payload:[m]};","outputs":1,"noerr":0,"x":290,"y":480,"wires":[["f4e610a1.1c381","80476e4d.6f64a","c7f5183f.012728","f5108a61.91a6b8","fe515729.789e58","3c681829.4ff7d8"]]},{"id":"be38d116.6de45","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":8,"width":0,"height":0,"passthru":false,"label":"array3b","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":480,"wires":[["10291d1f.0a5d13"]]},{"id":"fe515729.789e58","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"4e7edda4.417004","order":2,"width":0,"height":0,"label":"horizontal bar","chartType":"horizontalBar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"30","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":580,"y":220,"wires":[[],[]]},{"id":"f5108a61.91a6b8","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"4e7edda4.417004","order":3,"width":0,"height":0,"label":"polar chart","chartType":"polar-area","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"30","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":610,"y":460,"wires":[[],[]]},{"id":"c7f5183f.012728","type":"ui_chart","z":"df030567.d1ff38","name":"","group":"4e7edda4.417004","order":4,"width":0,"height":0,"label":"radar chart","chartType":"radar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"30","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":610,"y":520,"wires":[[],[]]},{"id":"71de4fb7.df017","type":"function","z":"df030567.d1ff38","name":"label","func":"var m = [\n    {label:\"A\", payload:22, series:\"X\"},\n    {label:\"B\", payload:66, series:\"X\"},\n    {label:\"C\", payload:42, series:\"X\"},\n    {label:\"A\", payload:33, series:\"Y\"},\n    {label:\"B\", payload:72, series:\"Y\"},\n    {label:\"C\", payload:12, series:\"Y\"},\n    {label:\"A\", payload:44, series:\"Z\"},\n    {label:\"B\", payload:32, series:\"Z\"},\n    {label:\"C\", payload:80, series:\"Z\"}\n    ];\nreturn [m];","outputs":1,"noerr":0,"x":290,"y":80,"wires":[["3c681829.4ff7d8","f4e610a1.1c381","80476e4d.6f64a","fe515729.789e58"]]},{"id":"c2d23159.73b39","type":"inject","z":"df030567.d1ff38","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":140,"y":80,"wires":[["71de4fb7.df017"]]},{"id":"29cd8a13.ecade6","type":"ui_button","z":"df030567.d1ff38","name":"","group":"ab397e95.29ebe","order":11,"width":0,"height":0,"passthru":false,"label":"Clear All","color":"","bgcolor":"","icon":"","payload":"[]","payloadType":"json","topic":"","x":280,"y":40,"wires":[["c7f5183f.012728","f5108a61.91a6b8","3c681829.4ff7d8","fe515729.789e58","f4e610a1.1c381","80476e4d.6f64a"]]},{"id":"89749fb7.87f01","type":"ui_group","z":"","name":"Charts","tab":"d7901f40.2659d","order":2,"disp":false,"width":"6"},{"id":"ab397e95.29ebe","type":"ui_group","z":"","name":"Inputs","tab":"d7901f40.2659d","order":1,"disp":false,"width":"6"},{"id":"4e7edda4.417004","type":"ui_group","z":"","name":"Group 3","tab":"d7901f40.2659d","order":3,"disp":false,"width":"6"},{"id":"d7901f40.2659d","type":"ui_tab","z":"","name":"Charts","icon":"dashboard","order":2}]
#3

Thank you, seems like I didn't look "deeper" into it.
Sorry for rushing here to ask and thanks again:)