Chart Scatter Bubble Series

ScatterBubbleSeries are a type of CartesianSeries that use Cartesian coordinates to display values for typically two variables for a set of data. The data are displayed as a collection of bubble, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis. Unlike ScatterSeries they can visualize a third value (on top of the two value properties) through the size of the bubbles. If you want to show bubbles for categorical data, you can use BubbleSeries.

Setup
Bubble Scale
References

Setup

To display a Scatter 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 (LinearAxis or LogarithmicAxis) with the tkCartesianVerticalAxis directive.
Add at least one instance of ScatterSeries with the tkCartesianSeries directive and set its items property to a collection of data items, the xProperty and yProperty to the names of the properties used to determine where to plot the scatter points and the 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

getScatterSource(): Person[] {
    return [
        { Age: 20, Salary: 10000, Spendings: 4500, Savings: 5500, Impact: 1 },
        { Age: 25, Salary: 12300, Spendings: 6500, Savings: 5200, Impact: 7 },
        { Age: 30, Salary: 14000, Spendings: 8500, Savings: 5500, Impact: 10 },
        { Age: 35, Salary: 18000, Spendings: 9500, Savings: 7500, Impact: 6 },
        { Age: 40, Salary: 19520, Spendings: 15540, Savings: 3800, Impact: 4 },
        { Age: 45, Salary: 20000, Spendings: 15500, Savings: 4500, Impact: 2 },
        { Age: 50, Salary: 24200, Spendings: 20500, Savings: 3700, Impact: 11 },
        { Age: 55, Salary: 24000, Spendings: 22500, Savings: 1500, Impact: 8 },
        { Age: 60, Salary: 22000, Spendings: 22500, Savings: 500, Impact: 1 },
        { Age: 65, Salary: 20000, Spendings: 20500, Savings: 10, Impact: 9 }
    ];
}

export class Person {
    constructor(public Age?: number, public Salary?: number, public Spendings?: number, public Savings?: number, public Impact?: number) {
    }
}

Example 3: Add chart to component's template

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

@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-scatter-bubble',
    providers: [DataService],
    templateUrl: 'chart-series-scatter-bubble.component.html'
})
export class ChartSeriesScatterBubbleComponent implements OnInit {
    private _scatterSource: ObservableArray<Person>;

    constructor(private _dataService: DataService) { }

    get scatterSource(): ObservableArray<Person> {
        return this._scatterSource;
    }

    ngOnInit() {
        this._scatterSource = new ObservableArray(this._dataService.getScatterSource());
    }
}

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianHorizontalAxis></LinearAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <ScatterBubbleSeries tkCartesianSeries [items]="scatterSource" bubbleScale="5" xProperty="Age" yProperty="Salary" bubbleSizeProperty="Impact"></ScatterBubbleSeries>
    <ScatterBubbleSeries tkCartesianSeries [items]="scatterSource" bubbleScale="5" xProperty="Age" yProperty="Spendings" bubbleSizeProperty="Impact"></ScatterBubbleSeries>
    <ScatterBubbleSeries tkCartesianSeries [items]="scatterSource" bubbleScale="5" xProperty="Age" yProperty="Savings" bubbleSizeProperty="Impact"></ScatterBubbleSeries>
</RadCartesianChart>

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

Cartesian chart: Scatter Bubble series

Bubble Scale

Additionally, ScatterBubbleSeries 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:

Scatter Bubble Series Example

NativeScript Angular