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
andLinearAxis
between theRadCartesianChart
open and close tags - After that set the
tkCartesianHorizontalAxis
andtkCartesianVerticalAxis
directive to the axes - Finally declare a
RangeBarSeries
instance to it, bind theitems
to the source of data and set thetkCartesianSeries
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.