Zooming and Panning

The current range of each axis defines a window of data on the chart. This window can grow smaller or larger using zoom operations or translated using pan operations. A pinch gesture on the plot area will result in a zoom and a drag gesture a pan. Gestures can be combined, just like they are on popular mapping kits, to produce combinations of pans and zooms. shinobicharts comes fully equipped with a comprehensive set of gestures for manipulating axis ranges.

Panning and zooming is enabled on a per axis basis, allowing full control over the window view of the data. The following code enables both panning and zooming for an x-axis:

    chart.xAxis.enableGestureZooming = YES;
    chart.xAxis.enableGesturePanning = YES;

The aspect ratio for the chart as a whole can be fixed, by default the axes support individual range changes. However, the ratio will be locked at the point of initial render by setting:

    chart.gesturePinchAspectLock = YES;

To give the pan and zoom gestures a more natural feel, you should enable the momentum effect. This will trigger a deceleration at the end of any one or combination of gestures:

    chart.xAxis.enableMomentumPanning = YES;
    chart.xAxis.enableMomentumZooming = YES;

There is a third gesture type that affects the current axis range, gestureDoubleTapResetsZoom. When set to YES, a double tap gesture will reset the axis ranges to the defaultRange (_See The Axes for a description of the ranges). Setting this feature to NO will cause a double tap gesture on the plot area to zoom an arbitrary amount in the direction of the tap. This effect is very similar to the behaviour of a map kit and is the default.

The last gesture type that can be used to control the current view of the chart plot area is the box zoom. A touch and drag with one or two fingers will superimpose a box on the plot area. As soon as the gesture is complete (the fingers are lifted clear) the chart will attempt to zoom and pan the plot area to cover the same area as the box. We recommend that the double tap gesture be configured to reset the zoom level when using the box gesture.

There are a large number of methods provided by the chart delegate that will notify you before, during and after pan and zoom operations. You should use these methods to manage any fixed zoom or pan limits where the axis properties allowPanningOutOfDefaultRange and allowPanningOutOfMaxRange don’t off the specific level of control you need. For example, use the sChartIsZooming: method to monitor the relevant axisRange and restrict it to a minimum/maximum range.

The delegate methods are also very useful for synching the ranges of multiple charts. Use the isPanning and isZooming methods to set the axisRange on other charts you’d like to keep in sync.

Note: Radial series do not currently support panning or zooming.

Disabling the Gestures

There are times, such as embedding charts in a scroll view, when you will not want the chart to consume certain gestures. In shinobicharts, a chart gesture recognizer will be disabled when the current configuration means it is no longer needed.

However, you can access the gesture recognisers directly on the overlay of the plot area. The array of recognizers can accessd at chart.canvas.overlay.gestureRecognizers. However, this is an series feature and you need to import SChartCanvas.h and SChartCanvasOverlay.h.

Panning a Pie/Donut Chart

Whilst the pie and donut charts don’t have axes, they do support a pan gesture. Individual pie and donut series can be set to allow rotation around their centre point through the gesturePanningEnabled property on each series. There are two key properties that support panning:

  • use rotationFriction to control the momentum after a pan
  • set selectionEnabledDuringPanning off to allow the user to stop the pan momentum without any selection animations triggering

The delegate provides the expected set of methods to respond to these pan events, however, there are several key properties and methods on the series that are useful tools. The current rotation of the series (from the original origin) is available through the rotation property. Use the method rotateSliceAtIndex:toAngle:withAnimation: to change the rotation of the pie or donut series. The indexOfSliceAtAngle: method should be used when you are detecting the current slice at a particular angle, recommended if you are using an indicator such as a needle to highlight slices.

Panning and Zooming Programatically

The fundamental effect of pan and zoom operations is a range change on one or more axes. Therefore, you should use one of the setRange… method variants on the axes to set the ranges to achieve the desired effect.

Quickly panning to a set location can be achieved using the panTo: method on the axis, where there are options to jump to the start, end or center of the visibleRange. Zooming by a relative amount, such as half of or double the current range, should be accomplished using the setZoomLevel: method.