Friday 13 June 2014

Creating a pie chart with aChart Engine

In many Android apps you may need to show data in graphical format (pie charts, bar charts, time charts, etc.). To do this you can write the code from scratch, or use one of the many third-party libraries available. One of the most used is certainly aChart Engine, and there are several good reasons for that:
  1. it is leight;
  2. it is free;
  3. it is relatively complete.

In this brief tutorial I will explain the most important features you must know to create a pie chart using aChart Engine.



Download and install the library

First of all you have to download the library (version 1.1.0) and set up your Eclipse project to use it. The steps are the following:
  1. donwload the library (jar file, version 1.1.0) from this link. You can find the complete documentation of the package here;
  2. open Eclipse; right click on the main project folder; select "Build Path" and "Configure Build Path..."; select "Libraries" tab; click on "Add external Jars..." and select the library Jar file you have downloaded.
Now your Eclipse project is ready to use the library. Of course, if you want to use the different classes, you first have to import them in your Activity (import org.achartengine.model.CategorySeries ... etc.). 

Source data

Let’s suppose we want to create a pie chart showing the distribution of the different Android versions, using the following data:
Kit Kat – 7.8%
Jelly Bean – 33%
Ice Cream Sandwich – 25%
Honeycomb – 17%
Gingerbread – 11%
Older – 6.2%

Each slice of the pie chart is represented by a different color.
The source data in Java is represented by three arrays, each with six elements:

String[] labels = new String[] {“Kit Kat”, “Jelly Bean”, “Ice Cream Sandwich”, “Honeycomb”, “Gingerbread”, “Older”};
double[] values = {7.8, 33, 25, 17, 11, 6.2};
int[] colors = {Color.RED, Color.BLUE, Color.GREEN, Color.MAGENTA, Color.YELLOW, Color.GRAY};

CategorySeries

The class CategorySeries of aChart Engine (org.achartengine.model.CategorySeries) is used to represent a series for the category charts like the pie ones.
We create an instance of this class and populate it with the previously showed source data (labels and values):

CategorySeries categorySeries = new CategorySeries(“Android versions”);
for(int i=0; i<labels.length; i++) {
    categorySeries.add(labels[i], values[i]);
}

DefaultRenderer

The class DefaultRenderer (org.achartengine.renderer.DefaultRenderer) is an abstract renderer used to format the charts.
We can create an instance of this class and specify how we want our pie chart to be rendered:

DefaultRenderer defaultRenderer = new DefaultRenderer();
defaultRenderer.setChartTitle(“Android versions”);
defaultRenderer.setChartTitleTextSize(30);
defaultRenderer.setZoomButtonsVisible(false);
...
NB: It is important to set the zoom buttons visibility to false, otherwise you may get a NullPointerException in the onDraw() method of the class GraphicalView (as far as I know, this should be a bug in the library).
The are of course many other formattings you can control using a DefaultRenderer: you can read the official documentation for more information.

To control the rendering of each slice of the pie chart (color, showing or not showing values, etc.) you can use the SimpleSeriesRenderer class (org.achartengine.renderer.SimpleSeriesRenderer): you just have to create an instance of this class for each slice, set the relevant data and add it to the previously defined DefaultRenderer:

for(int i=0; i<labels.length; i++) {
    SimpleSeriesRenderer simpleSeriesRenderer = new SimpleSeriesRenderer();
    simpleSeriesRenderer.setColor(colors[i]);
    simpleSeriesRenderer.setDisplayChartValues(true);
    ...
    defaultRenderer.addSeriesRenderer(simpleSeriesRenderer);
}

Starting a new Activity

To show our pie chart we first have to retrieve an Intent, populated with the relevant data, using the ChartFactory class:

Intent intPiechart = ChartFactory.getPieChartIntent(context, categorySeries, defaultRenderer, “Android versions”);
startActivity(intPieChart);

The new Activity must be declared in the AndroidManifest.xml file as well:

<activity android:name=”org.achartengine.GraphicalActivity”/>

3 comments:

  1. wonderful post helped a lot.how to download this code please..........
    Thank you for your Tutorial very use full Tutorial..............

    ReplyDelete
    Replies
    1. Hi muthu kumar,
      This is just an excerpt from an app that I'm developing, so I included only the relevant code and left out all that's related to the logic of my app.
      But in the following days I will probably upload a more compete tutorial.

      Delete
  2. How to create a pie chart (look like treemaps) from hierarchical database?

    ReplyDelete