Cannot "unhide" dashboard chart lines

[jbudd]

I am hiding selected lines on a chart (by nullifying that element of the chart data array and redrawing)
This works, and I can have a Reset button to redraw all the lines. Except...

If I hide all the lines on the chart, I can't unhide them without reloading the page.

Any ideas why not?
(Sorry the Gif is a big file, don't know the right way to record the screen for posting)

[{"id":"30306197ead446be","type":"tab","label":"Flow 4","disabled":false,"info":"","env":[]},{"id":"69fe9ae270120706","type":"function","z":"30306197ead446be","name":"Format chart","func":"const chart = [{\n    \"series\": [\"Line 1\", \"Line 2\", \"Line 3\"],\n    \"data\": [\n        msg.payload.map(d => { return { x: d.timestamp, y: d.data1 } }), \n        msg.payload.map(d => { return { x: d.timestamp, y: d.data2 } }),   \n        msg.payload.map(d => { return { x: d.timestamp, y: d.data3 } }),\n    ],\n    \"labels\": []\n}];\n\nlet showline1 = flow.get(\"showline1\") ?? true\nlet showline2 = flow.get(\"showline2\") ?? true\nlet showline3 = flow.get(\"showline3\") ?? true\nif (showline1 === false) { chart[0].data[0] = [] }\nif (showline2 === false) { chart[0].data[1] = [] }\nif (showline3 === false) { chart[0].data[2] = [] }\nmsg.payload = chart\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":120,"wires":[["314f11b8ce2f85f3"]]},{"id":"314f11b8ce2f85f3","type":"ui_chart","z":"30306197ead446be","name":"Chart","group":"a664f24e9358412a","order":8,"width":"8","height":"5","label":"Show/Hide Lines","chartType":"line","legend":"true","xformat":"auto","interpolate":"bezier","nodata":"No Data","dot":false,"ymin":"4","ymax":"12","removeOlder":"52","removeOlderPoints":"1000","removeOlderUnit":"604800","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#bf0000","#009500","#005fbd","#c0c0c0","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":870,"y":120,"wires":[[]]},{"id":"928f4ec23ec08672","type":"inject","z":"30306197ead446be","name":"Redraw","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":80,"wires":[["08f4db4969c00428"]]},{"id":"06a5e73dfc6b1cb2","type":"ui_template","z":"30306197ead446be","group":"a664f24e9358412a","name":"","order":1,"width":0,"height":0,"format":"<style>\n    .hide {\n    display: none;\n    } \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":80,"wires":[[]]},{"id":"58bda8febf19fd51","type":"ui_button","z":"30306197ead446be","name":"","group":"a664f24e9358412a","order":2,"width":"2","height":"1","passthru":false,"label":"Line 1","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"toggle","payloadType":"str","topic":"line1","topicType":"str","x":90,"y":80,"wires":[["94876dd0e4e71f54"]]},{"id":"367c887713066934","type":"ui_button","z":"30306197ead446be","name":"","group":"a664f24e9358412a","order":2,"width":"2","height":"1","passthru":false,"label":"Line 2","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"toggle","payloadType":"str","topic":"line2","topicType":"str","x":90,"y":120,"wires":[["ace0dbd65cb63e1a"]]},{"id":"8d5217d7939b16a9","type":"ui_button","z":"30306197ead446be","name":"","group":"a664f24e9358412a","order":2,"width":"2","height":"1","passthru":false,"label":"Line 3","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"toggle","payloadType":"str","topic":"line3","topicType":"str","x":90,"y":160,"wires":[["165cd2e77566b1da"]]},{"id":"08f4db4969c00428","type":"function","z":"30306197ead446be","name":"Simulate db request","func":"msg.payload = [\n{ \"id\": 1, \"timestamp\": \"2022-12-20T01:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.70, \"data3\": 10.47, },\n{ \"id\": 2, \"timestamp\": \"2022-12-20T02:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.46, \"data3\": 10.07, },\n{ \"id\": 3, \"timestamp\": \"2022-12-20T03:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.20, \"data3\": 8.93, },\n{ \"id\": 4, \"timestamp\": \"2022-12-20T04:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.41, \"data3\": 7.90, },\n{ \"id\": 5, \"timestamp\": \"2022-12-20T05:00:00.000Z\", \"data1\": 5.01, \"data2\": 11.04, \"data3\": 7.49, },\n{ \"id\": 6, \"timestamp\": \"2022-12-20T06:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.88, },\n{ \"id\": 7, \"timestamp\": \"2022-12-20T07:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.39, },\n{ \"id\": 8, \"timestamp\": \"2022-12-20T08:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 5.72, },\n{ \"id\": 9, \"timestamp\": \"2022-12-20T09:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 5.72, },\n{ \"id\": 10, \"timestamp\": \"2022-12-20T10:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.62, }]\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":120,"wires":[["69fe9ae270120706"]]},{"id":"ace0dbd65cb63e1a","type":"function","z":"30306197ead446be","name":"function 28","func":"let showline = flow.get(\"showline2\") ?? true\nshowline = showline ? false : true\nflow.set(\"showline2\", showline)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":120,"wires":[["08f4db4969c00428"]]},{"id":"165cd2e77566b1da","type":"function","z":"30306197ead446be","name":"function 30","func":"let showline = flow.get(\"showline3\") ?? true\nshowline = showline ? false : true\nflow.set(\"showline3\", showline)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":160,"wires":[["08f4db4969c00428"]]},{"id":"94876dd0e4e71f54","type":"function","z":"30306197ead446be","name":"function 31","func":"let showline = flow.get(\"showline1\") ?? true\nshowline = showline ? false : true\nflow.set(\"showline1\", showline)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":80,"wires":[["08f4db4969c00428"]]},{"id":"4a1fc62260e0f6f3","type":"ui_button","z":"30306197ead446be","name":"","group":"a664f24e9358412a","order":2,"width":"2","height":"1","passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"toggle","payloadType":"str","topic":"","topicType":"str","x":90,"y":200,"wires":[["2792e0aee697571f"]]},{"id":"2792e0aee697571f","type":"function","z":"30306197ead446be","name":"function 32","func":"flow.set(\"showline1\", true)\nflow.set(\"showline2\", true)\nflow.set(\"showline3\", true)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":200,"wires":[["08f4db4969c00428"]]},{"id":"a664f24e9358412a","type":"ui_group","name":"Demo","tab":"7d501f2d3ff3af24","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"7d501f2d3ff3af24","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

[smanjunath211]

I know, this is not the answer to your question , but i usually click the legend and achieve the required result

again, this may not be the perfect solution, but this also did the trick for me

sending a null array to the chart before sending the chart data when clicked reset button, also loads the full chart.

[{"id":"95f14d480dc102dc","type":"trigger","z":"30306197ead446be","name":"","op1":"[]","op2":"","op1type":"json","op2type":"pay","duration":"250","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":420,"y":200,"wires":[["314f11b8ce2f85f3"],["08f4db4969c00428"]]}]

[E1cid]

To use the reset button send a payload set to [ ] , before you return the chart array.
e.g.

[{"id":"4a1fc62260e0f6f3","type":"ui_button","z":"30306197ead446be","name":"","group":"a664f24e9358412a","order":2,"width":"2","height":"1","passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"toggle","payloadType":"str","topic":"reset","topicType":"str","x":170,"y":120,"wires":[["08f4db4969c00428"]]},{"id":"08f4db4969c00428","type":"function","z":"30306197ead446be","name":"Simulate db request","func":"msg.payload = [\n{ \"id\": 1, \"timestamp\": \"2022-12-20T01:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.70, \"data3\": 10.47, },\n{ \"id\": 2, \"timestamp\": \"2022-12-20T02:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.46, \"data3\": 10.07, },\n{ \"id\": 3, \"timestamp\": \"2022-12-20T03:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.20, \"data3\": 8.93, },\n{ \"id\": 4, \"timestamp\": \"2022-12-20T04:00:00.000Z\", \"data1\": 5.01, \"data2\": 10.41, \"data3\": 7.90, },\n{ \"id\": 5, \"timestamp\": \"2022-12-20T05:00:00.000Z\", \"data1\": 5.01, \"data2\": 11.04, \"data3\": 7.49, },\n{ \"id\": 6, \"timestamp\": \"2022-12-20T06:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.88, },\n{ \"id\": 7, \"timestamp\": \"2022-12-20T07:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.39, },\n{ \"id\": 8, \"timestamp\": \"2022-12-20T08:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 5.72, },\n{ \"id\": 9, \"timestamp\": \"2022-12-20T09:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 5.72, },\n{ \"id\": 10, \"timestamp\": \"2022-12-20T10:00:00.000Z\", \"data1\": 4.68, \"data2\": 11.41, \"data3\": 6.62, }]\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":120,"wires":[["69fe9ae270120706"]]},{"id":"928f4ec23ec08672","type":"inject","z":"30306197ead446be","name":"Redraw","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":80,"wires":[["08f4db4969c00428"]]},{"id":"69fe9ae270120706","type":"function","z":"30306197ead446be","name":"Format chart","func":"\nconst series = [\"line1\",\"line2\",\"line3\"]\nconst data_array = [\"data1\",\"data2\",\"data3\"]\nconst data = []\n\n\n\ndata_array.forEach((str, index) => {\n     data[index] = []\n    msg.payload.forEach(obj => { \n        data[index].push({ x: obj.timestamp, y: obj[str] }) })\n})\n\nmsg.payload = [\n    {\n        \"series\": series,\n        \"data\": data,\n        \"labels\": series\n    }\n]\nnode.send({payload:[]})\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":120,"wires":[["1b035f8b505e1e08","314f11b8ce2f85f3"]]},{"id":"1b035f8b505e1e08","type":"debug","z":"30306197ead446be","name":"debug 224","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":220,"wires":[]},{"id":"314f11b8ce2f85f3","type":"ui_chart","z":"30306197ead446be","name":"Chart","group":"a664f24e9358412a","order":8,"width":"8","height":"5","label":"Show/Hide Lines","chartType":"line","legend":"true","xformat":"auto","interpolate":"bezier","nodata":"No Data","dot":false,"ymin":"4","ymax":"12","removeOlder":"52","removeOlderPoints":"1000","removeOlderUnit":"604800","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#bf0000","#009500","#005fbd","#c0c0c0","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":930,"y":120,"wires":[[]]},{"id":"a664f24e9358412a","type":"ui_group","name":"Demo","tab":"7d501f2d3ff3af24","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"7d501f2d3ff3af24","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

p.s. I also added a more dynamic way to create the data array of arrays.

[jbudd]

Thanks @smanjunath211, I didn't know you could hide/show lines by clicking on the legend.
Unlike my buttons, you can hide all the lines this way and successfully unhide them too.

The empty array sort of works, though it briefly shows a blank chart and "No data" message.
And you taught me that the JSON inject lets you inject an array; squiggly brackets are not needed.

@E1cid 's empty array sneaks in by another door but has the same effect.
I have to contemplate your different way to format the data for the chart. I only recently learned the map() syntax.

This doesn't explain why my Reset button works when one line is still visible but not when all three are invisible.
When all three buttons are pressed to hide the lines, this is sent to the chart and somehow borks it.

[{
"series":["Line 1","Line 2","Line 3"],
"data":[[],[],[]],
"labels":[]
}]

So when Reset sends valid data, the chart is unable to recover.

But it can recover from this payload

msg.payload = [{
    "series": ["Line 1", "Line 2", "Line 3"],
    "data": [],
    "labels": []
}]
return msg;

So I should have avoided adding the data array in the first place for "invisible lines". I suspect that will lead to lines changing colour though?

[smanjunath211]

@jbudd

though it briefly shows a blank chart

well, it is brief than the page refresh that you are currently doing

you can set the delay time in trigger node to 1ms, you can get the screen back as fast as your system can support.

@jbudd

"No data" message

you can remove the text that appears before loading by removing input here