Looking to change the label of a bar chart or graph dynamically

Dashboard
,
1

I am looking to change the label of a bar chart or graph based on input from a flow.

My particular use case is I am using a single dashboard to show results of several metrics for a specific day, with a drop-down that changes the day. For example, on Monday, I want the label of the graph to say "Results for Monday", on Tuesday "Results for Tuesday". i have tried
msg.ui_control = {"label": "Results for Monday"}
but the label doesn't change.

Obviously this is an oversimplified example, but I am hoping it is possible. Thanks!

2

Here is an example, i have put all the data in the dropdown values, but it could come from a query to DB or api etc.
It should give you some idea how to change chart label and other chart data dynamically.

[{"id":"359274555ece5d4b","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"options","v":"[{\"one\":{\"monday\":[[1,2,3],[\"start\",\"midle\",\"finish\"]]}},{\"two\":{\"tuesday\":[[3,2,1],[\"start\",\"midle\",\"finish\"]]}}]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":470,"y":2520,"wires":[["c435eac0b164351e"]]},{"id":"c435eac0b164351e","type":"ui_dropdown","z":"b9860b4b9de8c8da","name":"","label":"","tooltip":"","place":"Select option","group":"2d4fe667.28f8ba","order":2,"width":0,"height":0,"passthru":true,"multiple":false,"options":[],"payload":"","topic":"topic","topicType":"msg","className":"","x":480,"y":2580,"wires":[["d3d538ae0688f56a"]]},{"id":"d3d538ae0688f56a","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"$keys($$.payload)","tot":"jsonata"},{"t":"set","p":"data","pt":"msg","to":"payload[msg.label][0]","tot":"msg"},{"t":"set","p":"labels","pt":"msg","to":"payload[msg.label][1]","tot":"msg"},{"t":"set","p":"payload","pt":"msg","to":"[{\"labels\":[],\"data\":[[]],\"series\":[]}]","tot":"json"},{"t":"move","p":"data","pt":"msg","to":"payload[0].data[0]","tot":"msg"},{"t":"move","p":"labels","pt":"msg","to":"payload[0].labels","tot":"msg"},{"t":"set","p":"payload[0].series[0]","pt":"msg","to":"label","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":2580,"wires":[["ef2c8d69b3a9bf4c"]]},{"id":"ef2c8d69b3a9bf4c","type":"ui_chart","z":"b9860b4b9de8c8da","name":"","group":"2d4fe667.28f8ba","order":40,"width":"6","height":6,"label":"Results for {{msg.label}}","chartType":"bar","legend":"false","xformat":"auto","interpolate":"linear","nodata":"No result returned","dot":false,"ymin":"","ymax":"","removeOlder":"120","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":true,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":830,"y":2580,"wires":[["f368dbbf258b08de"]]},{"id":"f368dbbf258b08de","type":"debug","z":"b9860b4b9de8c8da","name":"debug 14","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":980,"y":2580,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"18","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

How to import a flow

3

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