Android App Development

AChartEngine in Android – A Charting Library for Android Applications

What is an AChartEngine Android – An Introduction


AChartEngine is a chart library which is used to create various chart types like bar chart, line chart, pie chart, scatter chart, bubble chart, combined chart etc. in Android applications.
In this example, we will see how to create line chart and bar chart using AChartEngine library.
AChartEngine Library:
Get the library with the latest version from the official website and add it to your project to create the charting application.
Real Time Example:
There are many applications which use AChartEngine feature like MotoACTV (A fitness tool application) etc.

Example with Code:

⦁ Create an Application AChartEngineExampleAndroid.
⦁ Add the AChartEngine library in your project.

Requirements:
MainActivity.java, LineChartActivity.java, BarChartActivity.java, activity_bar_chart.xml, activity_line_chart.xml.

MainActivity.java:
It shows a ListView having two options. One for line chart and another for the bar chart.

Initialize:

public static final String[] options = { "Line Chart", "Bar Chart"};
Add the code in onCreate(){..}
setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options));

// Set the intent for both activities.

Line Chart:
It is a chart or graph which shows the information in a form of series with data points which is connected by straight line segments.
Let’s do it programmatically.
After adding library

activity_line_chart.xml:

Create this XML file for the view to show the chart or graph inside this. We can also show the graphical layout on entire activity or screen by generating intent.
Add the code inside RelativeLayout:

<TextView
android:id="@+id/tv_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Line Chart" />
<LinearLayout
android:id="@+id/chart_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_title"
android:orientation="vertical" >
</LinearLayout>

LineChartActivity.java:
Create an activity to show the line chart

Initialize String Array for x- labels:

private String[] mMonth = new String[] {
"Jan", "Feb" , "Mar", "Apr", "May", "Jun",
"Jul", "Aug" , "Sep", "Oct", "Nov", "Dec"
};

Add the code in onCreate(){..}
Create x, y values for XY Series object.

int[] x_values = { 1,2,3,4,5,6,7,8 };
int[] y_values = { 1000,1500,1700,2000,2500,3000,3500,3600};

Add the values into XYSeries object.

XYSeries expenseSeries = new XYSeries("Expense");
for(int i=0;i<x_values.length;i++){
expenseSeries.add(x_values[i], y_values[i]);
}

Create a dataset to hold each series and add XYSeries object to that dataset.

XYMultipleSeriesDataset xyMultipleSeriesDataset = new XYMultipleSeriesDataset();
xyMultipleSeriesDataset.addSeries(expenseSeries);

To Customize it create XYSeriesRenderer

XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.GREEN);
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setFillPoints(true);
renderer.setLineWidth(3);
renderer.setDisplayChartValues(true);

To Customize the whole chart, create XYMultipleSeriesRenderer.

XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("Expense Chart");
multiRenderer.setXTitle("Year 2016");
multiRenderer.setYTitle("Amount in Dollars");
multiRenderer.setZoomButtonsVisible(true);
for(int i=0;i<x_values.length;i++){
multiRenderer.addXTextLabel(i+1, mMonth[i]);
}

Now, add the object of XYSeriesRenderer into XYMultipleSeriesRenderer object.

multiRenderer.addSeriesRenderer(renderer);

Take the reference of LinearLayout and add the Line Chart into this view.

LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
View chart = ChartFactory.getLineChartView(getBaseContext(), xyMultipleSeriesDataset, multiRenderer);
chartContainer.addView(chart);

Here, getLineChartView() is a method to show the Line Chart inside the layout.
Bar Chart:
Similarly, we can also create bar chart like we create line chart above. It is also one of the types of chart, we can also show the multiple series inside this.

bar_chart_activity.xml:
Add the code for Bar Chart as we done above.

<TextView
android:id="@+id/tv_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Bar Chart" />
<LinearLayout
android:id="@+id/chart_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_title"
android:orientation="vertical" >
</LinearLayout>

BarChartActivity.java:
Create an activity for bar chart.
Add the code in onCreate(){..}
Here, it shows the two series i.e Income and Expense series

int[] x = { 0,1,2,3,4,5,6,7 };
int[] income = { 2000,2500,2700,3000,2800,3500,3700,3800};
int[] expense = {2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400 };

We will create two objects of XYSeries and add into XYMultipleSeriesDataset.
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(incomeSeries);
dataset.addSeries(expenseSeries);
Similarly, we will customize it as we had done for line chart.
Now, add this inside our layout to show the bar chart.

View chart = ChartFactory.getBarChartView(getBaseContext(), dataset, multiRenderer, Type.DEFAULT);
chartContainer.addView(chart);

Here, getBarChartView() is a method to show the Bar Chart inside layout.
Output:
Home Screen

Line Chart

Bar Chart

Download Source Code: GitHub

 

Conclusion:

This is a simple example of AChartEngine on how to create applications using AChartEngine library. Here in this example, it shows an Expense Line Chart and Income-Expense bar chart. We can see many applications which uses this functionality. We can customize it according to the need of an application. It is very important and popular feature in Android development.
Hope you are with the information, keep visiting www.acadgild.com for more updates on the courses

Android Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close