I have a customer who asked me to provide a "Server Availability" chart for the last 24 hours that looks like this one:

Y represents hours (0 - 23); X represents minutes (0 - 59)

In this example you see that the server wasn't available during 20:24 - 20:28 .

enter image description here

Since I provide COTS (Commercial off the shelf) I'm wondering if this chart really provides useful UI and information. Do you think so?

  • 1
    If i understand this chart correctly, you also have outages in the morning at 1:45, 2:50, 3:45 and 6:45. The only advantage i can see is, that if everything is ok, the chart is empty, so it really only shows the relevant datapoints. It is not as easy to read off the bat though, as a "normal" chart with Y being available or not and X being the time would be. Commented Mar 19, 2014 at 17:15
  • 20
    The flaw here is taking linear time and chopping it up along two axis. That MIGHT be useful if the goal is to find an hourly pattern but beyond that need, it seems completely irrelevant.
    – DA01
    Commented Mar 19, 2014 at 20:40
  • 1
    That graph is using two axis just for the sake of using two axis. To someone with a mathematical background, that may seem intuitive, but in the end it's only confusing. I have to look on the y-axis to get my hour, and the match it to get minutes. In the end, the visualization actually makes it even harder to visualize what you're trying to convey. Commented Mar 20, 2014 at 20:58

4 Answers 4


I have seen the following visualization used to represent down time and it has been effective:

enter image description here

The illustration in the question requires too much thinking.

The linear time line works well for a 24 hour timespan.

  • Thank you. I thought about this one in the beginning. The problem is that if I monitor the server every 1 minute, I need 1440 pixels. If I take a sample every 30 minutes (as I tend to do) I need 2880 pixels... that's the reason I moved to a matrix. Can you tell me where have you seen that? I'm wondering how they cope with that issue. Thx. Commented Mar 20, 2014 at 4:20
  • You could show it in a small bar graph like the one above, and for every pixel show if it was down in that period (here, for 480px that'd be a 33mins to a pixel). More accurate times could be listed in a table.
    – ThorinII
    Commented Mar 20, 2014 at 4:39
  • 1
    @ThorinII, how would you listed this in a table? Do you mean to split hours? e.g. split it to 4 lines (each one represents 6 hours). Thx Commented Mar 20, 2014 at 9:54
  • 1
    When showing it as a table, it'd be a compliment to the chart. It'd tell the user 'the site was down here, here, and here...' and for how long each time - ie just a listing of events
    – ThorinII
    Commented Mar 20, 2014 at 10:35
  • 1
    If you need to show more detail in the representation above why not just let users click on the hour showing yellow to display another chart with the actual outage times ?
    – PhillipW
    Commented Mar 20, 2014 at 11:11

This is the way Pingdom chose to visualize it in their Public Status Pages:

24h Uptime Graph

(Disclosure: I was the front-end web developer who implemented this graph back in 2010, but not the designer or originator of the concept.)


An aside: COTS stands for Commercial Off The Shelf.

Per the chart - it tells me nothing. Both the X and Y axis are so deep I have to following an enormous gulf in order to guess that the server was down roughly in the timeframe of 20:24-20:28.

Why are there 4 lines in-between the hour lines when they only jump by 2 hours?

My eye also has to wander a great deal, and I have to think a lot, in order to pull out a timeline from this chart. Times earlier in the day are in the lower right with times later in the day in the upper left. Add a bunch more dots and the user is going to freak out trying to figure out time blocks.

A simple listing when a server went down, and when it came back up, would be easier to read and take up less space (assuming your server isn't going down an enormous amount).

Fancy visuals do not necessarily make information easier to parse. If you really must have one, show something that presents the information in a linear progression - such as a timeline - which is how people see time.

  • Yes, I messed up too (I've fixed it)! :) Note your question calls it out as "cut of the shelf". Commented Mar 19, 2014 at 17:43
  • I am not the OP! I noticed your edit and deleted my comment. :-) Those 4 lines between the hours are obviously convenient 24 minute steps that make no sense on a full hour scale of course ;-) Commented Mar 19, 2014 at 17:45

UptimeRobot is a tool for monitoring server downtimes (I'm just a user, no other connection whatsoever). They're showing a small graph on the left side for the up-/downtimes for every watched server in the last 24 hours (I edited the image because none of my watched servers had a downtime in this period). If you click on one of the bars, you see details on the right side for this specific server: Uptimerobot

Bigger image

  • This is awesome. Nice to see some web philanthropy.
    – George
    Commented Mar 20, 2014 at 19:07
  • Much more clear. Commented Mar 20, 2014 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.