Lesson 1: How to Create a Pie Chart

• Aug 16, 2019
• 5 minutes to read

This guide introduces the DevExpress Charts Suite for Android and shows you how to create an application that displays land area by country.

Step 1. Create a New Application and Add a Pie Chart

First, you create a new single-view app and add the PieChart to the app by following steps below.

• Create a new application using your preferred IDE.

• Import the library into the application’s project. The Import the DXCharts library guide explains how to do this.

• Add a pie chart to a view. Replace the default component markup within the layout component by the following code in the Main Activity’s markup file:

  Xml

  <com.devexpress.dxcharts.PieChart
      android:id="@+id/chart"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>    
  

• Add the following line in the MainActivity class to import the DXCharts library and use its classes in the code:

  Java

  import com.devexpress.dxcharts.*;
  

  C#

  using Com.Devexpress.Dxcharts;
  

• Initialize a variable of the PieChart type in the MainActivity‘s onCreate method, by finding the chart in the activity. After that, the method looks as follows:

  Java

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      PieChart chart = (PieChart) findViewById(R.id.chart);
  }
  

  C#

  protected override void OnCreate(Bundle bundle) {
      base.OnCreate(bundle);
      SetContentView(Resource.Layout.Main);
      PieChart chart = FindViewById<PieChart>(Resource.Id.chart);
  }
  

Step 2. Populate the Pie Chart with Data

In this step, you create a pie series and populate it with data.

• Create a new class that inherits the PieSeriesData interface:

  Java

  class CountryInfo {
      String mName;
      double mArea;
      public CountryInfo(String name, double area) { mName = name; mArea = area; }
      public String getName() { return mName; }
      public double getArea() { return mArea; }
  }
  public class CountryAreaData implements PieSeriesData{
      List<CountryInfo> mData;
      public CountryAreaData(ArrayList<CountryInfo> data){ mData = data; }
      public CountryAreaData(CountryInfo... data) { mData = Arrays.asList(data); }
  
      @Override
      public String getLabel(int i) { return mData.get(i).getName(); }
      @Override
      public double getValue(int i) {return mData.get(i).getArea(); }
      @Override
      public int getDataCount() { return mData.size(); }
  }
  

  C#

  public class CountryInfo {
      public string Name { get; private set; }
      public double Area { get; private set; }
      public CountryInfo(string name, double area) { this.Name = name; this.Area = area; }
  }
  public class CountryAreaData : Java.Lang.Object, IPieSeriesData {
      List<CountryInfo> data = new List<CountryInfo>();
      public CountryAreaData(List<CountryInfo> data) { this.data = data; }
      public CountryAreaData(params CountryInfo[] data) { this.data = new List<CountryInfo>(data); }
  
      public int DataCount { get { return data.Count; } }        
      public string GetLabel(int i) { return data[i].Name; }
      public double GetValue(int i) { return data[i].Area; }         
  }
  

• Then, create a new DonutSeries class instance and assign a data object with the specified parameters to the series using the PieSeries.setData(PieSeriesData) method and add the series to the chart in the MainActivity class’s onCreate method:

  Java

  DonutSeries countrySeries = new DonutSeries();
  countrySeries.setData(new CountryAreaData(
          new CountryInfo("Russia", 17.098),
          new CountryInfo("Canada", 9.985),
          new CountryInfo("People's Republic of China", 9.597),
          new CountryInfo("United States of America", 9.834),
          new CountryInfo("Brazil", 8.516),
          new CountryInfo("Australia", 7.692),
          new CountryInfo("India", 3.287),
          new CountryInfo("Others", 81.2)
  ));
  chart.addSeries(countrySeries);
  

  C#

  DonutSeries countrySeries = new DonutSeries();
  countrySeries.Data = new CountryAreaData(
      new CountryInfo("Russia", 17.098),
      new CountryInfo("Canada", 9.985),
      new CountryInfo("People's Republic of China", 9.597),
      new CountryInfo("United States of America", 9.834),
      new CountryInfo("Brazil", 8.516),
      new CountryInfo("Australia", 7.692),
      new CountryInfo("India", 3.287),
      new CountryInfo("Others", 81.2)
  );
  chart.AddSeries(countrySeries);
  

Step 3. Modify the Pie Chart’s Tooltip

In this step, customize the text that the Pie Chart’s hints display.

