I have a ui_chart node in the dashboard, which is working fine. the data is fed from a mysql query , processed and is displayed as expected. attaching a sample data and flow here
i want to have zoom feature and i tried many things, most of the suggestions were to use apex chart. unfortunately i could not find any working example of how to get a apex chart from a template node and feed my example data into it.
any help is appreciated.
[{"id":"84007d4dbb2b8f8f","type":"change","z":"cdf172901326e0c2","name":"Prepare Chart Title","rules":[{"t":"set","p":"gdate","pt":"msg","to":"FLOW AND TEMP DATA","tot":"str"},{"t":"set","p":"limit","pt":"msg","to":"(TIME RANGE HERE)","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":3360,"wires":[["f5049a5cd7fd020d"]]},{"id":"48b1a74d08f4027a","type":"change","z":"cdf172901326e0c2","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\t \"series\": [\"Holding Temperature\",\"Divert Valve Status\",\"Flow Rate\"],\t \"labels\": [\"DegC\"],\t \"data\": [\t [payload.{\"x\": d,\"y\": $.\"Temperature\"}],\t [payload.{\"x\": d,\"y\": $.\"m1\"}],\t [payload.{\"x\": d,\"y\": $.\"flow\"}]\t ]\t}]\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3360,"wires":[["84007d4dbb2b8f8f"]]},{"id":"f5049a5cd7fd020d","type":"ui_chart","z":"cdf172901326e0c2","name":"Line Graph","group":"0df4552f9d69039d","order":17,"width":"12","height":"10","label":"<font size = 4><font color = yellow> {{gdate}}<font size = 2> <font color = white> ({{limit}})","chartType":"line","legend":"true","xformat":"DD MMM-HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#db0f19","#4bf901","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":790,"y":3360,"wires":[[]]},{"id":"c0c284e2d249d05c","type":"change","z":"cdf172901326e0c2","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"d\":\"2023-03-21T00:29:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:28:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1185},{\"d\":\"2023-03-21T00:27:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:26:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:25:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:24:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:23:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:22:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:21:00.000Z\",\"Temperature\":105,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:20:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:19:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:18:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:17:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:16:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:15:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:14:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:13:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:12:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-21T00:11:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:10:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:09:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-21T00:08:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:07:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:06:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:05:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:04:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:03:00.000Z\",\"Temperature\":99,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:02:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:01:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:00:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:59:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:58:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:57:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:56:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:55:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:54:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:53:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1066},{\"d\":\"2023-03-20T23:52:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:51:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:50:00.000Z\",\"Temperature\":99,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":450},{\"d\":\"2023-03-20T23:49:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:48:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:47:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1066},{\"d\":\"2023-03-20T23:46:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:45:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:44:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:43:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:42:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:41:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:40:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:39:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:38:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:37:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:36:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:35:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:34:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:33:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:32:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:31:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:30:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":3280,"wires":[["1dcfd28829eeec92","48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"cdf172901326e0c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":3280,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"cdf172901326e0c2","name":"debug 261","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":3280,"wires":[]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":2,"disabled":false,"hidden":false}]