Chart Bubble Series

BubbleSeries are a type of CategoricalSeries that present categorical data with bubble shapes plot on cartesian coordinates based on the values that they represent. The bubble chart usually shows comparisons among discrete categories but can also be used to visualize a trend in data over intervals of time. They differ from BarSeries not only by the shape used, but also that they can visualize a third value (on top of category and value) through the size of the bubbles. If you want to show bubbles for data which is not categorical, you can use ScatterBubbleSeries.

Setup
Bubble Scale
References

Setup

To display a Bubble Chart, you will need to:

Add a RadCartesianChart to your component.
Add a category axis (CategoricalAxis, DateTimeCategoricalAxis or DateTimeContinuousAxis) with the tkCartesianHorizontalAxis directive.
Add a value axis (BubbleSeries or LogarithmicAxis) with the tkCartesianVerticalAxis directive.
Add at least one instance of BubbleSeries with the tkCartesianSeries directive and set its items property to a collection of data items, its categoryProperty to the name of the property of the data items that will be used to determine their category, its valueProperty to the name of the property used to determine their value and its bubbleSizeProperty to the name of the property used to determine the size of the bubble.

To illustrate this setup, let's create an 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:

#### Example 1: Define a data service

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
}

Inside that service we have a single function which returns an array:

Example 2: Define a source with data

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:

Example 3: Add chart to component's template

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>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <CategoricalAxis tkCartesianHorizontalAxis verticalLocation="Bottom" labelFitMode="Rotate" labelRotationAngle="1.2"></CategoricalAxis>

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

Figure 1: Chart with BubbleSeries on Android (left) and iOS (right)

Cartesian chart: Bubble series

Bubble Scale

Additionally, BubbleSeries expose a 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 calculated for each data-point's bubble to determine the bubble's final size.

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Examples used in this article:

Bubble Series Example

NativeScript Angular