• Create a new PieHint class instance and assign it to the chart using the PieChart.setHint(PieHint) method. Then create a PieSeriesHintOptions class instance and assign it to the series using the PieSeries.setHintOptions(PieSeriesHintOptions) method. Use these options to specify a hint’s text pattern using the SeriesHintOptionsBase.setPointTextPattern(String) method:

  Java

  PieHint pieHint = new PieHint();
  chart.setHint(pieHint);
  PieSeriesHintOptions hintOptions = new PieSeriesHintOptions();
  hintOptions.setPointTextPattern("{L}: {V}M km²");
  countrySeries.setHintOptions(hintOptions);
  

  C#

  chart.Hint = new PieHint();
  countrySeries.HintOptions = new PieSeriesHintOptions {
      PointTextPattern = "{L}: {V}M km²"
  };
  

Step 4. Configure the Pie Chart’s Appearance

Finally, you add the pie Chart’s legend, customize the palette used to color series, enable series labels, and modify the series’ appearance.

• Create a new Legend object, modify its settings and assign it to the chart using the setLegend method:

  Java

  Legend legend = new Legend();
  legend.setHorizontalPosition(LegendHorizontalPosition.RIGHT_OUTSIDE);
  legend.setVerticalPosition(LegendVerticalPosition.CENTER);
  legend.setOrientation(LegendOrientation.TOP_TO_BOTTOM);
  chart.setLegend(legend);
  

  C#

  Legend legend = new Legend();
  legend.HorizontalPosition = LegendHorizontalPosition.RightOutside;
  legend.VerticalPosition = LegendVerticalPosition.Center;
  legend.Orientation = LegendOrientation.TopToBottom;
  chart.Legend = legend;
  

• Create a new PieChartStyle class instance and configure its parameters, then assign it to the Pie chart using the PieChart.setStyle(PieChartStyle) method:

  Java

  PieChartStyle pieChartStyle = new PieChartStyle();
  pieChartStyle.setPalette(new int[] {
          0xff9c63ff,
          0xff64c064,
          0xffeead51,
          0xffd2504b,
          0xff4b6bbf,
          0xff2da7b0,
          0xffce95ff,
          0xff4ba74b
  });
  chart.setStyle(pieChartStyle);
  

  C#

  PieChartStyle pieChartStyle = new PieChartStyle();
  pieChartStyle.SetPalette(new int[] {
      Color.ParseColor("#ff9c63ff"),
      Color.ParseColor("#ff64c064"),
      Color.ParseColor("#ffeead51"),
      Color.ParseColor("#ffd2504b"),
      Color.ParseColor("#ff4b6bbf"),
      Color.ParseColor("#ff2da7b0"),
      Color.ParseColor("#ffce95ff"),
      Color.ParseColor("#ff4ba74b")
  });
  chart.Style = pieChartStyle;
  

• Create the PieSeriesLabel class instance, modify label parameters, and assign the label to the series using the PieSeries.setLabel(PieSeriesLabel) method:

  Java

  PieSeriesLabel seriesLabel = new PieSeriesLabel();
  TextStyle textStyle = new TextStyle();
  textStyle.setColor(Color.WHITE);
  textStyle.setSize(20f);
  seriesLabel.setStyle(new PieSeriesLabelStyle());
  seriesLabel.getStyle().setTextStyle(textStyle);
  seriesLabel.setTextPattern("{VP}%");
  seriesLabel.setPosition(PieSeriesLabelPosition.INSIDE);
  countrySeries.setLabel(seriesLabel);
  

  C#

  PieSeriesLabel seriesLabel = new PieSeriesLabel();
  seriesLabel.Style = new PieSeriesLabelStyle {
      TextStyle = new TextStyle {
          Color = new Integer(Color.White),
          Size = new Float(20)
      }
  };
  seriesLabel.TextPattern = "{VP}%";
  seriesLabel.Position = PieSeriesLabelPosition.Inside;
  countrySeries.Label = seriesLabel;
  

• Specify how to highlight a selected pie slice using the PieChart.setSelectionBehavior(SelectionBehavior) method:

  Java

  chart.setSelectionBehavior(SelectionBehavior.HATCH);
  

  C#

  chart.SelectionBehavior = SelectionBehavior.Hatch;
  

Note

If you are experiencing issues when using AAPT2, add the android.enableAapt2=false string to the gradle.properties file.

Result

Launch the application to see the result.