13

In this data visualization chart, we wanted to make user understand that the chart is interactive.

When someone clicks and drags any point, the selection expands. This helps drilling down in the data. However when we see the chart, we don't understand that it's interactive.

We can show a label like:

Drag the points to expand selection

We can also train user - this will be expensive.

However, is there a visual way to represent drag capability?

Improve this question

7 Answers 7

Reset to default
11

When the cursor enters the graph area, change its symbol to a "move cursor" :

enter image description here

EDIT :

An alternative solution is use this icon when the mouse enters the graph area :

enter image description here

and this icon when user clicks on the graph area :

enter image description here

Improve this answer
2
  • 1
    @student not a great example since the handles appear after clicking the bars. They should appear on mouse over to indicate the user can click it in the first place.
    – Summer
    Aug 18, 2016 at 11:39
  • 2
    @student I have added an alternative solution.
    – DesignerAnalyst
    Aug 19, 2016 at 5:19
13

You can add a scrollbar or preview chart to clearly indicate that users can zoom in/out and interact with the chart. This makes instructional text unnecessary. See the following demos.

In addition to the scrollbar or preview handles, the user can still click and drag to zoom in on an area of the chart. They can also use the context menu (right-click to access) to zoom in or out.

Stock and Volume Chart with Interactive Zooming and Scrolling

Interact with the scrollbar demo here: http://demos.zingchart.com/view/0QLBB477

Candlestick Chart with Interactive Zooming and Preview

Interact with the preview chart demo here: http://demos.zingchart.com/view/VH9JD4AI

This Zooming, Scrollbar, and Preview Chart Tutorial provides more information and examples.

Disclosure: I'm a member of the ZingChart team. Let me know if you have further questions.

Improve this answer
2
  • 1
    +1 for your detailed answer. However, for our current requirements, changing the cursor is good enough :)
    – Zameer Ansari
    Aug 19, 2016 at 6:16
  • 1
    I find this far more intuitive, because it's the window we want to change, not the data of the graph. I feel reluctant dragging a point of the graph around because it feels as I would be chaning the data behind the graph. Also note that dragging a point around to change the data is already an established UI pattern, for example in Photoshop, where it can be used it to change the gamma of an ink.
    – Ideogram
    Aug 24, 2016 at 5:24
3

Okay, so first, by playing around with this viz, it's difficult to understand what exactly is happening with the drag interaction. Is it selecting a new range for the x axis? Is is scrolling side to side? Is it simply expanding or reducing the scale of the x axis?

Currently, it's extremely unclear what's exactly going on even when interacting with it. Once that's figured out, it might be easier to figure out what can be done to indicate the interactive property of the chart

Improve this answer
3

Just add text below the graph and add arrows to the left and right end of the time periods.

See below:

enter image description here

Improve this answer
3

slider

you can have a zoom toolbar that appears when you hold the mouse button and as you slide the graph and the slider slides

Improve this answer
2
  • The trouble with this is that the user has to initially press the mouse button over the chart to discover this. Is there a way to let them know they can interact before they start using it?
    – JonW ♦
    Aug 18, 2016 at 11:16
  • The hand cursor shows up on hover which will be indicative of interactivity.
    – Aswin
    Aug 18, 2016 at 11:18
2

You can also use zoom and pan-like functionality, as illustrated in this example.

Improve this answer
1

I agree with @Elizabeth 's option (making the axes expandable and scrollable). Because pictures are not possible in comments, I'll use an answer to include another example: the 'graph editor' from Blender3d. (blender3d.org) It's used to change the coordinates (or other properties) of 3d objects over time.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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