Scatter Bubble series: Overview

Scatter Bubble series are ScatterSeries and are used in the context of a RadCartesianChart and two LinearAxis instances. Besides the setup requirements that come from ScatterSeries, 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 ScatterSeries context, ScatterBubbleSeries 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:

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) {
    }
}

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

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Person } from '../../data-services/person';
import { ObservableArray } from "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 id="bubbleChart" 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>

Cartesian chart: Scatter Bubble series Cartesian chart: Scatter Bubble series