# Jsonata in function node-

**URL:** https://discourse.nodered.org/t/jsonata-in-function-node/89335
**Category:** General
**Tags:** function-node
**Created:** [7 July 2024 13:26 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335 "2024-07-07T13:26:46Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [7 July 2024 13:26 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/1 "2024-07-07T13:26:46Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7422631bd16dc1a7794e789d34eb725a7ce22035.png)

I have many such mysql query outputs to assign to flow context, the change node becomes very big and difficult to manage, what is the equivalent to use jsonata in a function node ?

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [7 July 2024 13:38 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/2 "2024-07-07T13:38:19Z")

</div>

RED.utils has two js methods to prepare jsonata and evaluate the prepared expression  
[https://nodered.org/docs/api/modules/v/0.20.0/@node-red\_util\_util.html#.prepareJSONataExpression](https://nodered.org/docs/api/modules/v/0.20.0/@node-red_util_util.html#.prepareJSONataExpression)  
[https://nodered.org/docs/api/modules/v/0.20.0/@node-red\_util\_util.html#.evaluateJSONataExpression](https://nodered.org/docs/api/modules/v/0.20.0/@node-red_util_util.html#.evaluateJSONataExpression)  
But you should be able to do it in function node without JSONata, just use Javascript.

Why not use a single flow context var to save all the dots in, you should be able to the recall them using `flow.` `var_name.dot1` etc. The saving to flow context could then be done in one expression. Could be more helpful here if you supplied the incoming data

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [7 July 2024 14:32 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/3 "2024-07-07T14:32:26Z")

</div>

> [@E1cid](#):
>
> Why not use a single flow context var to save all the dots in

it's deliberate (well, atleast as i have put the logic in the flow, it is required to break them into pieces, i am sure there is always a better way, happy to learn) I will try to give a sample data, so that i can get help in the function node. brb.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [7 July 2024 14:45 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/4 "2024-07-07T14:45:40Z")

</div>

> [@smanjunath211](#):
>
> it's deliberate (well, atleast as i have put the logic in the flow, it is required to break them into pieces, i am sure there is always a better way, happy to learn)

In base context or a a var is much the same. But easier to save to context and better grouped, so in context sidebar it is easier to view and collapsible to hide while viewing other context vars.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [7 July 2024 15:02 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/5 "2024-07-07T15:02:35Z")

</div>

Do you need them in context at all? The node red way is pass data in messages to where you need it.

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [7 July 2024 15:57 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/6 "2024-07-07T15:57:22Z")

</div>

> [@Colin](#):
>
> Do you need them in context at all?

I found it easier to save in flow context and recall them as the inputs are non-sequential, I could use join node, but somehow I am used to _set and get_.

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [7 July 2024 16:11 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/7 "2024-07-07T16:11:08Z")

</div>

> [@smanjunath211](#):
>
> I will try to give a sample data

I am trying to get a machine status bar (somewhat similar to _ui-state trail_ but no where near its functionality). green being running and red being stopped. (acheived through css ). i have set my mysql query itself to attach class to the `<td>` tag.

eventually i wish to 'merge' all the running statuses and stop statuses into contniuous bars and achieve on-click action. (way too ambitious at this point)

PS: I am sure you would find many amateurish design in the flow please bear with me.

```auto
[{"id":"d4e881f7d92c6a4b","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:27</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:26</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:25</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:24</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:23</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:22</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:21</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:20</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:19</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:18</div></td>\"}],[{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:17</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:16</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:15</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:14</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:13</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:12</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:11</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:10</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:09</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:08</div></td>\"}],[{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:07</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:06</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:05</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:04</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:03</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:02</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:01</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:00</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:59</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:58</div></td>\"}],[{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:57</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:56</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:55</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:54</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:53</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:52</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:51</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:50</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:49</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:48</div></td>\"}],[{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:47</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:46</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:45</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:44</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:43</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:42</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:41</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:40</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:39</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:38</div></td>\"}],[{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:37</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:36</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:35</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:34</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:33</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:32</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:31</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:30</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:29</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:28</div></td>\"}]]","payloadType":"json","x":3185,"y":1050,"wires":[["490db87c25d18caa"]]},{"id":"490db87c25d18caa","type":"change","z":"8aeac5104f2cecfe","name":"Set Flow Context","rules":[{"t":"set","p":"dot1","pt":"flow","to":"*.dot1","tot":"jsonata"},{"t":"set","p":"dot2","pt":"flow","to":"*.dot2","tot":"jsonata"},{"t":"set","p":"dot3","pt":"flow","to":"*.dot3","tot":"jsonata"},{"t":"set","p":"dot4","pt":"flow","to":"*.dot4","tot":"jsonata"},{"t":"set","p":"dot5","pt":"flow","to":"*.dot5","tot":"jsonata"},{"t":"set","p":"dot6","pt":"flow","to":"*.dot6","tot":"jsonata"},{"t":"set","p":"t1","pt":"flow","to":"*.t1","tot":"jsonata"},{"t":"set","p":"t2","pt":"flow","to":"*.t2","tot":"jsonata"},{"t":"set","p":"t3","pt":"flow","to":"*.t3","tot":"jsonata"},{"t":"set","p":"t4","pt":"flow","to":"*.t4","tot":"jsonata"},{"t":"set","p":"t5","pt":"flow","to":"*.t5","tot":"jsonata"},{"t":"set","p":"t6","pt":"flow","to":"*.t6","tot":"jsonata"},{"t":"set","p":"machine","pt":"flow","to":"JUICE LINE :-","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3465,"y":1050,"wires":[["82e3f308dec250e7"]]},{"id":"82e3f308dec250e7","type":"template","z":"8aeac5104f2cecfe","name":"TABLE SET","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<body>\n\n<!-- <th>{{{flow.machine}}}</th>\n<caption>{{flow.machine}} Last 60 minutes Status</caption>\n --> \n<table border = '0' cellpadding = \"0\">\n<th>{{{flow.machine}}}</th>\n{{{flow.t1.0}}}\n{{{flow.dot1.0}}}{{{flow.dot1.1}}}{{{flow.dot1.2}}}{{{flow.dot1.3}}}{{{flow.dot1.4}}}\n{{{flow.dot1.5}}}{{{flow.dot1.6}}}{{{flow.dot1.7}}}{{{flow.dot1.8}}}{{{flow.dot1.9}}}\n{{{flow.t2.0}}}\n{{{flow.dot2.0}}}{{{flow.dot2.1}}}{{{flow.dot2.2}}}{{{flow.dot2.3}}}{{{flow.dot2.4}}}\n{{{flow.dot2.5}}}{{{flow.dot2.6}}}{{{flow.dot2.7}}}{{{flow.dot2.8}}}{{{flow.dot2.9}}} \n{{{flow.t3.0}}} \n{{{flow.dot3.0}}}{{{flow.dot3.1}}}{{{flow.dot3.2}}}{{{flow.dot3.3}}}{{{flow.dot3.4}}}\n{{{flow.dot3.5}}}{{{flow.dot3.6}}}{{{flow.dot3.7}}}{{{flow.dot3.8}}}{{{flow.dot3.9}}} \n{{{flow.t4.0}}}\n{{{flow.dot4.0}}}{{{flow.dot4.1}}}{{{flow.dot4.2}}}{{{flow.dot4.3}}}{{{flow.dot4.4}}}\n{{{flow.dot4.5}}}{{{flow.dot4.6}}}{{{flow.dot4.7}}}{{{flow.dot4.8}}}{{{flow.dot4.9}}} \n{{{flow.t5.0}}}\n{{{flow.dot5.0}}}{{{flow.dot5.1}}}{{{flow.dot5.2}}}{{{flow.dot5.3}}}{{{flow.dot5.4}}}\n{{{flow.dot5.5}}}{{{flow.dot5.6}}}{{{flow.dot5.7}}}{{{flow.dot5.8}}}{{{flow.dot5.9}}} \n{{{flow.t6.0}}}\n{{{flow.dot6.0}}}{{{flow.dot6.1}}}{{{flow.dot6.2}}}{{{flow.dot6.3}}}{{{flow.dot6.4}}}\n{{{flow.dot6.5}}}{{{flow.dot6.6}}}{{{flow.dot6.7}}}{{{flow.dot6.8}}}{{{flow.dot6.9}}} \n{{{flow.t6.9}}}\n </tr>\n\n \n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"71\"></td></tr> \n\n\n</table>\n </body>\n","output":"str","x":3670,"y":1050,"wires":[["e27d0775fc48f270"]]},{"id":"e27d0775fc48f270","type":"ui_template","z":"8aeac5104f2cecfe","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3870,"y":1050,"wires":[[]]},{"id":"ef627a4df6559aca","type":"ui_template","z":"8aeac5104f2cecfe","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n}\n.m_on {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_off {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3825,"y":1000,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e64a5a2e1a81296b70e1bb417bd09aa99fc909b.png)

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [7 July 2024 21:57 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/8 "2024-07-07T21:57:18Z")

</div>

As @Colin suggests why move it all to context, you could just dynamically create the table in the template  
e.g

```auto
[{"id":"575be6088b54c8bb","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:27</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:26</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:25</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:24</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:23</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:22</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:21</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:20</div></td>\"},{\"dot1\":\"<td class='m_on'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:19</div></td>\"},{\"dot1\":\"<td class='m_off'>▄</td>\",\"t1\":\"<td class = 'rotate'><div>21:18</div></td>\"}],[{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:17</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:16</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:15</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:14</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:13</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:12</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:11</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:10</div></td>\"},{\"dot2\":\"<td class='m_off'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:09</div></td>\"},{\"dot2\":\"<td class='m_on'>▄</td>\",\"t2\":\"<td class = 'rotate'><div>21:08</div></td>\"}],[{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:07</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:06</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:05</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:04</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:03</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:02</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:01</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>21:00</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:59</div></td>\"},{\"dot3\":\"<td class='m_on'>▄</td>\",\"t3\":\"<td class = 'rotate'><div>20:58</div></td>\"}],[{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:57</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:56</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:55</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:54</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:53</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:52</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:51</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:50</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:49</div></td>\"},{\"dot4\":\"<td class='m_on'>▄</td>\",\"t4\":\"<td class = 'rotate'><div>20:48</div></td>\"}],[{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:47</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:46</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:45</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:44</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:43</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:42</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:41</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:40</div></td>\"},{\"dot5\":\"<td class='m_off'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:39</div></td>\"},{\"dot5\":\"<td class='m_on'>▄</td>\",\"t5\":\"<td class = 'rotate'><div>20:38</div></td>\"}],[{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:37</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:36</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:35</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:34</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:33</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:32</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:31</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:30</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:29</div></td>\"},{\"dot6\":\"<td class='m_on'>▄</td>\",\"t6\":\"<td class = 'rotate'><div>20:28</div></td>\"}]]","payloadType":"json","x":150,"y":20,"wires":[["c5e019eb649e8d50"]]},{"id":"c5e019eb649e8d50","type":"change","z":"d1395164b4eec73e","name":"correct object names","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload#$i.[[$.{\"dot\": $lookup($, \"dot\" & $string($i+1)), \t \"t\": $lookup($, \"t\" & $string($i+1))}]]\t","tot":"jsonata"},{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"},{"t":"set","p":"colspan","pt":"msg","to":"$count($$.payload.**)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":20,"wires":[["7dc21897748bb008","cec076d603fddd15"]]},{"id":"7dc21897748bb008","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table border = '0' cellpadding = \"0\">\n<th>{{{machine}}}:-</th>\n{{#payload}}\n {{{0.t}}} \n {{#.}}\n {{{dot}}}\n \n {{/.}}\n{{/payload}}\n<td>{{{last_time}}}</td>\n</tr> \n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"{{colspan}}\"></td></tr> \n</table>\n \n","output":"str","x":610,"y":20,"wires":[["92a656c0db91c226"]]},{"id":"cec076d603fddd15","type":"debug","z":"d1395164b4eec73e","name":"debug 2561","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":310,"y":80,"wires":[]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":80,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

Would be better to move all the html and css out of the input array. This is best as just data, you then add the html in the template. I have not done this as it would take to long to correct the input data.

I did add a JSONata to correct the input object names, as this makes the template much simpler. The template should be reactive to array input changes, know need to edit template, just the data input.

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [8 July 2024 01:43 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/9 "2024-07-08T01:43:40Z")

</div>

> [@E1cid](#):
>
> This is best to just be data,

below is the pure data feed, 1 being machine on and 0 being machine off.

```auto
[{"id":"2fbc4fafb3c315ef","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":0,\"t1\":\"06:59\"},{\"dot1\":0,\"t1\":\"06:58\"},{\"dot1\":1,\"t1\":\"06:57\"},{\"dot1\":1,\"t1\":\"06:56\"},{\"dot1\":1,\"t1\":\"06:55\"},{\"dot1\":1,\"t1\":\"06:54\"},{\"dot1\":1,\"t1\":\"06:53\"},{\"dot1\":1,\"t1\":\"06:52\"},{\"dot1\":1,\"t1\":\"06:51\"},{\"dot1\":1,\"t1\":\"06:50\"}],[{\"dot2\":1,\"t2\":\"06:49\"},{\"dot2\":1,\"t2\":\"06:48\"},{\"dot2\":1,\"t2\":\"06:47\"},{\"dot2\":1,\"t2\":\"06:46\"},{\"dot2\":1,\"t2\":\"06:45\"},{\"dot2\":1,\"t2\":\"06:44\"},{\"dot2\":1,\"t2\":\"06:43\"},{\"dot2\":1,\"t2\":\"06:42\"},{\"dot2\":1,\"t2\":\"06:41\"},{\"dot2\":1,\"t2\":\"06:40\"}],[{\"dot3\":1,\"t3\":\"06:39\"},{\"dot3\":1,\"t3\":\"06:38\"},{\"dot3\":1,\"t3\":\"06:37\"},{\"dot3\":1,\"t3\":\"06:36\"},{\"dot3\":1,\"t3\":\"06:34\"},{\"dot3\":1,\"t3\":\"06:33\"},{\"dot3\":1,\"t3\":\"06:32\"},{\"dot3\":1,\"t3\":\"06:31\"},{\"dot3\":1,\"t3\":\"06:30\"},{\"dot3\":1,\"t3\":\"06:29\"}],[{\"dot4\":1,\"t4\":\"06:28\"},{\"dot4\":1,\"t4\":\"06:27\"},{\"dot4\":1,\"t4\":\"06:26\"},{\"dot4\":1,\"t4\":\"06:25\"},{\"dot4\":1,\"t4\":\"06:24\"},{\"dot4\":1,\"t4\":\"06:23\"},{\"dot4\":0,\"t4\":\"06:22\"},{\"dot4\":0,\"t4\":\"06:21\"},{\"dot4\":0,\"t4\":\"06:20\"},{\"dot4\":0,\"t4\":\"06:19\"}],[{\"dot5\":1,\"t5\":\"06:18\"},{\"dot5\":1,\"t5\":\"06:17\"},{\"dot5\":1,\"t5\":\"06:16\"},{\"dot5\":1,\"t5\":\"06:15\"},{\"dot5\":0,\"t5\":\"06:14\"},{\"dot5\":0,\"t5\":\"06:13\"},{\"dot5\":0,\"t5\":\"06:12\"},{\"dot5\":0,\"t5\":\"06:11\"},{\"dot5\":0,\"t5\":\"06:10\"},{\"dot5\":0,\"t5\":\"06:09\"}],[{\"dot6\":0,\"t6\":\"06:08\"},{\"dot6\":0,\"t6\":\"06:07\"},{\"dot6\":0,\"t6\":\"06:06\"},{\"dot6\":0,\"t6\":\"06:05\"},{\"dot6\":0,\"t6\":\"06:04\"},{\"dot6\":0,\"t6\":\"06:03\"},{\"dot6\":0,\"t6\":\"06:02\"},{\"dot6\":0,\"t6\":\"06:01\"},{\"dot6\":0,\"t6\":\"06:00\"},{\"dot6\":0,\"t6\":\"05:59\"}]]","payloadType":"json","x":3330,"y":1025,"wires":[["a43262a5152e0786"]]}]

```

> [@E1cid](#):
>
> then add the html in the template

I can add one by one with an If Else statement, but not sure how to add the same with a _for next_ loop to cover the entire data array.

> [@E1cid](#):
>
> this makes the template much simpler.

Indeed, alas, it would take me weeks to even understand the same and replicate it.

> [@E1cid](#):
>
> The template should be reactive to array input changes

yes, i wanted to dynamically change the length of data array from 1 hour to 4 hour etc, but was stuck due to this. this is exactly what i wanted.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [8 July 2024 06:02 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/10 "2024-07-08T06:02:17Z")

</div>

The html is now in the template and a slight change in the css m\_1 and m\_0.

```auto
[{"id":"2fbc4fafb3c315ef","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot1\":0,\"t1\":\"06:59\"},{\"dot1\":0,\"t1\":\"06:58\"},{\"dot1\":1,\"t1\":\"06:57\"},{\"dot1\":1,\"t1\":\"06:56\"},{\"dot1\":1,\"t1\":\"06:55\"},{\"dot1\":1,\"t1\":\"06:54\"},{\"dot1\":1,\"t1\":\"06:53\"},{\"dot1\":1,\"t1\":\"06:52\"},{\"dot1\":1,\"t1\":\"06:51\"},{\"dot1\":1,\"t1\":\"06:50\"}],[{\"dot2\":1,\"t2\":\"06:49\"},{\"dot2\":1,\"t2\":\"06:48\"},{\"dot2\":1,\"t2\":\"06:47\"},{\"dot2\":1,\"t2\":\"06:46\"},{\"dot2\":1,\"t2\":\"06:45\"},{\"dot2\":1,\"t2\":\"06:44\"},{\"dot2\":1,\"t2\":\"06:43\"},{\"dot2\":1,\"t2\":\"06:42\"},{\"dot2\":1,\"t2\":\"06:41\"},{\"dot2\":1,\"t2\":\"06:40\"}],[{\"dot3\":1,\"t3\":\"06:39\"},{\"dot3\":1,\"t3\":\"06:38\"},{\"dot3\":1,\"t3\":\"06:37\"},{\"dot3\":1,\"t3\":\"06:36\"},{\"dot3\":1,\"t3\":\"06:34\"},{\"dot3\":1,\"t3\":\"06:33\"},{\"dot3\":1,\"t3\":\"06:32\"},{\"dot3\":1,\"t3\":\"06:31\"},{\"dot3\":1,\"t3\":\"06:30\"},{\"dot3\":1,\"t3\":\"06:29\"}],[{\"dot4\":1,\"t4\":\"06:28\"},{\"dot4\":1,\"t4\":\"06:27\"},{\"dot4\":1,\"t4\":\"06:26\"},{\"dot4\":1,\"t4\":\"06:25\"},{\"dot4\":1,\"t4\":\"06:24\"},{\"dot4\":1,\"t4\":\"06:23\"},{\"dot4\":0,\"t4\":\"06:22\"},{\"dot4\":0,\"t4\":\"06:21\"},{\"dot4\":0,\"t4\":\"06:20\"},{\"dot4\":0,\"t4\":\"06:19\"}],[{\"dot5\":1,\"t5\":\"06:18\"},{\"dot5\":1,\"t5\":\"06:17\"},{\"dot5\":1,\"t5\":\"06:16\"},{\"dot5\":1,\"t5\":\"06:15\"},{\"dot5\":0,\"t5\":\"06:14\"},{\"dot5\":0,\"t5\":\"06:13\"},{\"dot5\":0,\"t5\":\"06:12\"},{\"dot5\":0,\"t5\":\"06:11\"},{\"dot5\":0,\"t5\":\"06:10\"},{\"dot5\":0,\"t5\":\"06:09\"}],[{\"dot6\":0,\"t6\":\"06:08\"},{\"dot6\":0,\"t6\":\"06:07\"},{\"dot6\":0,\"t6\":\"06:06\"},{\"dot6\":0,\"t6\":\"06:05\"},{\"dot6\":0,\"t6\":\"06:04\"},{\"dot6\":0,\"t6\":\"06:03\"},{\"dot6\":0,\"t6\":\"06:02\"},{\"dot6\":0,\"t6\":\"06:01\"},{\"dot6\":0,\"t6\":\"06:00\"},{\"dot6\":0,\"t6\":\"05:59\"}]]","payloadType":"json","x":150,"y":20,"wires":[["c5e019eb649e8d50"]]},{"id":"c5e019eb649e8d50","type":"change","z":"d1395164b4eec73e","name":"correct object names","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload#$i.[[$.{\"on\": $lookup($, \"dot\" & $string($i+1)), \t \"time\": $lookup($, \"t\" & $string($i+1)),\t \"id\": \"dot\" & $string($i+1)}]]\t","tot":"jsonata"},{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].time","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":20,"wires":[["7dc21897748bb008","cec076d603fddd15"]]},{"id":"7dc21897748bb008","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table border = '0' cellpadding = \"0\">\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class = 'rotate'><div>{{{0.time}}}</div></td>\n{{#.}}\n <td class='m_{{{on}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class = 'rotate'><div>{{{last_time}}}</div></td>\n</tr>\n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":610,"y":20,"wires":[["92a656c0db91c226"]]},{"id":"cec076d603fddd15","type":"debug","z":"d1395164b4eec73e","name":"debug 2561","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":330,"y":120,"wires":[]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"30","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n}\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":30,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

If you can change the data to something like this, there would be no need for the correction jsonata

```auto
[
    [
        {
            "on": 0,
            "time": "06:59",
            "id": "dot1"
        },
        {
            "on": 0,
            "time": "06:58",
            "id": "dot1"
        }
    ],
    [
        {
            "on": 1,
            "time": "06:49",
            "id": "dot2"
        },
        {
            "on": 1,
            "time": "06:48",
            "id": "dot2"
        }
    ]
]

```

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [8 July 2024 06:40 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/11 "2024-07-08T06:40:31Z")

</div>

> [@E1cid](#):
>
> you can change the data to something like this

so instead of dot1, dot2, t1, t2 etc, keeping all of them as dot, t, and then add id as 1, 2, 3, 4, etc. ? I see the logic, but unable to understand how you would use them to arrange the data. hope i have given you below the correct sample data as requested.

I am very grateful, you are helping me understand and learn new things.

```auto
[{"id":"fe7c401dce8737f3","type":"inject","z":"8aeac5104f2cecfe","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1},{\"dot\":1,\"t\":\"11:51\",\"id\":1},{\"dot\":1,\"t\":\"11:50\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2},{\"dot\":1,\"t\":\"11:41\",\"id\":2},{\"dot\":1,\"t\":\"11:40\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3},{\"dot\":1,\"t\":\"11:31\",\"id\":3},{\"dot\":1,\"t\":\"11:30\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4},{\"dot\":0,\"t\":\"11:21\",\"id\":4},{\"dot\":0,\"t\":\"11:20\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5},{\"dot\":0,\"t\":\"11:11\",\"id\":5},{\"dot\":0,\"t\":\"11:10\",\"id\":5}],[{\"dot\":0,\"t\":\"11:09\",\"id\":6},{\"dot\":1,\"t\":\"11:08\",\"id\":6},{\"dot\":1,\"t\":\"11:07\",\"id\":6},{\"dot\":1,\"t\":\"11:06\",\"id\":6},{\"dot\":1,\"t\":\"11:05\",\"id\":6},{\"dot\":1,\"t\":\"11:04\",\"id\":6},{\"dot\":1,\"t\":\"11:03\",\"id\":6},{\"dot\":1,\"t\":\"11:02\",\"id\":6},{\"dot\":1,\"t\":\"11:01\",\"id\":6},{\"dot\":1,\"t\":\"11:00\",\"id\":6}]]","payloadType":"json","x":3195,"y":1225,"wires":[["e9d7757fbbe951cd"]]}]

```

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [8 July 2024 06:46 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/12 "2024-07-08T06:46:47Z")

</div>

This explains how the  
`{{#payload}} blah {{/payload}}` iterates over an array. [mustache(5) - Logic-less templates.](https://mustache.github.io/mustache.5.html) look at `Non-Empty Lists` section. They can be nested as in the template in my example

example flow using latest example data but reduce times and machines. css needs correcting for rotate div, i will leave that for you to sort.

```auto
[{"id":"fe7c401dce8737f3","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5}]]","payloadType":"json","x":190,"y":180,"wires":[["f71b56f55b67a833"]]},{"id":"f71b56f55b67a833","type":"change","z":"d1395164b4eec73e","name":"select last time","rules":[{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":180,"wires":[["da1c6f731811a8d8"]]},{"id":"da1c6f731811a8d8","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table>\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class = 'rotate'><div>{{{0.t}}}</div></td>\n{{#.}}\n <td class='m_{{{dot}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class = 'rotate'><div>{{{last_time}}}</div></td>\n</tr>\n<tr height = \"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":590,"y":180,"wires":[["92a656c0db91c226"]]},{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"27","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n.rotate {\n height:40px;\n font-size:12px;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n width: 1.0em;\n}\n.rotate div {\n -moz-transform: rotate(-90.0deg); /* FF3.5+ */\n -o-transform: rotate(-90.0deg); /* Opera 10.5 */\n -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */\n -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)\"; /* IE8 */\n margin-left: -10em;\n margin-right: -10em;\n} \n\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\ntable {\n border: 0;\n cellpadding: 0;\n width:auto;\n white-space:nowrap\n}\ntr {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \nth {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \ntd {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \n\n\n\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":30,"wires":[[]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

[edit]  
Removed the div which was causing issues with spacing, slight change on css template

```auto
[{"id":"92a656c0db91c226","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"TRAIL CHART","order":4,"width":"27","height":"4","format":"\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":620,"y":80,"wires":[[]]},{"id":"f3d623295fd5b403","type":"ui_template","z":"d1395164b4eec73e","group":"a4ea32cfdc7814fc","name":"CSS","order":1,"width":"1","height":"1","format":"<style>\n\n.large-font {\nfont-size:2.7em;\ncolor: white;\nfont-family: \"Trebuchet MS\";\ntext-align: center;}\n\n\n.medium-font {\nfont-size: 1.3em; text-align: center;/* Increase font size by 1.5 times */\n}\n\n.another-large {\n font-size: 25px; vertical-align:\"middle\" ; text-align: center; /* Set a specific pixel size */\n}\n\n.smallfont {\nfont-size:12px;\ncolor: cyan;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.red {\nfont-size:20px;\ncolor: red;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.orange {\nfont-size:20px;\ncolor: orange;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.green {\nfont-size:20px;\ncolor: #55ff55;\nfont-family: \"courier new\";\ntext-align: center;\n}\n\n.shifts {\nfont-size:21px;\ncolor: white;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hours {\nfont-size:20px;\ncolor: #FBFF00;\nbackground:#505050;\nheight:28px;\nfont-family: \"courier\";\ntext-align: right;\n}\n\n.hour0 {font-size:22px;color: white;background:darkgreen;height:30px;font-family: \"courier\";text-align: right;}\n.hour1 {font-size:20px;color: #FBFF00;background:#808080;height:28px;font-family: \"courier\";text-align: right;}\n.hour2 {font-size:20px;color: #FBFF00;background:#707070;height:28px;font-family: \"courier\";text-align: right;}\n.hour3 {font-size:20px;color: #FBFF00;background:#606060;height:28px;font-family: \"courier\";text-align: right;}\n.hour4 {font-size:20px;color: #FBFF00;background:#505050;height:28px;font-family: \"courier\";text-align: right;}\n.hour5 {font-size:20px;color: #FBFF00;background:#404040;height:28px;font-family: \"courier\";text-align: right;}\n.hour6 {font-size:20px;color: #FBFF00;background:#303030;height:28px;font-family: \"courier\";text-align: right;}\n.hour7 {font-size:20px;color: #FBFF00;background:#202020;height:28px;font-family: \"courier\";text-align: right;}\n\n\n.smallfont1 {\nfont-size: 12px; color:yellow ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n\n.smallfont2 {\ncolor:grey ; font-family: \"verdana\" ; text-align: center; /* Set a specific pixel\nsize */\n}\n.another-large1 {\nfont-size: 20px; color: blue ;text-align: right;/* Set a specific pixel size */\n}\n\n.container {\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\n\n}\n\n.time {\nfont-size:8px;\ncolor: yellow;\nfont-family: \"courier narrow\";\ntext-align: center;\n}\n\n.m_1 {\nfont-size:25px;\ncolor: green;\nfont-family: \"courier\";\ntext-align: center;\n}\n.m_0 {\nfont-size:25px;\ncolor: red;\nfont-family: \"courier\";\ntext-align: center;\n}\n\ntable {\n border: 0;\n cellpadding: 0;\n width: 0.1%;\n white-space: nowrap:\n}\ntr {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \nth {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \ntd {\n border: 0;\n cellpadding: 0;\n width:0.1%;\n white-space: nowrap;\n} \n\n .rotate {\n font-size:10px;\n width:0.1%;\n white-space:nowrap;\n -webkit-transform: rotate(270deg);\n -moz-transform: rotate(270deg);\n -o-transform: rotate(270deg);\n writing-mode: lr-tb;\n }\n\n\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":80,"wires":[[]]},{"id":"fe7c401dce8737f3","type":"inject","z":"d1395164b4eec73e","name":"Sample Data from Mysql Query","props":[{"p":"payload"},{"p":"machine","v":"JUICE LINE","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"dot\":1,\"t\":\"11:59\",\"id\":1},{\"dot\":1,\"t\":\"11:58\",\"id\":1},{\"dot\":1,\"t\":\"11:57\",\"id\":1},{\"dot\":1,\"t\":\"11:56\",\"id\":1},{\"dot\":1,\"t\":\"11:55\",\"id\":1},{\"dot\":1,\"t\":\"11:54\",\"id\":1},{\"dot\":1,\"t\":\"11:53\",\"id\":1},{\"dot\":1,\"t\":\"11:52\",\"id\":1}],[{\"dot\":1,\"t\":\"11:49\",\"id\":2},{\"dot\":1,\"t\":\"11:48\",\"id\":2},{\"dot\":1,\"t\":\"11:47\",\"id\":2},{\"dot\":1,\"t\":\"11:46\",\"id\":2},{\"dot\":1,\"t\":\"11:45\",\"id\":2},{\"dot\":1,\"t\":\"11:44\",\"id\":2},{\"dot\":1,\"t\":\"11:43\",\"id\":2},{\"dot\":1,\"t\":\"11:42\",\"id\":2}],[{\"dot\":1,\"t\":\"11:39\",\"id\":3},{\"dot\":1,\"t\":\"11:38\",\"id\":3},{\"dot\":1,\"t\":\"11:37\",\"id\":3},{\"dot\":1,\"t\":\"11:36\",\"id\":3},{\"dot\":1,\"t\":\"11:35\",\"id\":3},{\"dot\":1,\"t\":\"11:34\",\"id\":3},{\"dot\":1,\"t\":\"11:33\",\"id\":3},{\"dot\":1,\"t\":\"11:32\",\"id\":3}],[{\"dot\":1,\"t\":\"11:29\",\"id\":4},{\"dot\":0,\"t\":\"11:28\",\"id\":4},{\"dot\":0,\"t\":\"11:27\",\"id\":4},{\"dot\":0,\"t\":\"11:26\",\"id\":4},{\"dot\":0,\"t\":\"11:25\",\"id\":4},{\"dot\":0,\"t\":\"11:24\",\"id\":4},{\"dot\":0,\"t\":\"11:23\",\"id\":4},{\"dot\":0,\"t\":\"11:22\",\"id\":4}],[{\"dot\":0,\"t\":\"11:19\",\"id\":5},{\"dot\":0,\"t\":\"11:18\",\"id\":5},{\"dot\":0,\"t\":\"11:17\",\"id\":5},{\"dot\":0,\"t\":\"11:16\",\"id\":5},{\"dot\":0,\"t\":\"11:15\",\"id\":5},{\"dot\":0,\"t\":\"11:14\",\"id\":5},{\"dot\":0,\"t\":\"11:13\",\"id\":5},{\"dot\":0,\"t\":\"11:12\",\"id\":5}]]","payloadType":"json","x":190,"y":180,"wires":[["f71b56f55b67a833"]]},{"id":"f71b56f55b67a833","type":"change","z":"d1395164b4eec73e","name":"select last time","rules":[{"t":"set","p":"last_time","pt":"msg","to":"$$.payload[-1][-1].t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":180,"wires":[["da1c6f731811a8d8"]]},{"id":"da1c6f731811a8d8","type":"template","z":"d1395164b4eec73e","name":"TABLE SET","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table>\n<th>{{{machine}}}:-</th>\n{{#payload}}\n<td class=\"rotate\">{{{0.t}}}</td>\n{{#.}}\n <td class='m_{{{dot}}}'>▄</td>\n{{/.}}\n{{/payload}}\n<td class=\"rotate\">{{{last_time}}}</td>\n</tr>\n<tr height=\"2px\" bgcolor=\"orange\"> <td colspan=\"100%\"></td></tr>\n</table>","output":"str","x":590,"y":180,"wires":[["92a656c0db91c226"]]},{"id":"a4ea32cfdc7814fc","type":"ui_group","name":"TRAIL CHART","tab":"fbe9cc4da47a8d17","order":3,"disp":false,"width":"30","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_8 Jul 2024 09_49_29 BST](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/9282c14a5c9be7d63e9fb0e2ad252c10f3e9123f.png)

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [8 July 2024 08:27 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/13 "2024-07-08T08:27:12Z")

</div>

Amazing, now the code became very concise. I will take time to understand the logic/flow. Snack for my brain for weekend!  
A lot of CSS nodes got duplicated while trying out, so getting strange results in display. will sort out and post the final flow here for any one following this topic.

Thanks very much!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 July 2024 08:27 UTC](https://discourse.nodered.org/t/jsonata-in-function-node/89335/14 "2024-07-22T08:27:49Z")

</div>

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