Pan & Zoom

If you need a RadCartesianChart that allows you to zoom in/out to more granular values you should enable this feature setting the
corresponding property of the horizontal or vertical axis.

There are two boolean properties that enable this feature:

Setting Zoom Factor Programmatically

You can programmatically define a zoom factor by which the chart will zoom. This is done via two properties exposed by RadCartesianChart:

  • horizontalZoom - defines the zoom factor applied to the horizontal axis if zoom is enabled on it
  • verticalZoom - defines the zoom factor applied to the vertical axis if zoom is enabled on it

For example, if you set one of these properties to 1.5 this will apply a 50% zoom relative to the original zoom factor of 1.

Handling Pan&Zoom events

To notify you when the selection state of an item is changed, RadChartView exposes the following events:

  • chartZoomed - fired multiple times when the chart is zooming. The event data argument provides information about the event name and the chart that is zoomed.
  • chartPanned - fired multiple times when the chart is panning. The event data argument provides information about the event name and the chart that is panned.

Example

With the following example you can see that pan & zoom properties could be used for any axis assigned to a series or to the chart along with events handling.

Just like with all angular 'pages' let's start with the Component in which we will place our RadCartesianChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which will be used by the chart to provide intuitive data visualization.

The service is a simple 'mock' of an backend call that will return an array of objects:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
}

Inside that service we have a single function which returns an array:

getCategoricalSource(): Country[] {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
    ];
}
export class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
    }
}

All that is left is to declare the template of the angular component in which we:

  • Declare a RadCartesianChart
  • Declare the CategoricalAxis between the RadCartesianChart open and close tags.
  • After that set the tkCartesianHorizontalAxis directive to the CategoricalAxis and set its allowZoom to true. The verticalAxis will be series sepcific and is set on both BarSeries and LineSeries via binding.
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data-services/data.service';
import { Country } from '../data-services/country';
import { ObservableArray } from "data/observable-array";
import { LinearAxis } from "nativescript-telerik-ui-pro/chart";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-behaviors-pan-zoom',
    providers: [DataService],
    templateUrl: 'chart-behaviors-pan-zoom.component.html'
})
export class ChartBehaviorsPanZoomComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;
    private _linearAxisZoomPan: LinearAxis;
    private _linearAxisZoom: LinearAxis;

    constructor(private _dataService: DataService) { }

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
        this._linearAxisZoom = new LinearAxis();
        this._linearAxisZoom.horizontalLocation = "Left";
        this._linearAxisZoom.allowZoom = true;

        this._linearAxisZoomPan = new LinearAxis();
        this._linearAxisZoomPan.horizontalLocation = "Right";
        this._linearAxisZoomPan.allowZoom = true;
        this._linearAxisZoomPan.allowPan = true;
    }

    get categoricalSource(): ObservableArray<Country> {
        return this._categoricalSource;
    }

    public get linearAxisZoomPan(): LinearAxis {
        return this._linearAxisZoomPan;
    }

    public set linearAxisZoomPan(value: LinearAxis) {
        this._linearAxisZoomPan = value;
    }

    public get linearAxisZoom(): LinearAxis {
        return this._linearAxisZoom;
    }

    public set linearAxisZoom(value: LinearAxis) {
        this._linearAxisZoom = value;
    }

}
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <BarSeries tkCartesianSeries seriesName="Bar" [items]="categoricalSource" [verticalAxis]="linearAxisZoomPan" stackMode="Stack"
        categoryProperty="Country" valueProperty="SecondVal"></BarSeries>
    <LineSeries tkCartesianSeries seriesName="Line" [items]="categoricalSource" [verticalAxis]="linearAxisZoom" stackMode="Stack"
        categoryProperty="Country" valueProperty="Amount"></LineSeries>

    <CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
</RadCartesianChart>