Working with Graphical Data in Android.

Sometimes we need to show data in forms of charts which i think is a better way of presenting results.Use aChartEngine.

aChartEngine is a library to make charts in android apps. it gives you the same look and feel like googleCharts with an advantage as internet is not necessary. Kinds of charts you can prepare using it are –

1. XYCharts (line,bar,range).
2. RoundCharts (pie,doughnut).

                                                                                                                                                                                                   Procedure to create Charts

• Make setup :                                                                                                                                                                                                                             
  

1. Create new Android Project.
2. Download latest aChartEngine jar from http://code.google.com/p/achartengine/downloads.
3. Drop that jar inside libs folder of your project.

and let’s draw it.

Drawing lineChart to show the growth of android in last seven years with respect to iOS.

[sourcecode language=”java”]// An array holding the X-axis labels.
String[] years = new String[] {"2008", "2009" , "2010", "2011", "2012", "2013", "2014"};

// Arrays of android and ios values needs to show on plane.
int[] android = { 1,4,22,52,78,99, 118};
int[] ios = {16, 24, 42, 58, 62, 71,78};

// Creating an  XYSeries for Android
XYSeries androidSeries = new XYSeries("Android");

// Creating an  XYSeries for iOS
[XYSeries iosSeries = new XYSeries("iOS");[/sourcecode]

Adding android and ios values to android and ios Series
[sourcecode language=”java”]
for(int i=0;i<years.length;i++){
androidSeries.add(i+1, android[i]);
iosSeries.add(i+1,ios[i]);
}[/sourcecode]

Making series is simply preparing the co-ordinates for XY plane. Make as many series as you want to show on the plane.

[sourcecode language=”java”]XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset(); dataset.addSeries(androidSeries);
dataset.addSeries(iosSeries);[/sourcecode]

XYMultipleSeriesDataset holds the data of all the series.

Here Two Types of Renderers are available to provide the exact look and feel as you want. they are SeriesRenderer and MultipleSeriesRenderer.

SeriesRenderer provides rendering to individual series like setting line width,set point style etc. While MultiSeriesRenderer is a parent Renderer that provides rendering to whole chart like setting the title of chart,color,x-axis title,y-axis title etc.

Individual series Renderers:

[sourcecode language=”java”]XYSeriesRenderer androidRenderer = new XYSeriesRenderer();
androidRenderer.setPointStyle(PointStyle.CIRCLE);
androidRenderer.setLineWidth(2);[/sourcecode]

[sourcecode language=”java”]XYSeriesRenderer iosRenderer = new XYSeriesRenderer();
iosRenderer.setPointStyle(PointStyle.CIRCLE);
iosRenderer.setLineWidth(2);[/sourcecode]

MultipleSeriesRenderer:

[sourcecode language=”java”]XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setChartTitle("isuppli figure: Global Forecast of Usage of Android and iOS in Smartphones (Millions of Units)");
multiRenderer.setXTitle("Years");
multiRenderer.setYTitle("Millions of Units");[/sourcecode]

Adding x-axis labels
[sourcecode language=”java”]
for(int i=0;i<years.length;i++){
multiRenderer.addXTextLabel(i+1, year[i]);
}[/sourcecode]

Now Need to add series renderers to the parent multiseriesRenderer to reflect the changes like :

[sourcecode language=”java”]multiRenderer.addSeriesRenderer(androidRenderer);
multiRenderer.addSeriesRenderer(iosRenderer);
[/sourcecode]

Note: The order of adding dataseries to dataset and renderers to multipleRenderer should be same.

Now finally get chart by passing dataset(prepared data) and multiSeriesRenderer(look and feel) into getLineChartView method of chartFactory like:

[sourcecode language=”java”]ChartFactory.getLineChartView(mContext, dataset, multiRenderer);[/sourcecode]

for bar chart need to pass an extra param i.e TYPE:

[sourcecode language=”java”]ChartFactory.getBarChartView(mContext, dataset, multiRenderer, Type.DEFAULT);
[/sourcecode]

Note : Range Chart is same as line chart, only need to set the color below the line of chart.

do it like :

[sourcecode language=”java”]seriesRenderer.setFillBelowLine(true);
seriesRenderer.setFillBelowLineColor(int color);[/sourcecode]