Bubble series: Overview

Bubble series are CategoricalSeries and are used in the context of a RadCartesianChart, CategoricalAxis and LinearAxis. Ontop of the requirements for a CategoricalAxis, BubbleSeries require an additional setup parameter which should come from the data source that defines the bubble size. The value for this parameter is supplied by defining the bubbleSizeProperty.

Customization

Ontop of the customization options that come from the CategoricalSeries context, BubbleSeries expose the bubbleScale property which can be used to fine-tune the size of the bubbles according to specific application requirements. The way the bubbleScale property works is by multiplying its value to the radius of calculated for each data-point's bubble.

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:

getHighDataModel(): Country[] {
    return [
        { Year: 2000, Amount: 15, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1456, Amount: 13, Impact: 7, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1866, Amount: 25, Impact: 10, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1900, Amount: 5, Impact: 3, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1700, Amount: 17, Impact: 4, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1600, Amount: 20, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
    ];
}

getMiddleDataModel(): Country[] {
    return [
        { Year: 1200, Amount: 15, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1156, Amount: 13, Impact: 7, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 1000, Amount: 25, Impact: 10, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 900, Amount: 5, Impact: 3, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 700, Amount: 17, Impact: 4, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 600, Amount: 20, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
    ];
}

getLowDataModel(): Country[] {
    return [
        { Year: 200, Amount: 15, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 456, Amount: 13, Impact: 7, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 366, Amount: 25, Impact: 10, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 100, Amount: 5, Impact: 3, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 340, Amount: 17, Impact: 4, Country: "", SecondVal: 0, ThirdVal: 0 },
        { Year: 135, Amount: 20, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 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 and LinearAxis between the RadCartesianChart open and close tags
  • After that set the tkCartesianHorizontalAxis and tkCartesianVerticalAxis directive to the axes
  • Finally declare a BubbleSeries 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 { Country } from '../../data-services/country';
import { ObservableArray } from "tns-core-modules/data/observable-array";

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

    constructor(private _dataService: DataService) { }

    get highDataModel(): ObservableArray<Country> {
        return this._highDataModel;
    }

    get middleDataModel(): ObservableArray<Country> {
        return this._middleDataModel;
    }

    get lowDataModel(): ObservableArray<Country> {
        return this._lowDataModel;
    }

    ngOnInit() {
        this._highDataModel = new ObservableArray(this._dataService.getHighDataModel());
        this._middleDataModel = new ObservableArray(this._dataService.getMiddleDataModel());
        this._lowDataModel = new ObservableArray(this._dataService.getLowDataModel());
    }
}
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis verticalLocation="Bottom" labelFitMode="Rotate" labelRotationAngle="1.2"></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <BubbleSeries tkCartesianSeries [items]="highDataModel" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact"></BubbleSeries>
    <BubbleSeries tkCartesianSeries [items]="middleDataModel" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact"></BubbleSeries>
    <BubbleSeries tkCartesianSeries [items]="lowDataModel" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact"></BubbleSeries>
</RadCartesianChart>

Cartesian chart: Bubble series Cartesian chart: Bubble series