How to: Plot data with a Pie Series

This how-to guide shows you how to display your data using a Pie Series. The chart will also be styled to use different colors for each slice, whilst styling will also be applied to selected slices. Selected pie slices will be given a selected position so that they rotate to the top.

In order to create a pie series, you will need to do the following:

  1. Create a DataAdapter containing your data points.
  2. Create a PieSeries, give it your data and add it to the chart.
  3. Apply styling, if you’d like a different look than the default theme.

Creating a Pie Series

Within the onCreate method of an Activity, first add a check for savedInstanceState == null:

Java

if (savedInstanceState == null) {

}

C# - Note that the Xamarin generated code uses the name ‘bundle’ for the saved instance state variable

if (bundle == null) {

}

You only want to set the chart up the first time the Activity is created; savedInstanceState will be null in this case. By using a ChartFragment the chart will be retained over configuration changes, such as when the device is rotated.

Now, inside the if statement you just added, create a DataAdapter and add some data to it:

Java

DataAdapter<String, Double> dataAdapter = new SimpleDataAdapter<String, Double>();
dataAdapter.add(new DataPoint<String, Double>("One", 1.0));
dataAdapter.add(new DataPoint<String, Double>("Two", 2.0));
dataAdapter.add(new DataPoint<String, Double>("Three", 3.0));

C# - Note that the DataAdapter and DataPoint are not generic in the C# code. The Xamarin bindings will perform casting to the internally used Java classes for common types such as String and double, but not DateTime. We provide a static DateUtils class to do this conversion.

DataAdapter dataAdapter = new SimpleDataAdapter();
dataAdapter.Add(new DataPoint("One", 1.0));
dataAdapter.Add(new DataPoint("Two", 2.0));
dataAdapter.Add(new DataPoint("Three", 3.0));

Next, create a pie series and give the data adapter to it.

Java

PieSeries series = new PieSeries();
series.setDataAdapter(dataAdapter);
shinobiChart.addSeries(series);

C#

PieSeries series = new PieSeries();
series.DataAdapter = dataAdapter;
shinobiChart.AddSeries(series);

This is all that is required to set up a basic pie series. Running the application will give you the following chart:

Basic pie chart

Selection

It is possible to customize the appearance and behavior of slices of the pie series which are selected by the user.

First we must enable selection. Pie series have two modes, POINT_SINGLE and POINT_MULTIPLE, which allow only selection of one slice at a time, or multiple slices, respectively.

Java

series.setGestureSelectionMode(GestureSelectionMode.POINT_SINGLE);

C#

series.SeriesGestureSelectionMode = Series.GestureSelectionMode.PointSingle;

Next we modify the color of the selected slice, by manipulating the style object for selected slices:

Java

PieSeriesStyle selectedSeriesStyle = series.getSelectedStyle();
selectedSeriesStyle.setFlavorColors(new int[] {
        Color.argb(255, 103, 169, 66), // green
        Color.argb(255, 248, 184, 60), // yellow
        Color.argb(255, 233, 74, 114)  // pink
});

C#

PieSeriesStyle selectedSeriesStyle = series.SelectedStyle;
selectedSeriesStyle.SetFlavorColors(new int[] {
    Color.Argb(255, 103, 169, 66), // green
    Color.Argb(255, 248, 184, 60), // yellow
    Color.Argb(255, 233, 74, 114)  // pink
});

Note here that we have provided three colors in the flavorColors array, which represent the colors which will be given to the selected slices in turn. So in this example if the first slice is selected it will be colored green. The second slice, if selected will be colored yellow, and so on. If there are less colors provided in this array than there are slices, the colors will be re-used.

To make the selected slice stand out even more, let’s make its crust a bit thicker and black in color. In the following code we can see how this is done:

Java

selectedSeriesStyle.setCrustThickness(10f);
selectedSeriesStyle.setCrustColors(new int[] {
    Color.argb(255, 0, 0, 0) // black
});

C#

selectedSeriesStyle.CrustThickness = 10f;
selectedSeriesStyle.SetCrustColors(new int[] {
    Color.Argb(255, 0, 0, 0), // black
});

Note that we have added the color black once in the crustColors array, as in the above code. In this case there are more slices in our pie than there are colors in the array. Here the single color, black will be re-used for each slice, giving us the desired effect of each selected slice having a thicker, black crust. If you wished to have different colors for different slices then you would simply add additional colors to the array as appropriate.

It is possible to modify the behavior of selected pie slices. In the following code we will make selected slices rotate to the top of the chart:

Java

series.setSelectedPosition(0.0f);

C#

series.SelectedPosition = 0.0f;

Note here that we provided the setSelectedPosition method with a radian value. This value represents the angle in radians measured from the zero point at the top of the pie, in an anti-clockwise direction. Passing in a value of 0.0 therefore will rotate the selected slice to the top of the pie chart.

Styling a Pie Series

It is possible to customize the color of each pie slice by setting the flavor colors on the pie series style object. Add the following code to change the color of your pie slices:

Java

PieSeriesStyle style = series.getStyle();
style.setFlavorColors(new int[] {
    Color.argb(255, 103, 169, 66), // green
    Color.argb(255, 248, 184, 60), // yellow
    Color.argb(255, 233, 74, 114)  // pink
});

C#

PieSeriesStyle style = (PieSeriesStyle)series.Style;
style.SetFlavorColors(new int[] {
    Color.Argb(255, 103, 169, 66), // green
    Color.Argb(255, 248, 184, 60), // yellow
    Color.Argb(255, 233, 74, 114)  // pink
});

Flavor colors are specified as an array of integers. The first slice will take the first color from this array, and so on. If there are more slices than colors, then the colors will be re-used as appropriate.

Tip: As the above changes are being done effectively while the chart is being initialized, in the onCreate() method, it's not strictly necessary to call redrawChart(). However, if you were to change some style values later on in the chart's lifecycle those changes would not take effect until redrawChart() is called.

There are several texture effects that can be applied to a pie series to make your charts stand out from the crowd. These are applied on top of each slice. The textures are described in the RadialEffect enum and are set on the pie series style object. By default, your pie series will use the DEFAULT texture, but this can be changed:

Java

style.setRadialEffect(RadialEffect.BEVELLED_LIGHT);

C#

style.RadialEffect = PieDonutSeries.RadialEffect.BevelledLight;

This will result in a pie series which looks like that in the figure below. Here the slice named ‘one’ was selected. It has rotated to the top of the chart and protruded from the chart. It also has a more prominent crust and bevelled effect:

Basic pie chart

See related code sample: PieSeries Sample, in the samples/pieseries folder of your product download (Xamarin.Android/samples/PieSeries if you’re using Xamarin.Android).