RadChartView: PanAndZoomBehavior

With PanAndZoomBehavior, RadCartesianChartView handles the gestures drag, pinch open and pinch close which respectively cause panning, zooming in and zooming out of the associated chart plot area.

Getting Started

You can read from the Getting Started page how to define the MonthResult type and declare the initData() method.

After you create the method for initialization of sample data, you can create a RadCartesianChartView with LineSeries and add a ChartPanAndZoomBehavior by adding the following code to the onCreate() method of your Activity.

    initData();

    RadCartesianChartView chartView = new RadCartesianChartView(this);

    ChartPanAndZoomBehavior behavior = new ChartPanAndZoomBehavior();
    chartView.getBehaviors().add(behavior);

    LineSeries lineSeries = new LineSeries();
    lineSeries.setCategoryBinding(new PropertyNameDataPointBinding("Month"));
    lineSeries.setValueBinding(new PropertyNameDataPointBinding("Result"));
    lineSeries.setData(this.monthResults);
    chartView.getSeries().add(lineSeries);

    CategoricalAxis horizontalAxis = new CategoricalAxis();
    chartView.setHorizontalAxis(horizontalAxis);

    LinearAxis verticalAxis = new LinearAxis();
    chartView.setVerticalAxis(verticalAxis);

    ViewGroup rootView = (ViewGroup)findViewById(R.id.container);
    rootView.addView(chartView);

    InitData();

    RadCartesianChartView chartView = new RadCartesianChartView(this);

    ChartPanAndZoomBehavior behavior = new ChartPanAndZoomBehavior();
    chartView.Behaviors.Add(behavior);

    LineSeries lineSeries = new LineSeries();
    lineSeries.CategoryBinding = new MonthResultDataBinding ("Month");
    lineSeries.ValueBinding = new MonthResultDataBinding ("Result");
    lineSeries.Data = (Java.Lang.IIterable)this.monthResults;
    chartView.Series.Add(lineSeries);

    CategoricalAxis horizontalAxis = new CategoricalAxis();
    chartView.HorizontalAxis = horizontalAxis;

    LinearAxis verticalAxis = new LinearAxis();
    chartView.VerticalAxis = verticalAxis;

    ViewGroup rootView = (ViewGroup)FindViewById(Resource.Id.container);
    rootView.AddView(chartView);

Features

Pan Mode and Zoom Mode

You can specify whether the Pan /Drag/ gesture will be handled for all directions, only for one, or for none. This behavior can be modified with setPanMode(int). The same is applicable for the pinch in/out gesture, which can be modified with **setZoomMode(int). The possible values are for both modes are:

ChartPanZoomMode.BOTH: the default mode, where the chart can be panned and zoomed in both directions
ChartPanZoomMode.HORIZONTAL: the chart will be able to be panned or zoomed only horizontally
ChartPanZoomMode.VERTICAL: the chart will be able to be panned or zoomed only vertically
ChartPanZoomMode.NONE: the chart will NOT be panned or zoomed in either direction

You can get the current modes for these modes with getPanMode() and getZoomMode().

Zoom Strategy

ChartPanZoomBehavior supports two zoom strategies out of the box. These are ChartZoomStrategy.IMMEDIATE and ChartZoomStrategy.DEFERRED. In IMMEDIATE mode, the chart reacts to every pinch gesture and redraws the chart accordingly. This can become troublesome if you need to zoom a lot, since you will have to do a lot of pinching to get to the desired zoom level. In this case the DEFERRED strategy would be more useful since you can simply pinch to create a zoom rectangle. This rectangle defines the area which will be stretched to fill the whole chart plot area, the smaller the chosen rectangle, the larger the zoom will be.

Developers can set the zoom strategy like so:

    panZoomBehavior.setZoomStrategy(ChartZoomStrategy.DEFERRED);

    panZoomBehavior.ZoomStrategy = ChartZoomStrategy.Deferred;

Here is what the zoom rect looks like:

TelerikUI-Chart-Behavrios-Zoom-Deferred

Double Tap

By default, the pan and zoom behavior also provides zooming capabilities for the double tap gesture. This means that the chart will be zoomed in or zoomed out when this gesture occurs. This can be changed with the method setHandleDoubleTap(boolean):

    behavior.setHandleDoubleTap(false);

    behavior.HandleDoubleTap = false;

You can always check what is the current value through getHandleDoubleTap().