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

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

get scatterSource() {
    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 }
    ];
}
get: function () {
    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 }
    ];
}

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

import scatterModelModule = require("../../data-models/scatter-data-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new scatterModelModule.ScatterDataModel();
}
var scatterModelModule = require("../../data-models/scatter-data-model");
function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new scatterModelModule.ScatterDataModel();
}
exports.onPageLoaded = onPageLoaded;

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

<chart:RadCartesianChart>
        <chart:RadCartesianChart.horizontalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.horizontalAxis>
        <chart:RadCartesianChart.verticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.verticalAxis>
    <chart:RadCartesianChart.series>
        <chart:ScatterBubbleSeries  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Salary" bubbleSizeProperty="Impact" />             

        <chart:ScatterBubbleSeries  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Spendings" bubbleSizeProperty="Impact" />  

        <chart:ScatterBubbleSeries  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Savings" bubbleSizeProperty="Impact" />

    </chart:RadCartesianChart.series>
</chart:RadCartesianChart>

Cartesian chart: Scatter Bubble series Cartesian chart: Scatter 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: