2

I have a line graph showing number of items in queue from right now and 24 hours back in time.

I have a range of different options to chose from.

First, there are two different ways of showing the data; per hour or per minute, i.e. show it like "8:00AM" or "8:28AM". The :00-way looks cleaner, but the problem is that if it is 08:54AM it will show the time of 08:00AM since it can not go forward in time (to 09:00AM although it would be more accurate).

1)

This is the :00-way, looks kind of clean, very detailed, i.e. you can easily see the number on the curve at one specific time.

enter image description here

This is what it would look like six hours later, all numbers will change: enter image description here

2)

This is the :54-way. Looks a little cluttered, but serves it purpose of showing the exact time. This option will also create another question, should the numbers in the axis change each minute? Will the user think it looks weird when all numbers change even though he didn't do any action to make it change? If the numbers should not change each minute: Will the user be confused when the time is not corrent anymore?

enter image description here

This is what it would look like six hours later:

enter image description here

3)

This is a different way of showing the time. This is only showing the time right now and a "-24h" to symbolize that the graph shows the queue from now and 24 hours back in time.

The downside of this is that the user might find it hard to know what time it is in the middle of the graph.

enter image description here

This is what it would look like six hours later, pretty much the same except 1 (sometimes 2) numbers:

enter image description here

4)

The fourth option is kind of like the third option, but instead of the :00-way, it is with the :54-way.

What way would be the best practice? A good thong to know is that I will have four line graphs next to each other, which might make it very cluttered if there are too many numbers. Or does any of you have another opinion?

I hope I was able to make myself clear, otherwise I will answer any doubts :)

1 Answer 1

1

Firstly, do not change the values on either axis without alerting the user to the fact that they have changed. By changing the values you are creating a moving reference point which is not usually a good thing.

It sounds like you're getting stuck with the idea that the axis markers determine the resolution of the graph. This doesn't have to be the case. You can retain your neat perfect hour solution but make the data points hit wherever they need to.

You say that you can't show future data on your graph but you can show space for future data.

Allow your axis to extend to the next available hour mark but show the data up to the present time. Your 8:54 example might look something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This chart shows data points at 6:30, 7:15, 7:45, and 8:54

You could, of course, further enhance this by adding tool tips or point markers showing the exact time the data point occurs but the important point is that your axes do not dictate the resolution of the data points on the chart.

1
  • Thank you so much for your input! The problem with this, otherwise good, answer is that the framework we use to create the line chart does not allow us to do this. The axis markers is locked to the data points, I'm afraid. So whatever time the label says, this is from where the numbers will be gotten.
    – efrethe
    Jun 7, 2016 at 10:23

Your Answer

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

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