What's the best way to represent a timeline graphic

Question

I am trying to represent the following server downtime: (I have couple of more combinations, I have removed for brevity)

Server A : 4:00 - 4:30 AM

Server B : 5:30 - 6:00 AM

Server C : 6:00 - 6:30 AM

Server D : 7:00 - 7:30 AM

What I have built is this:

This appears cluttered to me. Is there a better way to show this in a simple manner ?

Answer 1

The emphasis is all wrong - the chart needs to tell just one story - the fact that you have downtime on one or more servers

I would take the following steps:

• highlight the fact that there is downtime, not the fact that you have different servers. When you have no downtime, the display should appear bland, not full of colour.
• remove colour coding completely as the colour has no relevance to any particular server. This will further raise the profile of the downtime blocks.
• simply separate servers on the chart by horizontal lines as you might in a data table
• where there is downtime, block out the appropriate section but not completely to the top and bottom of the bar. This allows blocks in adjacent bars not to interfere and also the time markers to be seen (see below)
• de-emphasise the time as it's a guide only - the important information is the downtime. Further de-emphasise the minutes by making it smaller text than the hours. The minutes is still useful to make the values obviously indicate time, so just imply 2,3,4,5 etc is not so good.
• use discrete markers for the time across the bars. They only need to cross the horizontal lines (where downtime blocks will not obliterate the markers) as the eye will be able to easily connect the dots and associate them with time at the top
• enable accurate display of time by using tooltips when you hover/click over a downtime block. Use this as a place to include or link to other relevant information for this block of downtime or for the server in question.
• ensure that tooltips still let you see a section of the block to which it corresponds - but also ensure you do not cover up blocks in any adjacent row.
• align the left side of the tooltip with the start of the block to which it corresponds so that it appears even more connected and less likely to be confused with the block of an adjacent bar or adjacent blocks in the same bar.

Answer 2

You're on the right path. If each colored graph represents server load then blacking out the periods of time when the server has been down is a great way to show that info.

The clutter in your design comes from the vertical lines at the start/end times of outages. It's better to show all of that in a tool-tip when users hovers their cursors over an outage block.

The second part of improvement is in color coding. You can't predict how many of the users will be color-blind so make sure there is sufficient contrast between all elements. (My color selection isn't great either because of the low contrasts between some of them.)

^{download bmml source – Wireframes created with Balsamiq Mockups}

First version: