I'm building a PHP app that monitors uptime/downtime of a service. I want to graph it similarly to this (https://codepen.io/spglco/pen/yofBp) using different colored divs to represent up or down.
I'm having a hard time wrapping my head around the code.
My dataset currently looks like this. These checks are done every minute, but may have different intervals in the future (they could be every 10 or 15 minutes, instead of every minute as shown here):
+---------------------+-------------+----------------+
| created_at | fk_check_id | current_status |
+---------------------+-------------+----------------+
| 2019-05-05 20:40:09 | 1214 | 0 |
| 2019-05-05 20:41:05 | 1214 | 1 |
| 2019-05-05 20:44:21 | 1214 | 0 |
| 2019-05-05 20:52:06 | 1214 | 1 |
| 2019-05-05 21:08:22 | 1214 | 0 |
| 2019-05-05 22:01:07 | 1214 | 1 |
| 2019-05-05 22:08:21 | 1214 | 0 |
| 2019-05-05 23:01:05 | 1214 | 1 |
| 2019-05-05 23:02:06 | 1214 | 0 |
| 2019-05-05 23:04:05 | 1214 | 1 |
| 2019-05-05 23:25:06 | 1214 | 0 |
| 2019-05-05 23:26:05 | 1214 | 1 |
+---------------------+-------------+----------------+
I want the code to be performant, and so creating a loop to output 4320 divs (every minute for 72 hours) will surely crash a browser. Ideally, it would be nice to have it as shown in the link above (one div per hour -- green if no downtime detected, yellow for 1-10 minutes of downtime, red for 11+ minutes of downtime).
My initial thought was to do it via percentages, and color a div accordingly, but I'm still not sure if that's the best route.
What's the best way to approach this?
Thanks in advance!
