I develop a monitoring tool for applications, and one of the upcoming feature is a new "Latency Chart". This chart is made automatically as a jpg file, and it represents the latency of a given host for the last 24 hours (i.e. how many mili-seconds it takes to communicate from my host to the given host). It polls and collects data every minute.

Right now it looks like this one:

enter image description here

Well I have the following doubts and I'd like to ask what you think about:

a. It currently represents 3 modes: Up (then we show the latency metrics); Down (the given host in unreachable) and Unknown (times where the application is not polling and measure latency). Since both "Down" and "Unknown" states means 0 in latency, we can't distinguish them if the Y pivot starts at 0, so we put negative values of the Y pivot, so we can color red for "Down" and White\gray for "Unknown". It helps distinguish them, however I'm not sure if providing negative values in such graph is clear enough. I consider to unite them both to one state, named "Down or Unknown" so the Y pivot contains positive values only (starting from 0) and it probably helps the chart to be more clear. What do you think about?

b. Do you think that a line chart might be better than this bar chart (for that latency purpose)? Actually there's no need to color the area below latency values, so I'm wondering if it makes this chart more readable and clearer.

Thank you!


3 Answers 3


Have you considered overlaying your Down and Unknown state? Here's a low fidelity mockup of what I mean:

enter image description here

For point a, it makes sense to know when something is unknown (no data) or down (negative result).

For point b, I could see a line graph for the latency then overlay a bar or change the background for times where latency is undefined or the host is down. The bar will really catch your eye whereas the line graph communicates trends without the extra filled color distracting you from the data (especially if the values widely vary from your minimum value to maximum value).


If you are stuck for ideas, I Googled Latency Chart in Google images, so this should give you inspiration.

I imagine it will be important to know when latency is high (so that you can do something about it), and it might be important to know when the connection has failed (aka unknown, so that you can investigate). So in both cases you want to ensure the visualisation alerts the user.

Obviously the visualisation will depend on what you are measuring and how you are measuring it, but the key thing is it must communicate effectively because you need it to alert the user.

  • Thanks. Yes I've already googled (before posting here) but haven't found good examples. Besides I haven't mentioned that this chart is part of an alerting system, which means that the user gets alert if the latency rate is above a predefined threshold. Jun 10, 2016 at 10:08

Brendan Gregg (co-creator of DTrace) has done a great deal of work in visualizations of this type. His preference is a Latency Heat Map, which he explains in some detail in this blog entry.

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.