For a web application, I am looking for a good way to select the scale used in a chart. First, let me explain the scenario:

I have some data that I want to show as charts. The data is a number from 1 to 100 and for the aggregated data, it's the average number for the observations in the period.

  • For the last 5 minutes, I have data for every 5 seconds.
  • For the last 3 hours, I have data for every 1 minute.
  • For the last 3 days, I have data for every 10 minutes.
  • For the last 30 days, I have data for every 1 hour.
  • For the last 3 years, I have data for every 1 day.

Let's say the user has chosen to see data within the last 3 days, I want to show one small chart showing a miniature of the 3 days available and a large chart showing the specific data chosen by the user. As illustrated here: http://www.highcharts.com/demo/dynamic-master-detail/grid

Now, finally for my question: How can I make an intuitive design that allows the user to switch between the different scales?

The only usable thing I can come up with is to simply put a link for each scale, such as "Show data for the last 5 minutes, 3 hours, 3 days, 30 days, 3 years" etc. - or maybe as a slider...

But there must be an intuitive way that I haven't thought of.

  • Two questions: * Does it make sense to see all data together in one graph - last 3 years by day, last 30 days by hour and so on. Kind of part of the chart scaled up * If you have data every 5 seconds for last 5 minutes, does that data get trashed/aggregated after the 5 minutes ? - if so, is it to reduce size of storage ?
    – Alok Jain
    Aug 23, 2013 at 18:58
  • Yes, the data is as it is for technical reasons that cannot be changed. So I need to work with it as it is. It fits well with the assumption that people are some times interested in looking at detailed data for the last 5 minutes or get the big overview of the entire month while being OK with less details. Aug 24, 2013 at 11:36

2 Answers 2


Sometime removing functionalities and choosing for the user maybe a good approach

If you don't need to display the whole data on the lower graph. I choose to make the lower graph more static, remove the possibility to chose start and end of range at the same time. Let the user choose starting point but you decide the range (mostly depending of screen size and zoom level)

Display a mouse over square on the upper graph showing what is the more detail view with a + sign, and the zoom out on the lower graph with - sign.

  • Zoom in with +
    you display the more detail view with more data. You can change the time range at the same time. The user already see what range he will get so there is no pb with that. You can change the display range at will depending on graph width for example.
  • Zoom out with -
    In my idea I'll put it on the lower graph. Each time you press it you display a lower resolution graph, keep the previous data at the center and it will be good.
  • Scrolling left and right
    On the upper a drag left right seems good. On the lower a square of the selected region with drag left right might be the solution.

You have to choose range by testing a few times to look better than my fast sample but the idea is there.
Graph with zoom

  • I am not sure I fully understand. Can you explain with an example: The user has chosen to see data 15 days ago and can see data for every 1 hour. Now they zoom in to see every 10 minutes (where there is no data on this date). What happens? Aug 25, 2013 at 10:23
  • I'm now not sure I understand what you want :). If you want to be able to let the user zoom range and precision separately this could not work. In my idea data range and precision are linked. You choose the beginning of the range, the graph propose the end of the range depending of what's available and put a + sign. If you have no data there is no zoom, if more precise data is available zoom is shown. Maybe doing some code to simulate (by filling with same value on display) data every 5 second for last 3 years is more easy to manage.
    – ColdCat
    Aug 25, 2013 at 11:36
  • I don't exactly WANT them to zoom in range and precision separately, but this is the data I have. I guess to sum up your suggestion, it is to simply show whatever data is available at whatever zoom level the user chooses and not worry them about the technical detail that we only have data for a certain precision in certain date ranges. Aug 25, 2013 at 13:17
  • Maybe you could display on lower graph one colour for each detail level available from darker the more precise to lighter the least. Good luck to sum up ideas graph have so many options available.
    – ColdCat
    Aug 25, 2013 at 14:08
  • Actually I need to use the lower graph to show the interval of available data. For example, for hourly date, the lower graph shows all 30 days and then use can pick out maybe 5 of those days for a closer look. The reason is, that it makes no sense to show several years of data in a scale, if you right now are wondering whether you want to look at the last 5 or 10 minutes. Aug 25, 2013 at 14:20

The only solution that immediately comes to mind is a controls that adjust the scales using a zooming in and out metaphor (reminds me of the old film "Powers of Ten"). Zooming jumps to the next scale: 3 hours > 3 days > 30 days > 3 year, etc.

Of course zooming in also means you're bringing yourself closer to the current moment. To aid in understanding you might have a transition animation to show context (expand/contract to reveal the new scale). You could also trigger a scale change by detecting pinch in/out gesture. Good luck!

  • Zooming makes sense, but as you also say, it would be hard to understand that you are zooming in detail AND 'zooming' closer to the current moment at the same time. If I'm looking at a certain day 2 months ago and zoom in, I wouldn't expect to be moved to a different day. Aug 24, 2013 at 11:39

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.