I have two side-by-side charts, showing some time series data.

What would be the best way to convey that:

  • The second chart is a zoomed-in version of the first one
  • Give an indication of what is the area of the first chart that's highlighted in the second one ?

You could just draw a box on the first chart that signifies what area is highlighted in the second like so:

enter image description here

Alot of games use this to signify which part of the map you are seeing on your screen out of the whole map.

Or if you don't want to impede the viewing of the first chart with the overlay you can have a mini-map type view above the second chart showing the same view.

enter image description here

  • Unfortunately, both my charts are too small to overlay anything on top of them. But thanks for the clues! – Sam Sep 4 '15 at 18:23
  • If the charts are so small you can't indicate the zoom area, you're going to have a very hard time making the relationship clear. – plainclothes Sep 8 '15 at 16:32

A few additional ideas to address your zooming differentiation question:

  1. Instead of an overlay, you could try a preview window with a much simpler version of the chart.

enter image description here

Here is an interactive example: http://demos.zingchart.com/view/BWTCT87D

This gives users their bearings quite effectively without obscuring the chart area and using minimal real estate.

  1. You could try letting users scroll instead of select to zoom. That way the scrollbar will show they are partway through the chart, not viewing the entire data set. Think something like this: enter image description here Interactive version: http://www.zingchart.com/gallery/chart/#!multiseries-bar-chart-with-scrolling

I'm on the ZingChart team, so I used their charting library to come up with these demos. Other libraries can accomplish similar features. Please let me know if I can answer any questions about the examples included here.

  • May be my "at-work" browser but the first demo link is not found. – DasBeasto Sep 8 '15 at 18:05
  • 1
    Please try it again now demos.zingchart.com/view/BWTCT87D I may have not had the public settings checked properly. – Merrily Sep 10 '15 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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