Good way to choose a different scale for charts

Question

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.

Answer 1

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.

Answer 2

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!