🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript & Vue.JS

RadChart Pie Series

Unlike all other series, PieSeries do not require axes. They visualize each data point as pie slices with arc size directly proportional to the magnitude of the raw data point's value. Pie slices represent data in one direction contrasting with the other series which represent data in two dimensions.

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.

export const getPieData = () => {
  return new ObservableArray([
      { Brand: 'Audi', Amount: 10 },
      { Brand: 'Mercedes', Amount: 76 },
      { Brand: 'Fiat', Amount: 60 },
      { Brand: 'BMW', Amount: 24 },
      { Brand: 'Crysler', Amount: 40 }
  ]);
};

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

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

const description = 'Pie Series';

export default {
  name: 'PieSeriesExample',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <GridLayout rows="*, *">
      <RadPieChart allowAnimation="true" row="0">
        <PieSeries v-tkPieSeries
          selectionMode="DataPoint"
          expandRadius="0.4"
          outerRadiusFactor="0.7"
          valueProperty="Amount"
          legendLabel="Brand"
          :items="items" />

        <RadLegendView v-tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
      </RadPieChart>

      <RadPieChart allowAnimation="true" row="1">
        <DonutSeries v-tkPieSeries
          selectionMode="DataPoint"
          expandRadius="0.4"
          outerRadiusFactor="0.7"
          innerRadiusFactor="0.4"
          valueProperty="Amount"
          legendLabel="Brand"
          :items="items" />

        <RadLegendView v-tkPieLegend position="Right" title="Brands" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
      </RadPieChart>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getPieData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      frameModule.topmost().goBack();
    },
  },
};

This is how the example looks like: Cartesian chart: Pie series Cartesian chart: Pie series