RadChart: Getting Started

In this article, you will learn to get started with Telerik Chart for NativeScript: how to initialize the chart, how to create the data series and how to use the different axes.

Make sure you have the Telerik UI for NativeScript Pro installed to be able to use Chart for NativeScript.

Adding a RadCartesianChart to your Component's template

Let's start with the Component in which we will place our RadChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which has two properties that 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) {
    }
}

RadChart initialization.

The first step is to add the chart to the template of your Component. In this case we will use the RadCartesianChart type.

After adding the chart we need to set the horizontalAxis to an instance of a CategoricalAxis and the verticalAxis to an instance of a LinearAxis. Following the same patter as with the series object we need to:

  • Declare the CategoricalAxis and LinearAxis between the RadCartesianChart open and close tags.
  • After that set the tkCartesianHorizontalAxis and tkCartesianVerticalAxis directive to the axes.

After the axes are set we need to add the series which we will show in the chart. In this case we will use the LineSeries in combination with a Categorical and a Linear axes.

  • First we need to declare the LineSeries between the RadCartesianChart open and close tags.
  • We set the categoryProperty of the series to the Country property in the objects from the categoricalSource array of the Component and the valueProperty to the Amount property.
  • Finally in order for angular to be able to relate the series object with the RadCartesianChart we need to set the tkCartesianSeries directive to the LineSeries.

The DataService and Country are custom modules used for example purposes so make sure you import them accordingly from your project's folder structure.

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-line',
    providers: [DataService],
    templateUrl: 'chart-series-line.component.html'
})
export class ChartSeriesLineComponent 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>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></LineSeries>
</RadCartesianChart>

This will produce a page showing a Chart that will look like:

TelerikUI-Chart-Getting-Started TelerikUI-Chart-Getting-Started