RadChart Scatter Series
Scatter series are used in the context of a RadCartesianChart
and two LinearAxis
instances. Besides the setup requirements that come from CartesianSeries
, ScatterSeries
require an additional xProperty
and yProperty
parameters instead of valueProperty
and categoryProperty
.
Customization
Scatter series could be customized as a standard CartesianSeries
as it is described in series styles article
Example
The following definition represents the data context that will be used to populate the Scatter 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 }
];
}
We use an instance of this model to assign it as the bindingContext
of the page we have put our Scatter series on:
import { ScatterDataModel } from "../../data-models/scatter-data-model";
export function onPageLoaded(args) {
const page = args.object;
page.bindingContext = new ScatterDataModel();
}
And finally, in the XML definition of the page we put a RadCartesianChart
, add a ScatterSeries
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:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Salary"/>
<chart:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings"/>
<chart:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Savings"/>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
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: