Interaction

Zooming and panning

Zooming and panning can be handled using a ZoomPanHandler, which combines a PinchHandler and a MouseArea into one type that translates touch and mouse inputs into a transformation. The ZoomPanHandler has two outputs:

• viewTransform, which can be provided to a Matrix4x4 transform, and used on any Item, or passed to GraphArea::viewTransform to scale a graph
• baseTransform, which is a more size-independent version of viewTransform which can be translated into a view rect using ZoomPanHandler's utility methods

With these properties, two sorts of interaction can be implemented:

• Zooming into a graph as if it's an image. This can be useful for large or complex figures, where the user may not be able to see the details. This can be achieved by applying the viewTransform to the Item which contains the graph (e.g. the GridLayout or XYAxes). See the Zoomable as image example for more details.
• Using zooming and panning to change the axes limits. This can be used when the data itself is has complex detail that is not visible when all of the data is shown. This can be achieved by passing the viewTransform to the GraphArea, and optionally providing a set of spin boxes for precise control of the limits. See the Zoomable axes example for more details.

Interactive graph items

There is a huge amount of interaction possible in a graph, so here we'll stick to the basics. Things you might want to add to your graph include:

• Draggable regions
• Hover text / tooltips
• Read out of where the cursor is
• Buttons over particular data points

All of this can be implemented using MouseArea, or using a control, and using the x and y properties to position the Item (this is because graph items usually inherit from ShapePath, which is not an Item, and so anchors do not work).

The Readout line example demonstrates using a MouseArea to monitor the position of the mouse and translate it into data coordinates, a similar arrangement can be used for tooltips.

The Draggable region example uses a GraphItemDragHandler (another MouseArea helper) to implement a draggable and resizable region.

In general, because QML already provides so many interactive items, adding interactivity to a graph is easy and just uses standard QML items, with a bit of extra maths to do positioning since it often needs to be done in data coordinates instead of purely using pixel coordinates.