HTML Table- dynamically change the selected row font color

Dashboard
,
1

I have a html table I generate from flow.context variables. I am able to currently make the selected row font bold to highlight by using <strong></strong> html tags, i want to do the same with font color, but unable to do.
a little help solicited.

[{"id":"75338d9bb0c27ede","type":"inject","z":"47da0e9a083f3b25","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<!DOCTYPE html>         <html>         <body>                          <table border=\"1\" align=\"center\" cellpadding=\"1px\">                  <thead>                              <tr>                         <th >06:36:23</th>                         <th ;>CR3</th><th ;>MSP1</th><th ;>BTP</th><th ;>SP4</th>                         <th ;>SP3</th><th ;>PFSL</th><th ;>PFSR</th><th ;>CR1</th>                         <th ;>JUC</th><th ;>CFT</th><th ;>14T</th><th ;>12T</th>                         <th ;>BTP2</th><th ;>BTP3</th><th ;>SP5</th><th ;>AP2</th>                         <th ;>MSP2</th><th ;>BAGR</th><th ;>DIP</th>                     </tr>                                                  <tr>                         <th width=\"120px\";></th>                         <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>                         <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>                         <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>                         <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>                         <th width=80px;></th><th width=80px;></th><th width=80px;></th>                     </tr>                      <tr>                         <td> <strong>06:00 to 07:00</strong></td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>1122</td><td ;><strong>4</td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>0</td>                         <td ;><strong>0</td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>34</td><td ;><strong>1213</td><td ;><strong>0</td><td ;><strong>0</td><td ;><strong>0</td><td><strong>0</td><td ;><strong>0</td>                     </tr>                     <tr>                         <td> 23:00 to 00:00</td><td >0</td><td >0</td><td >1784</td><td >1072</td><td >0</td><td >1135</td><td >1069</td><td >699</td><td >7268</td>                         <td >0</td><td >0</td><td >0</td><td >4721</td><td >4418</td><td >0</td><td >0</td><td >0</td><td> 96</td><td >0</td>                     </tr>                     <tr >                         <td> 00:00 to 01:00</td><td >0</td><td >0</td><td >2131</td><td >403</td><td >0</td><td >421</td><td >386</td><td >310</td><td >2110</td>                         <td >0</td><td >0</td><td >0</td><td >6284</td><td >6136</td><td >0</td><td >0</td><td >0</td><td >157</td><td >0</td>                     </tr>                     <tr>                         <td> 01:00 to 02:00</td><td >0</td><td >0</td><td >1</td><td >953</td><td >0</td><td >873</td><td >837</td><td >299</td><td >8414</td>                         <td >0</td><td >0</td><td >0</td><td >5262</td><td >6284</td><td >0</td><td >0</td><td >0</td><td >107</td><td >0</td>                     </tr>                     <tr>                         <td> 02:00 to 03:00</td><td >0</td><td >0</td><td >12</td><td >1090</td><td >0</td><td >278</td><td >257</td><td >412</td><td >3642</td>                         <td >0</td><td >0</td><td >0</td><td >5253</td><td >6167</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>                     </tr>                     <tr>                         <td> 03:00 to 04:00</td><td >0</td><td >0</td><td >323</td><td >221</td><td >0</td><td >274</td><td >249</td><td >8</td><td >5770</td>                         <td >0</td><td >0</td><td >0</td><td >2699</td><td >3664</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>                     </tr>                     <tr>                         <td> 04:00 to 05:00</td><td >0</td><td >0</td><td >1631</td><td >1267</td><td >0</td><td >858</td><td >827</td><td >0</td><td >629</td>                         <td >0</td><td >0</td><td >0</td><td >5197</td><td >5524</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>                     </tr>                     <tr>                         <td> 05:00 to 06:00</td><td >0</td><td >0</td><td >3600</td><td >1003</td><td >0</td><td >930</td><td >944</td><td >0</td><td >0</td>                         <td >0</td><td >0</td><td >31</td><td >5835</td><td >6260</td><td >0</td><td >0</td><td >0</td><td >90</td><td >0</td>                     </tr>                                        </thead>                          <tbody>                         </tbody>             </table>                  </body>         </html>","payloadType":"str","x":2530,"y":1340,"wires":[["84f944cb1b590ce7","9a1039149fb26658"]]},{"id":"9a1039149fb26658","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"","order":2,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2870,"y":1340,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
2

The format you are offering as an example, does not lend itself to easy viewing.
Maybe put it in an template node on multiple lines.

3 
<!DOCTYPE html>
        <html>
        <body>
            
            <table border="1" align="center" cellpadding="1px">

                <thead>
                    
        <tr>
                        <th >11:28:04</th>
                        <th ;>CR3</th><th ;>MSP1</th><th ;>BTP</th><th ;>SP4</th>
                        <th ;>SP3</th><th ;>PFSL</th><th ;>PFSR</th><th ;>CR1</th>
                        <th ;>JUC</th><th ;>CFT</th><th ;>14T</th><th ;>12T</th>
                        <th ;>BTP2</th><th ;>BTP3</th><th ;>SP5</th><th ;>AP2</th>
                        <th ;>MSP2</th><th ;>BAGR</th><th ;>DIP</th>
                    </tr>
                    
                            <tr>
                        <th width="120px";></th>
                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>
                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>
                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>
                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>
                        <th width=80px;></th><th width=80px;></th><th width=80px;></th>
                    </tr>

                    <tr>
                        <td> 06:00 to 07:00</td><td ;>0</td><td ;>0</td><td ;>2307</td><td ;>635</td><td ;>0</td><td ;>210</td><td ;>203</td><td ;>0</td><td ;>0</td>
                        <td ;>0</td><td ;>0</td><td ;>0</td><td ;>2673</td><td ;>3853</td><td ;>0</td><td ;>0</td><td ;>0</td><td>0</td><td ;>0</td>
                    </tr>
                    <tr>
                        <td> 07:00 to 08:00</td><td >0</td><td >0</td><td >3203</td><td >649</td><td >0</td><td >836</td><td >817</td><td >0</td><td >0</td>
                        <td >0</td><td >0</td><td >0</td><td >6600</td><td >6600</td><td >0</td><td >0</td><td >0</td><td> 0</td><td >0</td>
                    </tr>
                    <tr >
                        <td> 08:00 to 09:00</td><td >0</td><td >0</td><td >2215</td><td >738</td><td >43</td><td >74</td><td >72</td><td >0</td><td >0</td>
                        <td >0</td><td >0</td><td >0</td><td >6600</td><td >6600</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>
                    </tr>
                    <tr>
                        <td> 09:00 to 10:00</td><td >0</td><td >0</td><td >3600</td><td >0</td><td >140</td><td >1028</td><td >985</td><td >2</td><td >1</td>
                        <td >0</td><td >0</td><td >0</td><td >5428</td><td >5408</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>
                    </tr>
                    <tr>
                        <td> 10:00 to 11:00</td><td ><strong>0</td><td ><strong>0</td><td ><strong>3253</td><td ><strong>309</td><td ><strong>283</td><td ><strong>612</td><td ><strong>598</td><td ><strong>24</td><td ><strong>7</td>
                        <td ><strong>0</td><td ><strong>0</td><td ><strong>93</td><td ><strong>6491</td><td ><strong>6490</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td>
                    </tr>
                    <tr>
                        <td> <strong>11:00 to 12:00</strong></td><td ><strong>0</td><td ><strong>0</td><td ><strong>1620</td><td ><strong>0</td><td ><strong>61</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>1090</td>
                        <td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>2970</td><td ><strong>2971</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td>
                    </tr>
                    <tr>
                        <td> 04:00 to 05:00</td><td >0</td><td >0</td><td >1631</td><td >1267</td><td >0</td><td >858</td><td >827</td><td >0</td><td >629</td>
                        <td >0</td><td >0</td><td >0</td><td >5197</td><td >5524</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>
                    </tr>
                    <tr>
                        <td> 05:00 to 06:00</td><td >0</td><td >0</td><td >3600</td><td >1003</td><td >0</td><td >930</td><td >944</td><td >0</td><td >0</td>
                        <td >0</td><td >0</td><td >31</td><td >5835</td><td >6260</td><td >0</td><td >0</td><td >0</td><td >90</td><td >0</td>
                    </tr>
                    


                </thead>
        
                <tbody>
       
                </tbody>
            </table>
        
        </body>
        </html>
4 
[{"id":"480e6a499c420347","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"","order":2,"width":0,"height":0,"format":"<!DOCTYPE html>\n        <html>\n        <body>\n            \n            <table border=\"1\" align=\"center\" cellpadding=\"1px\">\n\n                <thead>\n                    \n        <tr>\n                        <th >11:28:04</th>\n                        <th ;>CR3</th><th ;>MSP1</th><th ;>BTP</th><th ;>SP4</th>\n                        <th ;>SP3</th><th ;>PFSL</th><th ;>PFSR</th><th ;>CR1</th>\n                        <th ;>JUC</th><th ;>CFT</th><th ;>14T</th><th ;>12T</th>\n                        <th ;>BTP2</th><th ;>BTP3</th><th ;>SP5</th><th ;>AP2</th>\n                        <th ;>MSP2</th><th ;>BAGR</th><th ;>DIP</th>\n                    </tr>\n                    \n                            <tr>\n                        <th width=\"120px\";></th>\n                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>\n                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>\n                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>\n                        <th width=80px;></th><th width=80px;></th><th width=80px;></th><th width=80px;></th>\n                        <th width=80px;></th><th width=80px;></th><th width=80px;></th>\n                    </tr>\n\n                    <tr>\n                        <td> 06:00 to 07:00</td><td ;>0</td><td ;>0</td><td ;>2307</td><td ;>635</td><td ;>0</td><td ;>210</td><td ;>203</td><td ;>0</td><td ;>0</td>\n                        <td ;>0</td><td ;>0</td><td ;>0</td><td ;>2673</td><td ;>3853</td><td ;>0</td><td ;>0</td><td ;>0</td><td>0</td><td ;>0</td>\n                    </tr>\n                    <tr>\n                        <td> 07:00 to 08:00</td><td >0</td><td >0</td><td >3203</td><td >649</td><td >0</td><td >836</td><td >817</td><td >0</td><td >0</td>\n                        <td >0</td><td >0</td><td >0</td><td >6600</td><td >6600</td><td >0</td><td >0</td><td >0</td><td> 0</td><td >0</td>\n                    </tr>\n                    <tr >\n                        <td> 08:00 to 09:00</td><td >0</td><td >0</td><td >2215</td><td >738</td><td >43</td><td >74</td><td >72</td><td >0</td><td >0</td>\n                        <td >0</td><td >0</td><td >0</td><td >6600</td><td >6600</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>\n                    </tr>\n                    <tr>\n                        <td> 09:00 to 10:00</td><td >0</td><td >0</td><td >3600</td><td >0</td><td >140</td><td >1028</td><td >985</td><td >2</td><td >1</td>\n                        <td >0</td><td >0</td><td >0</td><td >5428</td><td >5408</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>\n                    </tr>\n                    <tr>\n                        <td> 10:00 to 11:00</td><td ><strong>0</td><td ><strong>0</td><td ><strong>3253</td><td ><strong>309</td><td ><strong>283</td><td ><strong>612</td><td ><strong>598</td><td ><strong>24</td><td ><strong>7</td>\n                        <td ><strong>0</td><td ><strong>0</td><td ><strong>93</td><td ><strong>6491</td><td ><strong>6490</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td>\n                    </tr>\n                    <tr>\n                        <td> <strong>11:00 to 12:00</strong></td><td ><strong>0</td><td ><strong>0</td><td ><strong>1620</td><td ><strong>0</td><td ><strong>61</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>1090</td>\n                        <td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>2970</td><td ><strong>2971</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td>\n                    </tr>\n                    <tr>\n                        <td> 04:00 to 05:00</td><td >0</td><td >0</td><td >1631</td><td >1267</td><td >0</td><td >858</td><td >827</td><td >0</td><td >629</td>\n                        <td >0</td><td >0</td><td >0</td><td >5197</td><td >5524</td><td >0</td><td >0</td><td >0</td><td >0</td><td >0</td>\n                    </tr>\n                    <tr>\n                        <td> 05:00 to 06:00</td><td >0</td><td >0</td><td >3600</td><td >1003</td><td >0</td><td >930</td><td >944</td><td >0</td><td >0</td>\n                        <td >0</td><td >0</td><td >31</td><td >5835</td><td >6260</td><td >0</td><td >0</td><td >0</td><td >90</td><td >0</td>\n                    </tr>\n                    \n\n\n                </thead>\n        \n                <tbody>\n       \n                </tbody>\n            </table>\n        \n        </body>\n        </html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2820,"y":1490,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
5

basically, what i am trying to do is create a dynamic table which is updated every minute and displays the total count for several machines for a period of last 8 hours, grouped at every hour. I want to highlight the current hour only for easy reading.
i am getting the data from mysql table updating the flow.context and send updated data to the table every minute. (only the current hour group data is changing and there i am using mustache template to change the html tag to make them bold. i tried doing color also, some how none of the html tags are working.
i tried CSS, but it is beyond my understanding.

6

That would be easier to take the data and construct the table.
You could parse the data and add a property to set colour and strong for the correct hour. Then when you construct the dynamic table you can use the properties to background and strong. IF you supply the data I will give an example( may be later as just broke my reading glasses.)

The other way would be to use the dom or jquery to look for specific class/id attribute values and update the document attributes accordingly using JS

7

I would use something like this (with javascript)

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: sans-serif;
        }

        table {
            border-collapse: collapse;
        }

        td,
        th {
            padding: 4px 8px;
        }

        .strong {
            background-color: #eee;
            font-weight: 600;
        }
    </style>

</head>

<body>

    <table border="1" align="center" cellpadding="1px">

        <thead>

            <tr>
                <th>11:28:04</th>
                <th>CR3</th>
                <th>MSP1</th>
                <th>BTP</th>
                <th>SP4</th>
                <th>SP3</th>
                <th>PFSL</th>
                <th>PFSR</th>
                <th>CR1</th>
                <th>JUC</th>
                <th>CFT</th>
                <th>14T</th>
                <th>12T</th>
                <th>BTP2</th>
                <th>BTP3</th>
                <th>SP5</th>
                <th>AP2</th>
                <th>MSP2</th>
                <th>BAGR</th>
                <th>DIP</th>
            </tr>
        </thead>
        <tbody>


            <tr>
                <td> 06:00 to 07:00</td>
                <td>0</td>
                <td>0</td>
                <td>2307</td>
                <td>635</td>
                <td>0</td>
                <td>210</td>
                <td>203</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>2673</td>
                <td>3853</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 07:00 to 08:00</td>
                <td>0</td>
                <td>0</td>
                <td>3203</td>
                <td>649</td>
                <td>0</td>
                <td>836</td>
                <td>817</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>6600</td>
                <td>6600</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td> 0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 08:00 to 09:00</td>
                <td>0</td>
                <td>0</td>
                <td>2215</td>
                <td>738</td>
                <td>43</td>
                <td>74</td>
                <td>72</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>6600</td>
                <td>6600</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 09:00 to 10:00</td>
                <td>0</td>
                <td>0</td>
                <td>3600</td>
                <td>0</td>
                <td>140</td>
                <td>1028</td>
                <td>985</td>
                <td>2</td>
                <td>1</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>5428</td>
                <td>5408</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 10:00 to 11:00</td>
                <td>0</td>
                <td>0</td>
                <td>3253</td>
                <td>309</td>
                <td>283</td>
                <td>612</td>
                <td>598</td>
                <td>24</td>
                <td>7</td>
                <td>0</td>
                <td>0</td>
                <td>93</td>
                <td>6491</td>
                <td>6490</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 11:00 to 12:00</strong></td>
                <td>0</td>
                <td>0</td>
                <td>1620</td>
                <td>0</td>
                <td>61</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>1090</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>2970</td>
                <td>2971</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 04:00 to 05:00</td>
                <td>0</td>
                <td>0</td>
                <td>1631</td>
                <td>1267</td>
                <td>0</td>
                <td>858</td>
                <td>827</td>
                <td>0</td>
                <td>629</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>5197</td>
                <td>5524</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td> 05:00 to 06:00</td>
                <td>0</td>
                <td>0</td>
                <td>3600</td>
                <td>1003</td>
                <td>0</td>
                <td>930</td>
                <td>944</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>31</td>
                <td>5835</td>
                <td>6260</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>90</td>
                <td>0</td>
            </tr>

        </tbody>
    </table>

    <script>
        const table = document.querySelector('table') 
        const searchText = '05:00 to 06:00'
        const tr = Array.from(table.querySelectorAll('tr'))
    
        for (let i = 0; i < tr.length; i++) { 
            const trText=tr[i].textContent 
            if (trText.includes(searchText)) {
                tr[i].className += "strong"
                } 
            } 
      
    </script>
</body>

</html>

in short:
define a class in css

upon load, it runs a javascript find to the text and applies the class on the row the text was found.
the text can be filled via mustache, eg

const searchText = '{{timeframe}}' //eg: '05:00 to 06:00'

result:

image
image2344×556 50.4 KB

8

I tried similar thing. but somehow the output is not coming out as expected.
your example is giving me plain output (no bg color and no bold for the hour selected).
how do i find out if there are any conflicitng CSS defined in my flow ?

9

Sorry, Is the example given by me not sufficing ?
I tried @bakman2 example also, some how it is not working.
at least the example I have given gives me BOLD font. CSS is somehow not working if there is any inline html tag like for font color i would be happy.

10

For the desired output yes the example is fine.

But if this data is coming in every minute then it would be best to show incoming data, how it is stored and what data you use to create the html page, unless you use the Jquery option, as in @bakman2 example.

11

What exactly is not working ?

Did you put in the code into a template node ? It works.
Your example table was not properly formatted, I have made corrections. Now ofcourse you need to adapt it to the data coming out of your database and supply the custom text that needs to be found in {{timeframe}}

12

I just copied your complete example and the background color is not showing up, neither the font is bold.
I am sure your example is right, but some settings in my flow may be hindering the execution.
I am getting a plain table like this.

image
image880×211 8.14 KB

13

The machine sensors data is logged into a mysql database every minute in a separate flow.
I am using this flow to mysql query the data in group by hour.
after the data is populated, i store all the individual machinesm hourly total into flow context and use the mustache template in a template node to create a html document and use a blue template node to show in a dashboard.

14

Are you using dashboard v1 or v2 or http-in/response ?

15

dashboard v1

image

I got it to work now by using <tr bgcolor = "red">

Not the most elegant way, but will do for now, will try to use @bakman2 script to enhance the flow.
thanks for all the inputs.

                    <tr bgcolor="red">
                        <td> <strong>11:00 to 12:00</strong></td><td ><strong>0</td><td ><strong>0</td><td ><strong>1620</td><td ><strong>0</td><td ><strong>61</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>1090</td>
                        <td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>2970</td><td ><strong>2971</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td><td ><strong>0</td>
                    </tr>
16

So if you had supplied the mysql hourly data and the mustache template, I would of provides an example.

You can do it all in the ui-template using ng-repeat also.

17

I am looking forward to the right way of approaching this
Sorry, the flow already has a makeshift solution, hope it will not hinder your solution.

[{"id":"84f944cb1b590ce7","type":"debug","z":"47da0e9a083f3b25","name":"debug 2556","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":3000,"y":1400,"wires":[]},{"id":"3ada0b7261e2139d","type":"inject","z":"47da0e9a083f3b25","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"any_value(datetime)\":\"2024-05-31T08:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2585,\"m03\":0,\"m04\":703,\"m05\":0,\"m06\":0,\"m07\":922,\"m08\":13490,\"m09\":0,\"m10\":0,\"m11\":41,\"m22\":4402,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":3037,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T09:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1687,\"m03\":0,\"m04\":609,\"m05\":0,\"m06\":0,\"m07\":869,\"m08\":10982,\"m09\":0,\"m10\":0,\"m11\":84,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6595,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T02:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2215,\"m03\":738,\"m04\":43,\"m05\":74,\"m06\":72,\"m07\":0,\"m08\":0,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T03:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3600,\"m03\":0,\"m04\":140,\"m05\":1028,\"m06\":985,\"m07\":2,\"m08\":1,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":5428,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":5408,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T04:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3313,\"m03\":309,\"m04\":284,\"m05\":612,\"m06\":598,\"m07\":24,\"m08\":7,\"m09\":0,\"m10\":0,\"m11\":93,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T05:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1769,\"m03\":0,\"m04\":221,\"m05\":0,\"m06\":0,\"m07\":7,\"m08\":3082,\"m09\":0,\"m10\":0,\"m11\":60,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T06:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3317,\"m03\":0,\"m04\":194,\"m05\":0,\"m06\":0,\"m07\":521,\"m08\":3305,\"m09\":0,\"m10\":0,\"m11\":157,\"m22\":6342,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6220,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T07:31:01.000Z\",\"m00\":0,\"m01\":0,\"m02\":1557,\"m03\":0,\"m04\":247,\"m05\":0,\"m06\":0,\"m07\":181,\"m08\":11465,\"m09\":0,\"m10\":0,\"m11\":131,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6251,\"m18\":0}]]","payloadType":"json","x":2820,"y":1490,"wires":[["be38e1647d24beb5","81c7dda281817942","e18ac6e3f6f5043b","952d1349bdfd13b9","fa77f291ecc7cd3e","f22134dd41cdffe1","94f3b9ac57a7b752","9fe5f9df2ea409a2","e0b94aeef9071993","e23ec10a143b1b4c","84f944cb1b590ce7"]]},{"id":"be38e1647d24beb5","type":"function","z":"47da0e9a083f3b25","name":"H1","func":"flow.set(\"h1m00\", msg.payload[0][0].m00);\nflow.set(\"h1m01\", msg.payload[0][0].m01);\nflow.set(\"h1m02\", msg.payload[0][0].m02);\nflow.set(\"h1m03\", msg.payload[0][0].m03);\nflow.set(\"h1m04\", msg.payload[0][0].m04);\nflow.set(\"h1m05\", msg.payload[0][0].m05);\nflow.set(\"h1m06\", msg.payload[0][0].m06);\nflow.set(\"h1m07\", msg.payload[0][0].m07);\nflow.set(\"h1m08\", msg.payload[0][0].m08);\nflow.set(\"h1m09\", msg.payload[0][0].m09);\nflow.set(\"h1m10\", msg.payload[0][0].m10);\nflow.set(\"h1m11\", msg.payload[0][0].m11);\nflow.set(\"h1m22\", msg.payload[0][0].m22);\nflow.set(\"h1m23\", msg.payload[0][0].m23);\nflow.set(\"h1m14\", msg.payload[0][0].m14);\nflow.set(\"h1m15\", msg.payload[0][0].m15);\nflow.set(\"h1m16\", msg.payload[0][0].m16);\nflow.set(\"h1m21\", msg.payload[0][0].m21);\nflow.set(\"h1m18\", msg.payload[0][0].m18);\nflow.set(\"h1m19\", msg.payload[0][0].m19);\nflow.set(\"h1m20\", msg.payload[0][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1580,"wires":[[]]},{"id":"9fe5f9df2ea409a2","type":"function","z":"47da0e9a083f3b25","name":"H2","func":"flow.set(\"h2m00\", msg.payload[1][0].m00);\nflow.set(\"h2m01\", msg.payload[1][0].m01);\nflow.set(\"h2m02\", msg.payload[1][0].m02);\nflow.set(\"h2m03\", msg.payload[1][0].m03);\nflow.set(\"h2m04\", msg.payload[1][0].m04);\nflow.set(\"h2m05\", msg.payload[1][0].m05);\nflow.set(\"h2m06\", msg.payload[1][0].m06);\nflow.set(\"h2m07\", msg.payload[1][0].m07);\nflow.set(\"h2m08\", msg.payload[1][0].m08);\nflow.set(\"h2m09\", msg.payload[1][0].m09);\nflow.set(\"h2m10\", msg.payload[1][0].m10);\nflow.set(\"h2m11\", msg.payload[1][0].m11);\nflow.set(\"h2m22\", msg.payload[1][0].m22);\nflow.set(\"h2m23\", msg.payload[1][0].m23);\nflow.set(\"h2m14\", msg.payload[1][0].m14);\nflow.set(\"h2m15\", msg.payload[1][0].m15);\nflow.set(\"h2m16\", msg.payload[1][0].m16);\nflow.set(\"h2m21\", msg.payload[1][0].m21);\nflow.set(\"h2m18\", msg.payload[1][0].m18);\nflow.set(\"h2m19\", msg.payload[1][0].m19);\nflow.set(\"h2m20\", msg.payload[1][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1624.2857142857144,"wires":[[]]},{"id":"f22134dd41cdffe1","type":"function","z":"47da0e9a083f3b25","name":"H3","func":"flow.set(\"h3m00\", msg.payload[2][0].m00);\nflow.set(\"h3m01\", msg.payload[2][0].m01);\nflow.set(\"h3m02\", msg.payload[2][0].m02);\nflow.set(\"h3m03\", msg.payload[2][0].m03);\nflow.set(\"h3m04\", msg.payload[2][0].m04);\nflow.set(\"h3m05\", msg.payload[2][0].m05);\nflow.set(\"h3m06\", msg.payload[2][0].m06);\nflow.set(\"h3m07\", msg.payload[2][0].m07);\nflow.set(\"h3m08\", msg.payload[2][0].m08);\nflow.set(\"h3m09\", msg.payload[2][0].m09);\nflow.set(\"h3m10\", msg.payload[2][0].m10);\nflow.set(\"h3m11\", msg.payload[2][0].m11);\nflow.set(\"h3m22\", msg.payload[2][0].m22);\nflow.set(\"h3m23\", msg.payload[2][0].m23);\nflow.set(\"h3m14\", msg.payload[2][0].m14);\nflow.set(\"h3m15\", msg.payload[2][0].m15);\nflow.set(\"h3m16\", msg.payload[2][0].m16);\nflow.set(\"h3m21\", msg.payload[2][0].m21);\nflow.set(\"h3m18\", msg.payload[2][0].m18);\nflow.set(\"h3m19\", msg.payload[2][0].m19);\nflow.set(\"h3m20\", msg.payload[2][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1668.5714285714287,"wires":[[]]},{"id":"94f3b9ac57a7b752","type":"function","z":"47da0e9a083f3b25","name":"H4","func":"flow.set(\"h4m00\", msg.payload[3][0].m00);\nflow.set(\"h4m01\", msg.payload[3][0].m01);\nflow.set(\"h4m02\", msg.payload[3][0].m02);\nflow.set(\"h4m03\", msg.payload[3][0].m03);\nflow.set(\"h4m04\", msg.payload[3][0].m04);\nflow.set(\"h4m05\", msg.payload[3][0].m05);\nflow.set(\"h4m06\", msg.payload[3][0].m06);\nflow.set(\"h4m07\", msg.payload[3][0].m07);\nflow.set(\"h4m08\", msg.payload[3][0].m08);\nflow.set(\"h4m09\", msg.payload[3][0].m09);\nflow.set(\"h4m10\", msg.payload[3][0].m10);\nflow.set(\"h4m11\", msg.payload[3][0].m11);\nflow.set(\"h4m22\", msg.payload[3][0].m22);\nflow.set(\"h4m23\", msg.payload[3][0].m23);\nflow.set(\"h4m14\", msg.payload[3][0].m14);\nflow.set(\"h4m15\", msg.payload[3][0].m15);\nflow.set(\"h4m16\", msg.payload[3][0].m16);\nflow.set(\"h4m21\", msg.payload[3][0].m21);\nflow.set(\"h4m18\", msg.payload[3][0].m18);\nflow.set(\"h4m19\", msg.payload[3][0].m19);\nflow.set(\"h4m20\", msg.payload[3][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1712.8571428571431,"wires":[[]]},{"id":"fa77f291ecc7cd3e","type":"function","z":"47da0e9a083f3b25","name":"H5","func":"flow.set(\"h5m00\", msg.payload[4][0].m00);\nflow.set(\"h5m01\", msg.payload[4][0].m01);\nflow.set(\"h5m02\", msg.payload[4][0].m02);\nflow.set(\"h5m03\", msg.payload[4][0].m03);\nflow.set(\"h5m04\", msg.payload[4][0].m04);\nflow.set(\"h5m05\", msg.payload[4][0].m05);\nflow.set(\"h5m06\", msg.payload[4][0].m06);\nflow.set(\"h5m07\", msg.payload[4][0].m07);\nflow.set(\"h5m08\", msg.payload[4][0].m08);\nflow.set(\"h5m09\", msg.payload[4][0].m09);\nflow.set(\"h5m10\", msg.payload[4][0].m10);\nflow.set(\"h5m11\", msg.payload[4][0].m11);\nflow.set(\"h5m22\", msg.payload[4][0].m22);\nflow.set(\"h5m23\", msg.payload[4][0].m23);\nflow.set(\"h5m14\", msg.payload[4][0].m14);\nflow.set(\"h5m15\", msg.payload[4][0].m15);\nflow.set(\"h5m16\", msg.payload[4][0].m16);\nflow.set(\"h5m21\", msg.payload[4][0].m21);\nflow.set(\"h5m18\", msg.payload[4][0].m18);\nflow.set(\"h5m19\", msg.payload[4][0].m19);\nflow.set(\"h5m20\", msg.payload[4][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1757.1428571428573,"wires":[[]]},{"id":"952d1349bdfd13b9","type":"function","z":"47da0e9a083f3b25","name":"H6","func":"flow.set(\"h6m00\", msg.payload[5][0].m00);\nflow.set(\"h6m01\", msg.payload[5][0].m01);\nflow.set(\"h6m02\", msg.payload[5][0].m02);\nflow.set(\"h6m03\", msg.payload[5][0].m03);\nflow.set(\"h6m04\", msg.payload[5][0].m04);\nflow.set(\"h6m05\", msg.payload[5][0].m05);\nflow.set(\"h6m06\", msg.payload[5][0].m06);\nflow.set(\"h6m07\", msg.payload[5][0].m07);\nflow.set(\"h6m08\", msg.payload[5][0].m08);\nflow.set(\"h6m09\", msg.payload[5][0].m09);\nflow.set(\"h6m10\", msg.payload[5][0].m10);\nflow.set(\"h6m11\", msg.payload[5][0].m11);\nflow.set(\"h6m22\", msg.payload[5][0].m22);\nflow.set(\"h6m23\", msg.payload[5][0].m23);\nflow.set(\"h6m14\", msg.payload[5][0].m14);\nflow.set(\"h6m15\", msg.payload[5][0].m15);\nflow.set(\"h6m16\", msg.payload[5][0].m16);\nflow.set(\"h6m21\", msg.payload[5][0].m21);\nflow.set(\"h6m18\", msg.payload[5][0].m18);\nflow.set(\"h6m19\", msg.payload[5][0].m19);\nflow.set(\"h6m20\", msg.payload[5][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1801.4285714285716,"wires":[[]]},{"id":"81c7dda281817942","type":"function","z":"47da0e9a083f3b25","name":"H7","func":"flow.set(\"h7m00\", msg.payload[6][0].m00);\nflow.set(\"h7m01\", msg.payload[6][0].m01);\nflow.set(\"h7m02\", msg.payload[6][0].m02);\nflow.set(\"h7m03\", msg.payload[6][0].m03);\nflow.set(\"h7m04\", msg.payload[6][0].m04);\nflow.set(\"h7m05\", msg.payload[6][0].m05);\nflow.set(\"h7m06\", msg.payload[6][0].m06);\nflow.set(\"h7m07\", msg.payload[6][0].m07);\nflow.set(\"h7m08\", msg.payload[6][0].m08);\nflow.set(\"h7m09\", msg.payload[6][0].m09);\nflow.set(\"h7m10\", msg.payload[6][0].m10);\nflow.set(\"h7m11\", msg.payload[6][0].m11);\nflow.set(\"h7m22\", msg.payload[6][0].m22);\nflow.set(\"h7m23\", msg.payload[6][0].m23);\nflow.set(\"h7m14\", msg.payload[6][0].m14);\nflow.set(\"h7m15\", msg.payload[6][0].m15);\nflow.set(\"h7m16\", msg.payload[6][0].m16);\nflow.set(\"h7m21\", msg.payload[6][0].m21);\nflow.set(\"h7m18\", msg.payload[6][0].m18);\nflow.set(\"h7m19\", msg.payload[6][0].m19);\nflow.set(\"h7m20\", msg.payload[6][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1845.714285714286,"wires":[[]]},{"id":"e18ac6e3f6f5043b","type":"function","z":"47da0e9a083f3b25","name":"H8","func":"flow.set(\"h8m00\", msg.payload[7][0].m00);\nflow.set(\"h8m01\", msg.payload[7][0].m01);\nflow.set(\"h8m02\", msg.payload[7][0].m02);\nflow.set(\"h8m03\", msg.payload[7][0].m03);\nflow.set(\"h8m04\", msg.payload[7][0].m04);\nflow.set(\"h8m05\", msg.payload[7][0].m05);\nflow.set(\"h8m06\", msg.payload[7][0].m06);\nflow.set(\"h8m07\", msg.payload[7][0].m07);\nflow.set(\"h8m08\", msg.payload[7][0].m08);\nflow.set(\"h8m09\", msg.payload[7][0].m09);\nflow.set(\"h8m10\", msg.payload[7][0].m10);\nflow.set(\"h8m11\", msg.payload[7][0].m11);\nflow.set(\"h8m22\", msg.payload[7][0].m22);\nflow.set(\"h8m23\", msg.payload[7][0].m23);\nflow.set(\"h8m14\", msg.payload[7][0].m14);\nflow.set(\"h8m15\", msg.payload[7][0].m15);\nflow.set(\"h8m16\", msg.payload[7][0].m16);\nflow.set(\"h8m21\", msg.payload[7][0].m21);\nflow.set(\"h8m18\", msg.payload[7][0].m18);\nflow.set(\"h8m19\", msg.payload[7][0].m19);\nflow.set(\"h8m20\", msg.payload[7][0].m20);","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3010,"y":1890,"wires":[[]]},{"id":"f060cc5a2a2af6c0","type":"template","z":"47da0e9a083f3b25","name":"HTML HISTORY","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n        <html>\n        <body>\n            \n            <table border=\"1\" align=\"center\" cellpadding=\"1px\">\n\n                <thead>\n                    \n        <tr>\n                        <th >{{flow.plc_times}}</th>\n                        <th ;>{{flow.mac.0}}</th><th ;>{{flow.mac.1}}</th><th ;>{{flow.mac.2}}</th><th ;>{{flow.mac.3}}</th>\n                        <th ;>{{flow.mac.4}}</th><th ;>{{flow.mac.5}}</th><th ;>{{flow.mac.6}}</th><th ;>{{flow.mac.7}}</th>\n                        <th ;>{{flow.mac.8}}</th><th ;>{{flow.mac.9}}</th><th ;>{{flow.mac.10}}</th><th ;>{{flow.mac.11}}</th>\n                        <th ;>{{flow.mac.22}}</th><th ;>{{flow.mac.21}}</th><th ;>{{flow.mac.20}}</th><th ;>{{flow.mac.15}}</th>\n                        <th ;>{{flow.mac.16}}</th><th ;>{{flow.mac.18}}</th><th ;>{{flow.mac.23}}</th>\n                    </tr>\n                    \n                            <tr>\n                        <th width=\"120px\";></th>\n                        <th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th>\n                        <th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th>\n                        <th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th>\n                        <th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th>\n                        <th width={{flow.width}};></th><th width={{flow.width}};></th><th width={{flow.width}};></th>\n                    </tr>\n\n                    {{{flow.tr1}}}\n                        <td> {{{flow.hr1}}}</td><td ;>{{{flow.h1m00}}}</td><td ;>{{{flow.h1m01}}}</td><td ;>{{{flow.h1m02}}}</td><td ;>{{{flow.h1m03}}}</td><td ;>{{{flow.h1m04}}}</td><td ;>{{{flow.h1m05}}}</td><td ;>{{{flow.h1m06}}}</td><td ;>{{{flow.h1m07}}}</td><td ;>{{{flow.h1m08}}}</td>\n                        <td ;>{{{flow.h1m09}}}</td><td ;>{{{flow.h1m10}}}</td><td ;>{{{flow.h1m11}}}</td><td ;>{{{flow.h1m22}}}</td><td ;>{{{flow.h1m21}}}</td><td ;>{{{flow.h1m20}}}</td><td ;>{{{flow.h1m15}}}</td><td ;>{{{flow.h1m16}}}</td><td>{{{flow.h1m18}}}</td><td ;>{{{flow.h1m23}}}</td>\n                    </tr>\n                    {{{flow.tr2}}}\n                        <td> {{{flow.hr2}}}</td><td >{{{flow.h2m00}}}</td><td >{{{flow.h2m01}}}</td><td >{{{flow.h2m02}}}</td><td >{{{flow.h2m03}}}</td><td >{{{flow.h2m04}}}</td><td >{{{flow.h2m05}}}</td><td >{{{flow.h2m06}}}</td><td >{{{flow.h2m07}}}</td><td >{{{flow.h2m08}}}</td>\n                        <td >{{{flow.h2m09}}}</td><td >{{{flow.h2m10}}}</td><td >{{{flow.h2m11}}}</td><td >{{{flow.h2m22}}}</td><td >{{{flow.h2m21}}}</td><td >{{{flow.h2m20}}}</td><td >{{{flow.h2m15}}}</td><td >{{{flow.h2m16}}}</td><td> {{{flow.h2m18}}}</td><td >{{{flow.h3m23}}}</td>\n                    </tr>\n                    {{{flow.tr3}}}\n                        <td> {{{flow.hr3}}}</td><td >{{{flow.h3m00}}}</td><td >{{{flow.h3m01}}}</td><td >{{{flow.h3m02}}}</td><td >{{{flow.h3m03}}}</td><td >{{{flow.h3m04}}}</td><td >{{{flow.h3m05}}}</td><td >{{{flow.h3m06}}}</td><td >{{{flow.h3m07}}}</td><td >{{{flow.h3m08}}}</td>\n                        <td >{{{flow.h3m09}}}</td><td >{{{flow.h3m10}}}</td><td >{{{flow.h3m11}}}</td><td >{{{flow.h3m22}}}</td><td >{{{flow.h3m21}}}</td><td >{{{flow.h3m20}}}</td><td >{{{flow.h3m15}}}</td><td >{{{flow.h3m16}}}</td><td >{{{flow.h3m18}}}</td><td >{{{flow.h3m23}}}</td>\n                    </tr>\n                    {{{flow.tr4}}}\n                        <td> {{{flow.hr4}}}</td><td >{{{flow.h4m00}}}</td><td >{{{flow.h4m01}}}</td><td >{{{flow.h4m02}}}</td><td >{{{flow.h4m03}}}</td><td >{{{flow.h4m04}}}</td><td >{{{flow.h4m05}}}</td><td >{{{flow.h4m06}}}</td><td >{{{flow.h4m07}}}</td><td >{{{flow.h4m08}}}</td>\n                        <td >{{{flow.h4m09}}}</td><td >{{{flow.h4m10}}}</td><td >{{{flow.h4m11}}}</td><td >{{{flow.h4m22}}}</td><td >{{{flow.h4m21}}}</td><td >{{{flow.h4m20}}}</td><td >{{{flow.h4m15}}}</td><td >{{{flow.h4m16}}}</td><td >{{{flow.h4m18}}}</td><td >{{{flow.h4m23}}}</td>\n                    </tr>\n                    {{{flow.tr5}}}\n                        <td> {{{flow.hr5}}}</td><td >{{{flow.h5m00}}}</td><td >{{{flow.h5m01}}}</td><td >{{{flow.h5m02}}}</td><td >{{{flow.h5m03}}}</td><td >{{{flow.h5m04}}}</td><td >{{{flow.h5m05}}}</td><td >{{{flow.h5m06}}}</td><td >{{{flow.h5m07}}}</td><td >{{{flow.h5m08}}}</td>\n                        <td >{{{flow.h5m09}}}</td><td >{{{flow.h5m10}}}</td><td >{{{flow.h5m11}}}</td><td >{{{flow.h5m22}}}</td><td >{{{flow.h5m21}}}</td><td >{{{flow.h5m20}}}</td><td >{{{flow.h5m15}}}</td><td >{{{flow.h5m16}}}</td><td >{{{flow.h5m18}}}</td><td >{{{flow.h5m23}}}</td>\n                    </tr>\n                    {{{flow.tr6}}}\n                        <td> {{{flow.hr6}}}</td><td >{{{flow.h6m00}}}</td><td >{{{flow.h6m01}}}</td><td >{{{flow.h6m02}}}</td><td >{{{flow.h6m03}}}</td><td >{{{flow.h6m04}}}</td><td >{{{flow.h6m05}}}</td><td >{{{flow.h6m06}}}</td><td >{{{flow.h6m07}}}</td><td >{{{flow.h6m08}}}</td>\n                        <td >{{{flow.h6m09}}}</td><td >{{{flow.h6m10}}}</td><td >{{{flow.h6m11}}}</td><td >{{{flow.h6m22}}}</td><td >{{{flow.h6m21}}}</td><td >{{{flow.h6m20}}}</td><td >{{{flow.h6m15}}}</td><td >{{{flow.h6m16}}}</td><td >{{{flow.h6m18}}}</td><td >{{{flow.h6m23}}}</td>\n                    </tr>\n                    {{{flow.tr7}}}\n                        <td> {{{flow.hr7}}}</td><td >{{{flow.h7m00}}}</td><td >{{{flow.h7m01}}}</td><td >{{{flow.h7m02}}}</td><td >{{{flow.h7m03}}}</td><td >{{{flow.h7m04}}}</td><td >{{{flow.h7m05}}}</td><td >{{{flow.h7m06}}}</td><td >{{{flow.h7m07}}}</td><td >{{{flow.h7m08}}}</td>\n                        <td >{{{flow.h7m09}}}</td><td >{{{flow.h7m10}}}</td><td >{{{flow.h7m11}}}</td><td >{{{flow.h7m22}}}</td><td >{{{flow.h7m21}}}</td><td >{{{flow.h7m20}}}</td><td >{{{flow.h7m15}}}</td><td >{{{flow.h7m16}}}</td><td >{{{flow.h7m18}}}</td><td >{{{flow.h7m23}}}</td>\n                    </tr>\n                    {{{flow.tr8}}}\n                        <td> {{{flow.hr8}}}</td><td >{{{flow.h8m00}}}</td><td >{{{flow.h8m01}}}</td><td >{{{flow.h8m02}}}</td><td >{{{flow.h8m03}}}</td><td >{{{flow.h8m04}}}</td><td >{{{flow.h8m05}}}</td><td >{{{flow.h8m06}}}</td><td >{{{flow.h8m07}}}</td><td >{{{flow.h8m08}}}</td>\n                        <td >{{{flow.h8m09}}}</td><td >{{{flow.h8m10}}}</td><td >{{{flow.h8m11}}}</td><td >{{{flow.h8m22}}}</td><td >{{{flow.h8m21}}}</td><td >{{{flow.h8m20}}}</td><td >{{{flow.h8m15}}}</td><td >{{{flow.h8m16}}}</td><td >{{{flow.h8m18}}}</td><td >{{{flow.h8m23}}}</td>\n                    </tr>\n                    \n\n\n                </thead>\n        \n                <tbody>\n       \n                </tbody>\n            </table>\n        \n        </body>\n        </html>","output":"str","x":3200,"y":1490,"wires":[["02495c86a269f20d"]]},{"id":"02495c86a269f20d","type":"ui_template","z":"47da0e9a083f3b25","group":"bac5fc6c84fc7b33","name":"History1","order":6,"width":"44","height":"20","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3370,"y":1490,"wires":[[]]},{"id":"e0b94aeef9071993","type":"delay","z":"47da0e9a083f3b25","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":3020,"y":1490,"wires":[["f060cc5a2a2af6c0"]]},{"id":"e23ec10a143b1b4c","type":"function","z":"47da0e9a083f3b25","name":"Current Hr","func":"flow.set(\"tr1\", \"<tr>\");\nflow.set(\"tr2\", \"<tr>\");\nflow.set(\"tr3\", \"<tr bgcolor='red'>\");\nflow.set(\"tr4\", \"<tr>\");\nflow.set(\"tr5\", \"<tr>\");\nflow.set(\"tr6\", \"<tr>\");\nflow.set(\"tr7\", \"<tr>\");\nflow.set(\"tr8\", \"<tr>\");\n\nflow.set(\"hr1\",\"14:00 to 15:00\")\nflow.set(\"hr2\",\"15:00 to 16:00\")\nflow.set(\"hr3\",\"<strong>16:00 to 17:00</strong>\")\nflow.set(\"hr4\",\"09:00 to 10:00\")\nflow.set(\"hr5\",\"10:00 to 11:00\")\nflow.set(\"hr6\",\"11:00 to 12:00\")\nflow.set(\"hr7\",\"12:00 to 13:00\")\nflow.set(\"hr8\",\"13:00 to 14:00\")\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3030,"y":1540,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

image
image1128×201 9.29 KB

18

Well that was messed up data and very confusing.

Was the data the hourly pull from a database or incoming data every minute? I took it as hourly

I rearranged the data to make it more usable, and converted the timestamps.

I added a style property for the row that matched the timestamp, which is set to a number but in reality would be set to timestamp.

Here is an example using ui-template, slimmed down for my ease (as still working half blind as reading glasses are kaput)

[{"id":"3ada0b7261e2139d","type":"inject","z":"d1395164b4eec73e","name":"every hour","props":[{"p":"payload"},{"p":"flow","v":"{\"one\":\"title 1\", \"two\": \"title2\", \"three\": \"title 3\"}","vt":"json"},{"p":"timestamp","v":"1717139840000","vt":"num"},{"p":"flow.width","v":"120px","vt":"str"},{"p":"table_data","v":"$$.payload.(\t    $moment_obj := $moment($.\"any_value(datetime)\");\t    {\t        \"hr1\": $moment_obj.format(\"HH[:00 - ]\") & $moment_obj.add(1 , \"hour\").format(\"HH[:00]\"),\t        \"m00\": $.m00,\t        \"m01\": $.m01,\t        \"style\": $moment_obj.format(\"HH\") = $moment($$.timestamp).format(\"HH\") ? \"background-color:red;font-weight:900;\"\t    }\t)","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[{\"any_value(datetime)\":\"2024-05-31T08:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2585,\"m03\":0,\"m04\":703,\"m05\":0,\"m06\":0,\"m07\":922,\"m08\":13490,\"m09\":0,\"m10\":0,\"m11\":41,\"m22\":4402,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":3037,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T09:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1687,\"m03\":0,\"m04\":609,\"m05\":0,\"m06\":0,\"m07\":869,\"m08\":10982,\"m09\":0,\"m10\":0,\"m11\":84,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6595,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T02:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":2215,\"m03\":738,\"m04\":43,\"m05\":74,\"m06\":72,\"m07\":0,\"m08\":0,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T03:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3600,\"m03\":0,\"m04\":140,\"m05\":1028,\"m06\":985,\"m07\":2,\"m08\":1,\"m09\":0,\"m10\":0,\"m11\":0,\"m22\":5428,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":5408,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T04:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3313,\"m03\":309,\"m04\":284,\"m05\":612,\"m06\":598,\"m07\":24,\"m08\":7,\"m09\":0,\"m10\":0,\"m11\":93,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T05:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":1769,\"m03\":0,\"m04\":221,\"m05\":0,\"m06\":0,\"m07\":7,\"m08\":3082,\"m09\":0,\"m10\":0,\"m11\":60,\"m22\":6600,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6600,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T06:31:00.000Z\",\"m00\":0,\"m01\":0,\"m02\":3317,\"m03\":0,\"m04\":194,\"m05\":0,\"m06\":0,\"m07\":521,\"m08\":3305,\"m09\":0,\"m10\":0,\"m11\":157,\"m22\":6342,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6220,\"m18\":0}],[{\"any_value(datetime)\":\"2024-05-31T07:31:01.000Z\",\"m00\":0,\"m01\":0,\"m02\":1557,\"m03\":0,\"m04\":247,\"m05\":0,\"m06\":0,\"m07\":181,\"m08\":11465,\"m09\":0,\"m10\":0,\"m11\":131,\"m22\":6601,\"m23\":0,\"m20\":0,\"m15\":0,\"m16\":0,\"m21\":6251,\"m18\":0}]]","payloadType":"json","x":120,"y":4530,"wires":[["84f944cb1b590ce7","02495c86a269f20d"]]},{"id":"84f944cb1b590ce7","type":"debug","z":"d1395164b4eec73e","name":"debug 2556","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":290,"y":4440,"wires":[]},{"id":"02495c86a269f20d","type":"ui_template","z":"d1395164b4eec73e","group":"bac5fc6c84fc7b33","name":"History1","order":6,"width":"20","height":"9","format":"<table border=\"1\" align=\"center\" cellpadding=\"1px\"\n        <tr>\n            <th>{{msg.flow.one}}</th>\n            <th>{{msg.flow.two}}</th>\n            <th>{{msg.flow.three}}</th>\n        </tr>\n                    \n        <tr>\n            <th width=\"{{msg.flow.width}}\"></th>\n            <th width=\"{{msg.flow.width}}\"></th>\n            <th width=\"{{msg.flow.width}}\"></th>\n        </tr>\n\n        <tr ng-repeat=\"row in msg.table_data\" style=\"{{row.style}}\">\n                        <td> {{row.hr1}}</td>\n                        <td>{{row.m00}}</td>\n                        <td>{{row.m01}}</td>\n        </tr>\n</table>\n        \n    ","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":300,"y":4540,"wires":[[]]},{"id":"bac5fc6c84fc7b33","type":"ui_group","name":"HOURLY","tab":"a893427d485b01b5","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"a893427d485b01b5","type":"ui_tab","name":"NEWLIVE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

chrome_screenshot_31 May 2024 13_51_20 BST
chrome_screenshot_31 May 2024 13_51_20 BST1920×399 25.5 KB

p.s. Flow vars need to be moved to msg property before being sent to ui-template

19

I tried my best.

the current hour will be pulled every minute ( i use a time-range-switch) , other hour data will be stored in the flow.context and remain intact till it is recycled after 8 hours.

it will take some time for me to understand how is it working.
definitely is an elegant solution. thank you.

will convert my flow to your logic and post here soon.

20

successfully adapted my flow to simplified solution given by @E1cid
however, could not understand why the current hour highlighting was not working until i added a moment node to add one hour.

the image below is at 20:10 Hrs Local time.

image
image359×284 4.61 KB

image
image1350×216 10 KB