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:

enter image description here

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

  • 2
    I dunnoo if that's cluttered, but fuschia on black gives me a headache.
    – Warren P
    Mar 5, 2012 at 17:43

2 Answers 2


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.

enter image description here

  • I like this version, with the stale BG and the popping markers. However, I do also like the idea of each server being associated to a color, to make it easier to id. Mar 5, 2012 at 20:59
  • yes, that would be an icing on the cake
    – Sooraj MV
    Jan 22, 2020 at 10:23

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:
old mockup

  • 3
    I would say that you could just get away with zebra-striping the colours in two-tones rather than requiring unique colours for each. I like the idea of the hover-over, but i still think you need some vertical markings against the times, i've no idea just from looking where the 07:00 period begins.
    – JonW
    Mar 5, 2012 at 19:00
  • @JonW: For the record: I tried looking for notches in Balsamiq but didn't find them and didn't have time to improvise.
    – dnbrv
    Mar 5, 2012 at 19:16
  • Notches or something like that would be a good alternative to full vertical lines, yes. That's a nice idea, have them at the top and bottom of the whole chart (possible in the centre row too if there are lots of rows?)
    – JonW
    Mar 5, 2012 at 19:18
  • @JonW: Instead of doing persistent lines, they can show one line at the cursor's current position. I just can't recall an app that does that to make screenshot. Suggestions?
    – dnbrv
    Mar 5, 2012 at 20:27

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.