0

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?

enter image description here

1
  • 1
    I've been down this rabbit hole several times and I found that eventually a Reset button is the most robust and intuitive solution. I never learned to like it because I don't think it's elegant, but I learned to live with it :). Feb 9, 2022 at 19:52

2 Answers 2

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.

1
  • 1
    thanks @Serg for the suggestion, i've actual incorporated your suggestion on making it semi transparent on hover. this allows the user to get a glimpse of the trend line of each location before analysing it in details
    – Blue Ocean
    Feb 11, 2022 at 3:01
0

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

enter image description here

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.