Click here to Skip to main content
15,868,016 members
Articles / Mobile Apps / Android

Creating Charts in Android using the AChartEngine Library

Rate me:
Please Sign up or sign in to vote.
4.52/5 (9 votes)
16 Jul 2014CPOL3 min read 33.3K   863   17   4
This article explains how you can create charts in an Android application.

Image 1

Image 2

Introduction

In this article, I am showing the use of the AChartEngine charting library for Android to create charts for the Android platform. The AChartEngine library is an open source charting library for Android and supports all Android versions from 1.6 onwards. The project in this article is based on version 1.1.0 of the AChartEngine library.

Background

For demonstration of this article, I have created a project which plots sine, cosine and tangent charts. I have created the project in AIDE installed on Android X86 emulator running on VMWare. AIDE is an Android IDE for Android devices. AIDE completely runs on any Android based phone or tablet, as well as, it can be installed on Android emulator running on a virtual machine. Same method of development can be used to develop the project using the traditional eclipse based approach.

In order to start using AChartEngine, the main library (achartengine-1.1.0.jar) has to be copied to the lib folder of your Android project. AChartEngine supports three types of charts:

  • XY Charts - These charts display data using an X-axis and a Y-axis, for e.g., line, area, bar, scatter.
  • Round Charts - These are circular charts, for e.g., Pie, Doughnut, Dial.
  • Combined Charts - These charts display a combination of several XY charts.

Using the Code

The main layout file has a linear layout with id as "@+id/chart".

Following is the layout XML file:

XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chart"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical" >
</LinearLayout>

We need to override the onResume() method of the Activity class in the MainActivity class as follows:

C#
@Override
protected void onResume()
{
    super.onResume();

    // Get a reference of the layout
    LinearLayout layout=(LinearLayout)findViewById(R.id.chart);
    if(myChart==null)
    {
        // Initialize the chart
        initializeChart();

        // Add data to the chart
        addData();

        // Create a line chart
        myChart=ChartFactory.getLineChartView(this, mySeries, myRenderer);

        // Add chart to the layout
        layout.addView(myChart);
    }
    else
    {
        // Refresh the chart
        myChart.repaint();
    }
}

The above code references the chart layout and calls the user defined function initializeChart() to initalize the chart parameters and another user defined function addData() to add data to the chart. It then creates a line chart based on the specified data and adds the chart to the layout. If the chart is already created, it simply refreshes the chart by calling the repaint() method.

Following is the code of the initializeChart() method:

C#
>private void initializeChart()
{
    // Initialize renderers
    sineRenderer=new XYSeriesRenderer();
    cosineRenderer=new XYSeriesRenderer();
    tangentRenderer=new XYSeriesRenderer();

    // Set color for each series
    sineRenderer.setColor(Color.RED);
    cosineRenderer.setColor(Color.GREEN);
    tangentRenderer.setColor(Color.BLUE);

    // Create XYMultipleSeriesRenderer
    myRenderer=new XYMultipleSeriesRenderer();

    // Add renderers to XYMultipleSeriesRenderer
    myRenderer.addSeriesRenderer(sineRenderer);
    myRenderer.addSeriesRenderer(cosineRenderer);
    myRenderer.addSeriesRenderer(tangentRenderer);

    // Disable panning
    myRenderer.setPanEnabled(false);

    // Set Y-Axis range
    myRenderer.setYAxisMax(1);
    myRenderer.setYAxisMin(-1);

    // Initialize series
    sineSeries=new XYSeries("Sine");
    cosineSeries=new XYSeries("Cosine");
    tangentSeries=new XYSeries("Tangent");

    // Create XYMultipleSeriesDataset
    mySeries=new XYMultipleSeriesDataset();

    // Add series to XYMultipleSeriesDataset
    mySeries.addSeries(sineSeries);
    mySeries.addSeries(cosineSeries);
    mySeries.addSeries(tangentSeries);
}

The above code creates three XYSeriesRenderer objects, sineRenderer, cosineRenderer and tangentRenderer and initializes them with red, green and blue colors respectively. It then adds the three renderers to an XYMultipleSeries renderer object called myRenderer. Panning is disabled by calling the setPanEnabled(false) method. The range for the Y-Axis is set from -1 to 1 by using the setYAxisMin() and setYAxisMax() methods. Three XYSeries objects, sineSeries, cosineSeries and tangentSeries, are created and added to an XYMultipleSeriesDataset object called mySeries.

Following is the code of the addData() method:

C#
private void addData()
{
    // Add data to the chart series
    for(int angle=5;angle<=1440;angle+=5)
    {
        sineSeries.add(angle, Math.sin(angle*(Math.PI/180)));
        cosineSeries.add(angle, Math.cos(angle*(Math.PI/180)));
        tangentSeries.add(angle, Math.tan(angle*(Math.PI/180)));
    }
}

The above code adds sine, cosine and tangent data to the respective XYSeries objects for angles ranging from 5 to 1440. The parameters to the trigonometric functions are converted from degrees to radians by using the formula "angle * (? / 180)".

Running the program creates a line chart as follows:

Image 3

Changing the getLineChartView() method to getBarChartView() in this way myChart=ChartFactory.getBarChartView(this, mySeries, myRenderer, BarChart.Type.Default), produces a bar chart as follows:

Image 4

Points of Interest

The AChartEngine is a very useful charting library which can be easily used by amateurs and skilled professionals alike to create elegant charts for the Android platform.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with iFuture Technologies(India) as a Senior Faculty. I enjoy programming as a hobby. During my career I have seen the growth and decline of many technologies, many of them being my favorites like Flash, WPF, Windows Mobile Development. Few of my current favorites are Android, Xamarin and Python, though I also like traditional and evergreen languages like PHP, C#, Visual Basic and Java.

Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
Questionandroid graph Pin
Member 1156454029-Mar-15 5:19
Member 1156454029-Mar-15 5:19 
GeneralaChartEngine Issue on LineChart Pin
androsathish2-Dec-14 22:58
professionalandrosathish2-Dec-14 22:58 
I am using aChartEngine for Graph.. in LineChartView does not draw with unsorted values . when i gave unsorted values it it be automatically sorted and then draw the lines

for example i gave x={-50,50,20,-12,90};y={-10,10,-40,90,100};
ie (-50,-10) (50,10) (20,-40) (-12,90) (90,100) like this

but the line draws like (-50,-10) (-12,90) (20,-40) (50,10) (90,100)

​how to resolve this issue.. kindly give a solution for this.

thanks
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA13-Aug-14 3:22
professionalȘtefan-Mihai MOGA13-Aug-14 3:22 
GeneralRe: My vote of 5 Pin
Azim Zahir15-Aug-14 17:19
Azim Zahir15-Aug-14 17:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.