Ui_chart alternate (Apex chart ?) Just want the zoom feature in the graph

Dashboard
1

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}]

image

2

Did you try a search on the forum? Try using 'apex' and 'apex chart' and 'apexchart' and see what you find.

3

yes i did a lot of search, they all lead to apex webpage, no clue as to how to bring it in dashboard,
there was one post which referred to it, but no sample flow in the topic, so could not understand.
will give it one more try after office hours.

thank you

4

did you read thru this one?

5

I am not template node literate
The example given has the data built in the template node itself. I need to generate a line graph with external data. Will take me for ever to decipher that.
I was also exploring the same in another thread where a node was used to draw a graph, but i could not understand how to feed the data and what syntax was used. The creator of node has not been active since many years. So dead end.

https://discourse.nodered.org/t/ui-uplot-chart-from-stored-data-mysql-moved-to-grafana-iframe-now/75685?u=smanjunath211

I ended up using grafana with an i frame. But it has its own drawbacks.

So ...

6

Apexchart example Flow based on your data
(with some $random values added to simulated and test the chart update)

[{"id":"c0c284e2d249d05c","type":"change","z":"54efb553244c241f","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t   {\t       \"d\":\"2023-03-21T00:29:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:28:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1185+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:27:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:26:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:25:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:24:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:23:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:22:00.000Z\",\t       \"Temperature\":104 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:21:00.000Z\",\t       \"Temperature\":105 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:20:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:19:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:18:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:17:00.000Z\",\t       \"Temperature\":102 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:16:00.000Z\",\t       \"Temperature\":102 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:15:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:14:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:13:00.000Z\",\t       \"Temperature\":101 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:12:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-21T00:11:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:10:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:09:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-21T00:08:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:07:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:06:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:05:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:04:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:03:00.000Z\",\t       \"Temperature\":99,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:02:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:01:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:00:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:59:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:58:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:57:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:56:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:55:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:54:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:53:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1066\t   },\t   {\t       \"d\":\"2023-03-20T23:52:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:51:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:50:00.000Z\",\t       \"Temperature\":99,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":450\t   },\t   {\t       \"d\":\"2023-03-20T23:49:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:48:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:47:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1066\t   },\t   {\t       \"d\":\"2023-03-20T23:46:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:45:00.000Z\",\t       \"Temperature\":104+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:44:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:43:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:42:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:41:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:40:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:39:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:38:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:37:00.000Z\",\t       \"Temperature\":103+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:36:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:35:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:34:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:33:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:32:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:31:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:30:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":2540,"wires":[["48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":2540,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"54efb553244c241f","name":"debug 261","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":2480,"wires":[]},{"id":"afed9f5b8af7b455","type":"ui_template","z":"54efb553244c241f","group":"0df4552f9d69039d","name":"","order":1,"width":"12","height":"12","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n  (function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n     var options = {\n          series: msg.payload,\n          chart: {\n          type: 'line',\n          stacked: false,\n          // height: 350,\n          zoom: {\n            type: 'x',\n            enabled: true,\n            autoScaleYaxis: true\n          },\n          toolbar: {\n            autoSelected: 'zoom'\n          }\n        },\n         dataLabels: {\n           enabled: false\n         },\n         markers: {\n           size: 0,\n         },\n        title: {\n          text: 'Flow and Temp Data',\n          align: 'left'\n        },\n        // fill: {\n        //   type: 'gradient',\n        //   gradient: {\n        //     shadeIntensity: 1,\n        //     inverseColors: false,\n        //     opacityFrom: 0.5,\n        //     opacityTo: 0,\n        //     stops: [0, 90, 100]\n        //   },\n        // },\n         yaxis: {\n           labels: {\n             formatter: function (val) {\n               return val.toFixed(2);\n             },\n           },\n          // title: {\n          //   text: 'Price'\n          // },\n         },\n        xaxis: {\n          type: 'datetime',\n        },\n        // tooltip: {\n          // shared: false,\n          // y: {\n          //   formatter: function (val) {\n          //     return (val / 1000000).toFixed(0)\n          //   }\n          // }\n        // }\n        };\n\nsetTimeout( ()=> {\n\n    if(scope.chart){\n      scope.chart.updateOptions(options)\n    }\n    else {\n      scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n      scope.chart.render();\n    }\n    \n}, 1000)\n\n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":900,"y":2540,"wires":[[]]},{"id":"48b1a74d08f4027a","type":"change","z":"54efb553244c241f","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t       {\t           \"name\" : \"Holding Temperature\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.Temperature}\t    },\t       {\t           \"name\" : \"Divert Valve Status\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.m1}\t    },\t       {\t           \"name\" : \"Flow Rate\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.flow}\t    }\t]\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":2540,"wires":[["1dcfd28829eeec92","afed9f5b8af7b455"]]},{"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}]

image

2 Likes
7

I cant thank you enough... this is absolutely brilliant.

Hands Down GIFs | Tenor

the tooltip is blank when i move on the chart, is that a setting issue ?
image

8

i saw some problem with the styles also and i had to switch this setting
Use Anglular theme in ui_template

image

1 Like
9

i checked and found i also have the angular setting in ui_template already. i saw tooltip section in template node 'commented' i removed the comment, the tooltip separated to each series, but i still dont have values showing

10

probably because of the dark theme of your dashboard

Check this link from the Apexchart website how to configure the tooltip
I notice that there's a tooltip theme option but havent tried it

1 Like
11

sure, i will check that out.

again thank you so much, i had left hope.
will post back once i have complete solution, this is more than a starting point for me. you have pushed me almost to the finish line..

1 Like
12

it is indeed due to dark theme, i am able to get the tooltip in light mode.
however no amount of settings changed with input of Apexchart website (that is whatever i could understand) could show me tooltip in dark mode.

image
image

image
image356Ă—529 18.2 KB

image

same graph , in light and dark mode respectively.

could anyone help if they have this issue faced before ?

13

For options add

theme: {
            mode: 'dark'
          }
2 Likes
14

:grinning:

image

15

how do i pass the chart title dynamically, i tried {{msg.payload}} but it does not work it just shows
{{msg.payload}} literally

title: {
          text: 'Flow and Temp Data',
          align: 'left'
        },


title: {
          text: '{{msg.payload1}}',
          align: 'left'
        },

image

Edit: Bummer ;
I dont know why i was forcing {{ }} mustache template, just putting msg.payload1 did the trick.

        title: {
          text: msg.payload1,
          align: 'left'
        },

image

16

In your "Prepare Chart Data" Change node, add an extra property to you msg msg.chartTitle that will hold the chart title (we cant use msg.payload in this case because payload holds the actual series data so we use another property)

In the ui_template code, in the chart's options, simply assign the msg.chartTitle value to

title: {
          text: msg.chartTitle,
          align: 'left'
        },

Example

[{"id":"c0c284e2d249d05c","type":"change","z":"54efb553244c241f","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t   {\t       \"d\":\"2023-03-21T00:29:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:28:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1185+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:27:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:26:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:25:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:24:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:23:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:22:00.000Z\",\t       \"Temperature\":104 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:21:00.000Z\",\t       \"Temperature\":105 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:20:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:19:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:18:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1161\t   },\t   {\t       \"d\":\"2023-03-21T00:17:00.000Z\",\t       \"Temperature\":102 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:16:00.000Z\",\t       \"Temperature\":102 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:15:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:14:00.000Z\",\t       \"Temperature\":103 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:13:00.000Z\",\t       \"Temperature\":101 + $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:12:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-21T00:11:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:10:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500 + $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:09:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-21T00:08:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:07:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:06:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:05:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-21T00:04:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:03:00.000Z\",\t       \"Temperature\":99,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:02:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-21T00:01:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-21T00:00:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:59:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:58:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:57:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:56:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:55:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:54:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:53:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1066\t   },\t   {\t       \"d\":\"2023-03-20T23:52:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:51:00.000Z\",\t       \"Temperature\":101,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:50:00.000Z\",\t       \"Temperature\":99,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":450\t   },\t   {\t       \"d\":\"2023-03-20T23:49:00.000Z\",\t       \"Temperature\":100,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:48:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:47:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1066\t   },\t   {\t       \"d\":\"2023-03-20T23:46:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:45:00.000Z\",\t       \"Temperature\":104+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:44:00.000Z\",\t       \"Temperature\":104,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1090\t   },\t   {\t       \"d\":\"2023-03-20T23:43:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:42:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:41:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:40:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:39:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:38:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:37:00.000Z\",\t       \"Temperature\":103+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:36:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:35:00.000Z\",\t       \"Temperature\":103,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:34:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113\t   },\t   {\t       \"d\":\"2023-03-20T23:33:00.000Z\",\t       \"Temperature\":102,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:32:00.000Z\",\t       \"Temperature\":102+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1113+ $random()*80\t   },\t   {\t       \"d\":\"2023-03-20T23:31:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500+ $random()*80,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137\t   },\t   {\t       \"d\":\"2023-03-20T23:30:00.000Z\",\t       \"Temperature\":101+ $random()*80,\t       \"m1\":500,\t       \"r\":\"2023-03-19T18:30:00.000Z\",\t       \"flow\":1137+ $random()*80\t   }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":2440,"wires":[["48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":2440,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"54efb553244c241f","name":"debug 261","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":890,"y":2380,"wires":[]},{"id":"afed9f5b8af7b455","type":"ui_template","z":"54efb553244c241f","group":"0df4552f9d69039d","name":"","order":1,"width":"12","height":"12","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n  (function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n     var options = {\n          theme: { mode: \"dark\"},\n          series: msg.payload,\n          chart: {\n          type: 'line',\n          stacked: false,\n          // height: 350,\n          zoom: {\n            type: 'x',\n            enabled: true,\n            autoScaleYaxis: true\n          },\n          toolbar: {\n            autoSelected: 'zoom'\n          }\n        },\n         dataLabels: {\n           enabled: false\n         },\n         markers: {\n           size: 0,\n         },\n        title: {\n          text: msg.chartTitle,\n          align: 'left'\n        },\n        // fill: {\n        //   type: 'gradient',\n        //   gradient: {\n        //     shadeIntensity: 1,\n        //     inverseColors: false,\n        //     opacityFrom: 0.5,\n        //     opacityTo: 0,\n        //     stops: [0, 90, 100]\n        //   },\n        // },\n         yaxis: {\n           labels: {\n             formatter: function (val) {\n               return val.toFixed(2);\n             },\n           },\n          // title: {\n          //   text: 'Price'\n          // },\n         },\n        xaxis: {\n          type: 'datetime',\n        },\n        // tooltip: {\n          // shared: false,\n          // y: {\n          //   formatter: function (val) {\n          //     return (val / 1000000).toFixed(0)\n          //   }\n          // }\n        // }\n        };\n\nsetTimeout( ()=> {\n\n    if(scope.chart){\n      scope.chart.updateOptions(options)\n    }\n    else {\n      scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n      scope.chart.render();\n    }\n    \n}, 1000)\n\n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1020,"y":2440,"wires":[[]]},{"id":"48b1a74d08f4027a","type":"change","z":"54efb553244c241f","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t       {\t           \"name\" : \"Holding Temperature\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.Temperature}\t    },\t       {\t           \"name\" : \"Divert Valve Status\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.m1}\t    },\t       {\t           \"name\" : \"Flow Rate\",\t           \"data\" : payload.{\"x\": $.d, \"y\": $.flow}\t    }\t]\t","tot":"jsonata"},{"t":"set","p":"chartTitle","pt":"msg","to":"my Chart Title","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":2440,"wires":[["1dcfd28829eeec92","afed9f5b8af7b455"]]},{"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}]
1 Like
17

Yes, i realised that , i was assuming i need to use {{}} mustache template, and was not getting it right.,
i used the msg.payload1 and without {{}} and was successful.

Thank You.

1 Like
18

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