What's an intuitive way to reset drill down charts to their default state?

Question

I'm building a drill-down chart flow that has two graphs that work together

On the left, the bar graph has a list of locations and their temperatures. On the right, there's a temperature timeline of the same locations. In order to isolate one location, when any bar is clicked, both graphs update showing only that location allowing the user to focus on analyzing that location.

I'm trying to come up with a way to reset both graphs to their original state. At the moment I do this with the 'reset' button on the right. This is disabled by default but is enabled when the user has isolated one location. Is this solution intuitive? Is there a better way I could achieve this?

Answer 1

First, you make selection in Locations part and Reset button is at Trends part. This does not look obvious.

Second, what you are doing is just setting filter on Locations. So alternative action is really Reset Filter.

Third, let's consider the case 'out of context' - when one person set filter and then another person comes and need to interpret what's going on. He needs clear information that he sees filtered content as well as needs clear information on how to see full content.

I think a button like 'Reset filter' should be located at Locations part.

Also, to develop the idea of filtering you may provide something like checkmark near each location thus user could select more than one Location.

Another thing is you may not remove all bars when one is selected but make them semitransparent that will make the whole picture more clear. As well as in such case you have more options for interfacing like user still able to click another Location to see its details without resetting a whole filter and then pressing desired Location - one action instead of two.

Answer 2

I don't think you need an extra button, it could be simpler:

• Click a location bar to see its trends graph
• Click again this same location bar to go back to the original state

Here is a similar good example of Chart Toggle Interaction from dribbble

• All graphs are visible
• Hovering an item isolate a graph
• There is a button on each item to switch visibility between graphs