Hide charts with buttons

[dkssudgktpdy]

A chart is created when you press the button using the button node and template node, and when you press the button one more time, I want to hide the chart, but if I hide the chart, the scroll bar keeps popping up.

I want to create and hide a chart by fluidly changing the size of the entire group without generating this scroll bar. What should I do?

[smanjunath211]

you can keep the chart in a separate group and show/hide that group with ui-control.

[{"id":"b2ed909b24bd3c71","type":"ui_chart","z":"5b623fd31ca86a42","name":"","group":"b514ea93cb6fdc60","order":1,"width":0,"height":0,"label":"chart","chartType":"line","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,"className":"","x":575,"y":1800,"wires":[[]]},{"id":"e1c879b90dbf32db","type":"inject","z":"5b623fd31ca86a42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{ \"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\": [\"\"] }]","payloadType":"json","x":400,"y":1800,"wires":[["b2ed909b24bd3c71"]]},{"id":"b409d210b22f8993","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"eb83573e24943be3","order":1,"width":"6","height":"1","passthru":false,"label":"Button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":375,"y":1875,"wires":[["521752d5eb58d72b"]]},{"id":"521752d5eb58d72b","type":"toggle","z":"5b623fd31ca86a42","name":"","onOffTopic":"","onValue":"open","onType":"str","offValue":"close","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":490,"y":1875,"wires":[["bd47fa9d64793825"]],"l":false},{"id":"bd47fa9d64793825","type":"switch","z":"5b623fd31ca86a42","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"open","vt":"str"},{"t":"eq","v":"close","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":600,"y":1875,"wires":[["40d8c2aad4782c9b"],["36f8a246f7e65460"]]},{"id":"40d8c2aad4782c9b","type":"change","z":"5b623fd31ca86a42","name":"SHOW","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"TEST_CHART\"],\"hide\":[],\"focus\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":735,"y":1850,"wires":[["0f924314b7aeb859"]],"l":false},{"id":"36f8a246f7e65460","type":"change","z":"5b623fd31ca86a42","name":"SHOW","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"TEST_CHART\"],\"show\":[],\"focus\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":735,"y":1900,"wires":[["0f924314b7aeb859"]],"l":false},{"id":"0f924314b7aeb859","type":"ui_ui_control","z":"5b623fd31ca86a42","name":"","events":"all","x":885,"y":1875,"wires":[[]]},{"id":"b514ea93cb6fdc60","type":"ui_group","name":"CHART","tab":"5e0dd10e66fdea95","order":4,"disp":false,"width":"12","collapse":false,"className":""},{"id":"eb83573e24943be3","type":"ui_group","name":"Button","tab":"5e0dd10e66fdea95","order":3,"disp":false,"width":"12","collapse":false,"className":""},{"id":"5e0dd10e66fdea95","type":"ui_tab","name":"TEST","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

[dkssudgktpdy]

There are a lot of charts that need to be processed, so is there only a way to do it as a group?

[smanjunath211]

do you want to hide physically or make the graph show no data ?
you can send an empty array to 'not show' graph.
if you could share your screenshots, we can get some idea.

[{"id":"b2ed909b24bd3c71","type":"ui_chart","z":"5b623fd31ca86a42","name":"","group":"b514ea93cb6fdc60","order":1,"width":0,"height":0,"label":"chart","chartType":"line","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,"className":"","x":575,"y":1800,"wires":[[]]},{"id":"e1c879b90dbf32db","type":"inject","z":"5b623fd31ca86a42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{ \"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\": [\"\"] }]","payloadType":"json","x":400,"y":1800,"wires":[["b2ed909b24bd3c71"]]},{"id":"b409d210b22f8993","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"eb83573e24943be3","order":1,"width":"4","height":"1","passthru":false,"label":"Hide/Show","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":395,"y":1875,"wires":[["521752d5eb58d72b"]]},{"id":"521752d5eb58d72b","type":"toggle","z":"5b623fd31ca86a42","name":"","onOffTopic":"","onValue":"open","onType":"str","offValue":"close","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":490,"y":1875,"wires":[["bd47fa9d64793825"]],"l":false},{"id":"bd47fa9d64793825","type":"switch","z":"5b623fd31ca86a42","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"open","vt":"str"},{"t":"eq","v":"close","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":600,"y":1875,"wires":[["40d8c2aad4782c9b"],["36f8a246f7e65460"]]},{"id":"40d8c2aad4782c9b","type":"change","z":"5b623fd31ca86a42","name":"SHOW","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"TEST_CHART\"],\"hide\":[],\"focus\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":735,"y":1850,"wires":[["0f924314b7aeb859"]],"l":false},{"id":"36f8a246f7e65460","type":"change","z":"5b623fd31ca86a42","name":"SHOW","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"TEST_CHART\"],\"show\":[],\"focus\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":735,"y":1900,"wires":[["0f924314b7aeb859"]],"l":false},{"id":"0f924314b7aeb859","type":"ui_ui_control","z":"5b623fd31ca86a42","name":"","events":"all","x":885,"y":1875,"wires":[[]]},{"id":"303e0cb20af1f253","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"eb83573e24943be3","order":1,"width":"4","height":"1","passthru":false,"label":"Clear","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[]","payloadType":"json","topic":"topic","topicType":"msg","x":375,"y":1925,"wires":[["b2ed909b24bd3c71"]]},{"id":"6d0bfc3c6ff8d937","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"eb83573e24943be3","order":1,"width":"4","height":"1","passthru":false,"label":"Load","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"[{ \"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\": [\"\"] }]","payloadType":"json","topic":"topic","topicType":"msg","x":375,"y":1750,"wires":[["b2ed909b24bd3c71"]]},{"id":"b514ea93cb6fdc60","type":"ui_group","name":"CHART","tab":"5e0dd10e66fdea95","order":4,"disp":false,"width":"12","collapse":false,"className":""},{"id":"eb83573e24943be3","type":"ui_group","name":"Button","tab":"5e0dd10e66fdea95","order":3,"disp":false,"width":"12","collapse":false,"className":""},{"id":"5e0dd10e66fdea95","type":"ui_tab","name":"TEST","icon":"dashboard","order":8,"disabled":false,"hidden":false}]