Jsonata in function node-

image

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 ?

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#.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

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.

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.

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

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.

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.

[{"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}]

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

[{"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.

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

[{"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"]]}]

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.

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

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.

The html is now in the template and a slight change in the css m_1 and m_0.

[{"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

[
    [
        {
            "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"
        }
    ]
]

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.

[{"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"]]}]

This explains how the
{{#payload}} blah {{/payload}} iterates over an array. mustache(5) - Logic-less templates. 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.

[{"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

[{"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}]

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!

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