Quick Start Guide > Tutorials (Java Android) > Tutorial 04 - Adding Zooming, Panning Behavior
Tutorial 04 - Adding Zooming, Panning Behavior

In this tutorials, followingTutorial 03 - Adding Series to a Chart where we created data series, we add the ability to zoom and pan to the chart.

The source code for this tutorial can be found at  SciChart.Android.Examples Github Repository

Adding Zooming and Panning

So far in the tutorial series, we have created a new chart, added an XAxis and YAxis, added some data series, and simple zoom modifiers. Now are going to extend that and add more interaction behavior with other ChartModifiers.

ChartModifiers

In SciChart, chart interactions are defined by ChartModifiers. In addition to the SciChart modifiers you can write custom modifiers or extends existing ones.

The provided modifiers include PinchZoomModifierRubberBandXyZoomModifierZoomPanModifierZoomExtentsModifierCursorModifierRolloverModifier, SeriesSelectionModifier and others.

Adding Chart Modifiers

Now we are going to create and configure a couple of new modifiers using SciChartBuilder and add them to the ChartModifiers collection of the SciChartSurface:

Copy Code
ModifierGroup chartModifiers = sciChartBuilder.newModifierGroup()
.withPinchZoomModifier().build()
.withZoomPanModifier().withReceiveHandledEvents(true).build()
.withZoomExtentsModifier().withReceiveHandledEvents(true).build()
.withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Scale).withClipModeX(ClipMode.None).build()
.withYAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
.build();

Then we add it to the collection:

Copy Code
Collections.addAll(surface.getChartModifiers(), chartModifiers);

After re-building and running the application the chart should behave like this:

 

Further Reading

To learn more about the zooming and panning modifiers provided by SciChart out of the box please find links to the corresponding documentation articles below:

Also you can find out about the ChartModifiers API and how to use it to create custom chart modifiers in the Custom Modifiers - ChartModifierBase API article.

See Also