Chart Scatter Series

ScatterSeries 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 points, 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.

Setup
References

Setup

To display a Scatter Chart, you will need to:

Add a RadCartesianChart to your page.
Add a category axis (CategoricalAxis, DateTimeCategoricalAxis or DateTimeContinuousAxis) with the v-tkCartesianHorizontalAxis directive.
Add a value axis (LinearAxis or LogarithmicAxis) with the v-tkCartesianVerticalAxis directive.
Add at least one instance of ScatterSeries with the v-tkCartesianSeries directive and set its items property to a collection of data items and the xProperty and yProperty to the names of the properties used to determine where to plot the scatter points.

To illustrate this setup, let's create an example. Just like with all vue 'pages' let's start with the Component in which we will place our RadCartesianChart instance. Before that, we would create a basic JS or TS module that contains a collection of objects, which will be used by the chart to provide intuitive data visualization.

#### Example 1: Define a collection of items

export const getScatterData = () => {
  return new ObservableArray([
    { 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 }
  ]);
};

#### Example 2: Add chart to component's template

import { getScatterData } from '../../data';

const description = 'Scatter Series';

export default {
  name: 'ScatterSeriesExample',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>
      <LinearAxis v-tkCartesianHorizontalAxis></LinearAxis>
      <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>

      <ScatterSeries v-tkCartesianSeries :items="items" xProperty="Age" yProperty="Salary"></ScatterSeries>
      <ScatterSeries v-tkCartesianSeries :items="items" xProperty="Age" yProperty="Spendings"></ScatterSeries>
      <ScatterSeries v-tkCartesianSeries :items="items" xProperty="Age" yProperty="Savings"></ScatterSeries>
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getScatterData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

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

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

Examples used in this article:

Scatter Series Example

NativeScript & Vue.JS

Chart Scatter Series

Setup

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

References