Lesson 2: How to Create a Cartesian Chart

  • 5 minutes to read

This guide introduces the DevExpress Charts Suite for Android and demonstrates how to create an application that displays 3 countries' annual GDP. The following image demonstrates the result:

Application preview

Step 1. Create a new application and add a chart

First, create a new single-view app and add the Chart to it by following the 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 cartesian chart to a view. Replace the default component markup within the layout component with the following code in the Main Activity's markup file:

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

    import com.devexpress.dxcharts.*;
  • Initialize a variable of the Chart type in the MainActivity's onCreate method, by finding the chart in the activity. After that, the method looks as follows:

    protected void onCreate(Bundle savedInstanceState) {
        Chart chart = (Chart) findViewById(R.id.chart);

Step 2. Populate a chart with data

This step populates the DXChart with series.

  • Create a new class that inherits the NumericSeriesData interface:

    class GdpValue {
        int mYear;
        double mValue;
        public GdpValue(int year, double value) { mYear = year; mValue = value; }
        public int getYear() { return mYear; }
        public double getValue() { return mValue; }
    public class GdpData implements NumericSeriesData{
        List<GdpValue> mData = new List<>();
        public GdpData(List<GdpValue> data){ mData = data; }
        public GdpData(GdpValue... data){ mData = Arrays.toList(data); }
        public double getArgument(int i) { return mData.get(i).getYear(); }
        public double getValue(int i) {return mData.get(i).getValue(); }
        public int getDataCount() { return mData.size(); }
  • Then create a new Line series instance, set a data object with the specified parameters using the Series.setData(XYSeriesData) method, and add a series to the chart in the MainActivity class's onCreate method:

    LineSeries usaGdpSeries = new LineSeries();
    usaGdpSeries.setData(new GdpData(
          new GdpValue(2008, 14.719),
          new GdpValue(2009, 14.419),
          new GdpValue(2010, 14.964),
          new GdpValue(2011, 15.518),
          new GdpValue(2012, 16.155),
          new GdpValue(2013, 16.692),
          new GdpValue(2014, 17.393),
          new GdpValue(2015, 18.037)
  • Add the other series to the chart:

    LineSeries chinaGdpSeries = new LineSeries();
    chinaGdpSeries.setData(new GdpData(new ArrayList<>(Arrays.asList(
          new GdpValue(2008, 4.598),
          new GdpValue(2009, 5.11),
          new GdpValue(2010, 6.101),
          new GdpValue(2011, 7.573),
          new GdpValue(2012, 8.561),
          new GdpValue(2013, 9.607),
          new GdpValue(2014, 10.482),
          new GdpValue(2015, 11.065)
    LineSeries japanGdpSeries = new LineSeries();
    japanGdpSeries.setData(new GdpData(new ArrayList<>(Arrays.asList(
          new GdpValue(2008, 5.038),
          new GdpValue(2009, 5.231),
          new GdpValue(2010, 5.7),
          new GdpValue(2011, 6.157),
          new GdpValue(2012, 6.203),
          new GdpValue(2013, 5.156),
          new GdpValue(2014, 4.849),
          new GdpValue(2015, 4.383)

Step 3. Configure chart axes

In this step, the arguments' axis is configured to show labels for each argument. The text and position of the values' axis's labels are customized.

  • Create a new NumericAxisX instance, configure it, and assign to the chart using the Chart.setAxisX(AxisX) method:

    NumericAxisX xAxis = new NumericAxisX();
  • Then, create a new NumericAxisY instance, configure its labels' options using an AxisLabel object, and assign the axis to the chart using the Chart.setAxisY(NumericAxisY) method:

    NumericAxisY yAxis = new NumericAxisY();
    AxisLabel axisLabel = new AxisLabel();
    axisLabel.setTextFormat("$ # tn");

Step 4. Add a legend to the chart

Finally, add a legend to the chart. To do this, create a new Legend object, modify its settings, and assign it to the chart.

Legend legend = new Legend();

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


Launch the application to see the results.

Result image