How do you indicate an event has happened at a certain time versus SHOULD happen at a given time?
I have a web-UI where certain things should happen at scheduled times. Think like a limo service, where the driver should be at the pickup location 15 minutes before the scheduled pickup time, then needs to be somewhere else by another time.
So my points might be:
+-------+-----------+----------+
| Event | Scheduled | Occurred |
+-------+-----------+----------+
| Stop1 | 16:48 | 16:44 |
| Stop2 | 17:02 | 17:03 |
| Stop3 | 17:32 | 17:35 |
| Stop4 | 17:45 | |
+-------+-----------+----------+
I don't have enough width in my UI to show both scheduled and occurred (though I can slow more info, like "Was 3 minutes late" when hovering over Stop3). Normally I have just the room for an icon (like a font-awesome clock) and a timestamp (HH:ii:ss).
I'm already using the clock icon if an event has happened, colored to: <10 min late = green, <30 min late = yellow, >=30 min late = red. If the scheduled event never happened (in the case of Stop4, above) it simply says "Never" instead of "HH:ii:ss". Ideally I'd prefer show the scheduled time here... but how do I make it... not confusing?