Working with Graphical Data in Android.

17 / Mar / 2015 by Vaibhav Chahal 0 comments

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.

// 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");

Adding android and ios values to android and ios Series

for(int i=0;i<years.length;i++){
     androidSeries.add(i+1, android[i]);
     iosSeries.add(i+1,ios[i]);
}

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

XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset(); dataset.addSeries(androidSeries);
dataset.addSeries(iosSeries);

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:

XYSeriesRenderer androidRenderer = new XYSeriesRenderer();
androidRenderer.setPointStyle(PointStyle.CIRCLE);
androidRenderer.setLineWidth(2);
XYSeriesRenderer iosRenderer = new XYSeriesRenderer();
iosRenderer.setPointStyle(PointStyle.CIRCLE);
iosRenderer.setLineWidth(2);

MultipleSeriesRenderer:

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");

Adding x-axis labels

for(int i=0;i<years.length;i++){
    multiRenderer.addXTextLabel(i+1, year[i]);
}

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

multiRenderer.addSeriesRenderer(androidRenderer);
multiRenderer.addSeriesRenderer(iosRenderer);

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:

ChartFactory.getLineChartView(mContext, dataset, multiRenderer);

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

ChartFactory.getBarChartView(mContext, dataset, multiRenderer, Type.DEFAULT);

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

do it like :

seriesRenderer.setFillBelowLine(true);
seriesRenderer.setFillBelowLineColor(int color);

secondLineChart      secondBarChart

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -