Quick Start Guide > Tutorials (Xamarin.iOS) > Tutorial 04 - Adding Zooming and Panning behavior
Tutorial 04 - Adding Zooming and Panning behavior

Following on from Tutorial 03 - Adding Series to a Chart where we created some series, we will now add zooming, panning behaviors to the chart.

Adding Zooming, Panning Behaviors

Source code for this tutorial can be found at our Xamarin Examples Github Repository under Tutorials.iOS

So far in the tutorial series, we have created a new chart, added an XAxis, YAxis and also some series.

We're going to extend this now to add zoom, pan behaviour to the chart. Modify the code from Tutorial 03 - Adding Series to the chart as follows.

Adding ZoomExtents, AxisDrag, PinchZoom modifiers
Copy Code
        void AddModifiers()
        {
            var xAxisDragmodifier = new SCIXAxisDragModifier();
            xAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            xAxisDragmodifier.ClipModeX = SCIClipMode.None;
            var yAxisDragmodifier = new SCIYAxisDragModifier();
            yAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            var extendZoomModifier = new SCIZoomExtentsModifier();
            var pinchZoomModifier = new SCIPinchZoomModifier();
            var groupModifier = new SCIChartModifierCollection();
            groupModifier.Add(xAxisDragmodifier);
            groupModifier.Add(yAxisDragmodifier);
            groupModifier.Add(pinchZoomModifier);
            groupModifier.Add(extendZoomModifier);
            _surface.ChartModifiers = groupModifier;
        }

The above code adds a number of ChartModifiers to the ScIChartSurface. ChartModifiers add behaviours to the chart, which can include Zooming, Panning, Tooltips, Legends and more.

As well as in the previous tutorial, let's call this method in ViewDidLoad method. Your code should look as follows:

Adding ZoomExtents, AxisDrag, PinchZoom, Rollover modifiers
Copy Code
using System;
using UIKit;
using SciChart.iOS.Charting;
namespace HavingFunWithSciChartiOS
{
    public partial class ViewController : UIViewController
    {
        private SCIChartSurface _surface;
        private XyDataSeries<Double, Double> _lineDataSeries;
        private XyDataSeries<Double, Double> _scatterDataSeries;

        private SCIFastLineRenderableSeries _lineRenderableSeries;
        private SCIXyScatterRenderableSeries _scatterRenderableSeries;
        public ViewController(IntPtr handle) : base(handle)
        {
        }
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.
            _surface = new SCIChartSurface();
            _surface.TranslatesAutoresizingMaskIntoConstraints = true;
            _surface.Frame = this.View.Bounds;
            this.View.AddSubview(_surface);
            _surface.XAxes.Add(new SCINumericAxis());
            _surface.YAxes.Add(new SCINumericAxis());
            CreateDataSeries();
            CreateRenderableSeries();
            AddModifiers();
        }
        void CreateDataSeries()
        {
            // Init line data series
            _lineDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i<10; i++)
            {
                _lineDataSeries.Append(i, Math.Sin(i));
            }
            // Init scatter data series
            _scatterDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i < 10; i++)
            {
                _scatterDataSeries.Append(i, Math.Sin(i));
            }
        }
        void CreateRenderableSeries()
        {
            _lineRenderableSeries = new SCIFastLineRenderableSeries();
            _lineRenderableSeries.DataSeries = _lineDataSeries;

            _scatterRenderableSeries = new SCIXyScatterRenderableSeries();
            _scatterRenderableSeries.DataSeries = _scatterDataSeries;

            _surface.RenderableSeries.Add(_lineRenderableSeries);
            _surface.RenderableSeries.Add(_scatterRenderableSeries);
        }
        void AddModifiers()
        {
            var xAxisDragmodifier = new SCIXAxisDragModifier();
            xAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            xAxisDragmodifier.ClipModeX = SCIClipMode.None;
            var yAxisDragmodifier = new SCIYAxisDragModifier();
            yAxisDragmodifier.DragMode = SCIAxisDragMode.Pan;
            var extendZoomModifier = new SCIZoomExtentsModifier();
            var pinchZoomModifier = new SCIPinchZoomModifier();
            var groupModifier = new SCIChartModifierCollection();
            groupModifier.Add(xAxisDragmodifier);
            groupModifier.Add(yAxisDragmodifier);
            groupModifier.Add(pinchZoomModifier);
            groupModifier.Add(extendZoomModifier);
            _surface.ChartModifiers = groupModifier;
        }
        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

 

Now build and run the project!

This is what you should see. Try dragging axis, tapping and double tapping on the chart. 

See Also