Series overview

Telerik Chart for NativeScript comes with a bunch of series suitable for different types of data. There are two main chart types: Cartesian and Pie. Each of these chart types requires corresponding series types to be able to visualize the data. For RadCartesianChart you need to use CartesianSeries, and for RadPieChart you need to use PieSeries. CartesianSeries are represented by two main series types: scatter and categorical.

All series expose the following properties:

  • showLabels - determines whether labels are shown for each data point
  • legendTitle - determines the title which will be displayed in the legend for the current series
  • valueProperty - determines the name of the property on the source object that will provide the value used to plot the object in the chart
  • items - used to bind the series with a source of data items
  • selectionMode - responsible for the selection mode of the series. The values are:
    • None - the series cannot be selected
    • Series - the whole series will be selected
    • DataPoint - the touched data point will be selected only
  • labelStyle - property of type PointLabelsStyle defining the style of the point labels

Categorical series

The CartesianSeries are used for visualizing data objects that can fit into a given category and expose a value assigned to that category. Examples for categorical series include:

As CartesianSeries all categorical series share the base cartesian series API and provide a couple of additional properties needed for their proper initialization. The following properties are part of this object and are needed for correctly setting up a categorical chart:

  • categoryProperty - defines the name of the property on the data object which will be used to plot the object into the right category
  • stackMode - defines how separate series are combined within a single chart

Example

Here's a simple scenario using Bar series. In our NativeScript application we define 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:

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";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-bar',
    providers: [DataService],
    templateUrl: 'chart-series-bar.component.html'
})
export class ChartSeriesBarComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

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

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
    }
}
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>
</RadCartesianChart>

The following images demonstrate how your 'page' looks like on iOS and Android:

Chart series overview Chart series overview

Stack mode

There are scenarios in which a single Categorical chart can host multiple series. The stackMode property allows you to define how these series will interact with each other. The following options are available for the stackMode property:

  • None - series are displayed on top of each other in the order they are added in the chart
  • Stack - separate data points which reside in the same category are stacked on top of each other in the order they are added in the chart
  • Stack100 - separate data points which reside in the same category are stacked on top of each other and positioned proportionally so that the whole plot-area of the chart is filled

This is the data with which we will populate our series:

Example

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:

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";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-area',
    providers: [DataService],
    templateUrl: 'chart-series-area.component.html'
})
export class ChartSeriesAreaComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

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

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
    }
}
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <AreaSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></AreaSeries>
</RadCartesianChart>

The final result is shown in the two images (android and ios) below.

Cartesian chart: Area series Cartesian chart: Area series

Pie series

Pie series are a separate type of series that are used in context with a RadPieChart. There are two types of Pie series supported by Chart for NativeScript:

  • PieSeries - data is represented in the form of a pie where separate data-points are visualized as a slice of the pie
  • DonutSeries - the Pie series principles apply here with the only difference that there is a 'hole' in the middle of the pie which makes it look like a donut