I have a chart control and a time bound value. The control displays the value aggregated over equal intervals of time. It is important to display the corresponding time range for each aggregated data point. This time range has to be accurate, readable, yet as compact as possible because the available space is limited. The size of intervals can be 15 min, 30 min, 1 hr, 3 hr, 6 hr, 12 hr, 1 d. The readings can start at any moment of time, so the edges of intervals are not aligned or rounded to the time grid. The smallest time unit is 1 minute.

enter image description here

  • Can you provide a screenshot to illustrate this? At present, it's difficult to understand the problem that you're trying to solve. Commented Aug 6, 2013 at 19:01
  • just added, take a look Commented Aug 6, 2013 at 19:21

4 Answers 4


Is there a reason to have a single point which shows the range? I would imagine that this could work better with discrete 'range start' and 'range end' points, like this: Plot example

You probably wouldn't need to display the year in this context, as the year will be defined by plot as a whole. You will need to think about time zones, though... you may want to define the time zone being presented somewhere on the page.

One could even image these range start/end indicators functioning as handles, allowing you to dynamically select the range.

  • I really like your idea. Unfortunately the time for reworking the control the way you suggested won't be approved. Out of the box it only displays a single point, not a range. But can be something the vendor who developed the control might want to consider in a future update. Commented Aug 6, 2013 at 20:05

If you want it to be compact, only mention values that change over the interval.

Don't mention the year unless the interval includes midnight after New Year's Eve.
Don't mention the month unless the interval includes midnight after the last day of a month.
Don't mention the day unless the interval includes midnight.

Users should be able to gather the other units from other parts of the view, so...

  • For instance, I can tell from view elements other than your white-on-black text block that the graph is for July and August.
  • I actually can't see that it's for 2013, but you can fix that easily by including that in the top bar with the months.
  • I can see that the day is the 22nd in this case, but if you are not already doing so, you would want to make sure that there is always a date sitting at the top of your black line (start point marker), as there is now.

All of this means that the majority of cases will involve mentioning just the time (no date) for the start point, and then you have two choices for filling in the rest of the information, of course.

You could give the start point and just the interval duration, as mentioned by Liviu A, for minimum size. Since what I am suggesting would cut down on the amount of text for the start point, though, you could also specify the end point, and the resultant increase in readability should be worth the slight increase in space. Again, in most cases this will just be a time.

examples: ("2013", "July", and "22" gathered from other elements of the view)

  • 6:15PM, 15min
  • 6:15PM–6:30PM

a few other choices, if you are serious about compactness:

  • ** 6:15–6:30PM (since "PM" is something else that does not change over the interval)
  • 6:15–30PM (hour also does not change) (this one might sacrifice readability too much)
  • 18:15–18:30 (24-hour time saves space (no AM or PM) and for some users is easier)
  • 18:15–30 (most compact, but probably too far)

** sample:


These should be easy changes from your current design.

(Actually, specifying the end point gives an advantage: Since your largest interval is 1 day, a user will know any interval ends on the day after the start point when the end point is an earlier time. This means that if you choose to show the end point, you will really only need times for all cases, and not just most cases.)


I think it's a solution to divide graph area on two zones:

  1. Visual analysis zone – for quick grasping points or patterns and selection. There is very quick orientation in this zone as it is visual, not reading zone for rough analytics and picking interesting points.
  2. Quantitative analysis zone – for precise analytics. Here is left-to-right in-row eye scanning and reading pattern used. As you can see, there are a lot of space for exact time interval and other values.

The advantages are:

  • taking into account specifity of information perception by human (images – quick, reading – slow)
  • clean graph area (zone 1)
  • placing all values for precize analytics in one area (zone 2) for creating analysis flow
  • a plenty of space for an accurate and readable time formatting

enter image description here

  • What would be disadvantages of this? Commented Aug 7, 2013 at 13:34
  • One disadvantage I see is a bit harder task for searching exact time interval in zone 1, as it is displayed at zone 2, not so close to cursor position. But making interval more noticable (there is enough place for this) solves this problem. Commented Aug 7, 2013 at 13:42

One solution would be to display it something like this:

6:24 pm + 3h, Jul 22, 2013

6:12 pm + 15m, Jul 22, 2013 etc

basically just show the start time + the interval's length; i think this way it would be easier for the users to figure out what the interval represents

---- added some more info

depends on what information is important to your users:

  • in this case they will need to if they want to know the exact time the interval ended (not sure if this really important for your users)
  • in the case where you display start-end time, they will have to solve a little math problem if they want to know what the interval length is

it seems to me that in practice the second case will be harder to do, because as you've mentioned the timestamps aren't starting at fixed intervals

so something like 17:47-18:02 is not as apparent as 17:47 + 15m. Also, this way you get an instant sense of what scale the graph is showing (ie. data at 15minutes intervals, etc).

  • So you are suggesting to solve a little math problem instead of displaying the answer right off? Commented Aug 7, 2013 at 14:27
  • added some more info
    – Liviu A
    Commented Aug 8, 2013 at 6:00
  • I disagree; I suspect to most people, it would be clearer if you show the start and end times than if you show the interval. Like bonomo says, you're asking people to do maths to work out what the range is instead of just showing the range like they originally asked. Commented Aug 8, 2013 at 10:19
  • @LiviuA, when you say it like that it makes perfect sense youtube.com/watch?v=0TYdrfm7yaI Commented Aug 8, 2013 at 13:31

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.