RangeBar series: Overview

Range bar series are a special case of bar series where the width of each bar denotes the difference between data point's low and high value. The bars can be displayed either horizontally, or vertically, depending on whether the CategoricalAxis is the vertical axis or the horizontal one. When the horizontal axis is categorical, the rectangles are displayed vertically. This means that they have equal width while their height represents the difference between the numerical values of each of the data points. The low value is the rectangle's start point, while the high value is the end point. On the other hand, when the vertical axis is categorical, the rectangles have equal height, while their width represents the difference between the values of the data point.

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:

getRangeBarSource(): Product[] {
    return [
        { Name: "Groceries", High: 30, Low: 12, Sales: 0, Margin: 0 },
        { Name: "Tools", High: 135, Low: 124, Sales: 0, Margin: 0 },
        { Name: "Electronics", High: 55, Low: 12, Sales: 0, Margin: 0 },
        { Name: "Gardening", High: 50, Low: 29, Sales: 0, Margin: 0 }
    ];
}

export class Product {
    constructor(public Name?: string, public High?: number, public Low?: number, public Sales?: number, public Margin?: number) {
    }
}

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

• Declare a RadCartesianChart
• Declare the CategoricalAxis and LinearAxis between the RadCartesianChart open and close tags
• After that set the tkCartesianHorizontalAxis and tkCartesianVerticalAxis directive to the axes
• Finally declare a RangeBarSeries instance to it, bind the items to the source of data and set the tkCartesianSeries directive

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Product } from '../../data-services/product';
import { ObservableArray } from "tns-core-modules/data/observable-array";

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

    constructor(private _dataService: DataService) { }

    get rangeBarSource(): ObservableArray<Product> {
        return this._rangeBarSource;
    }

    ngOnInit() {
        this._rangeBarSource = new ObservableArray(this._dataService.getRangeBarSource());
    }
}

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis verticalLocation="Bottom" labelSize="11"></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis horizontalLocation="Left" labelSize="11"></LinearAxis>

    <RangeBarSeries tkCartesianSeries [items]="rangeBarSource" showLabels="true" legendTitle="Ranges" categoryProperty="Name" lowPropertyName="Low"
        highPropertyName="High"></RangeBarSeries>
</RadCartesianChart>

Depending on the required Bar orientation, you can swap the axes' position and assign the CategoricalAxis to the horizontalAxis property and the Linear to the verticalAxis property. This will change the orientation of the bars to vertical.