Bubble series: Overview

Bubble series are CategoricalSeries and are used in the context of a RadCartesianChart, CategoricalAxis and LinearAxis. On top 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

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

The following definition represents the data context that will be used to populate the Bubble series with data:

export class BubbleDataModel  {
    constructor() {

    }

    get highDataModel() {
        return [
            { Year: 2000, Amount: 15, Impact: 1 },
            {  Year: 1456, Amount: 13, Impact: 7 },
            {  Year: 1866, Amount: 25, Impact: 10 },
            {  Year: 1900, Amount: 5, Impact: 3 },
            {  Year: 1700, Amount: 17, Impact: 4 },
            { Year: 1600, Amount: 20, Impact: 1 }, 
        ];
    }

     get middleDataModel() {
        return [
            { Year: 1200, Amount: 15, Impact: 1 },
            {  Year: 1156, Amount: 13, Impact: 7 },
            {  Year: 1000, Amount: 25, Impact: 10 },
            {  Year: 900, Amount: 5, Impact: 3 },
            {  Year: 700, Amount: 17, Impact: 4 },
            { Year: 600, Amount: 20, Impact: 1 },
        ];
    }

    get lowDataModel() {
        return [
            { Year: 200, Amount: 15, Impact: 1 },
            {  Year: 456, Amount: 13, Impact: 7 },
            {  Year: 366, Amount: 25, Impact: 10 },
            {  Year: 100, Amount: 5, Impact: 3 },
            {  Year: 340, Amount: 17, Impact: 4 },
            { Year: 135, Amount: 20, Impact: 1 },
        ];
    }
}

We use an instance of this model to assign it as the bindingContext of the page we have put our Bubble series on:

import bubbleModelModule = require("../../data-models/bubble-data-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new bubbleModelModule.BubbleDataModel();
}

And finally, in the XML definition of the page we put a RadCartesianChart, add a BubbleSeries instance to it and bind the series to the source of data:

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="bubbleChart">

            <chart:RadCartesianChart.verticalAxis>
                <chart:LinearAxis />
            </chart:RadCartesianChart.verticalAxis>
            <chart:RadCartesianChart.horizontalAxis>
                <chart:CategoricalAxis verticalLocation="Bottom" labelFitMode="Rotate" labelRotationAngle="1.2"/>
            </chart:RadCartesianChart.horizontalAxis>

        <chart:RadCartesianChart.series>

            <chart:BubbleSeries  items="{{ highDataModel }}" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact" />


            <chart:BubbleSeries  items="{{ middleDataModel }}" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact" />


            <chart:BubbleSeries  items="{{ lowDataModel }}" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact" />


        </chart:RadCartesianChart.series>

    </chart:RadCartesianChart>
</navigation:ExamplePage>

Cartesian chart: Bubble series Cartesian chart: Bubble series

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.

Related articles you might find useful: