Learn how to Draw Graph using Chart engine Library

1. "Android Application Development Company India" www.letsnurture.com
Draw Graph using Chart engine
Library

2. "Android Application Development Company India" www.letsnurture.com
Draw Graph using Chart engine Library
Follow Simple steps to draw chart like
 line chart
 area chart
 scatter chart
 time chart
 bar chart
 pie chart
 bubble chart
 doughnut chart
 range (high-low) bar chart
 dial chart / gauge
 combined (any combination of line, cubic line, scatter, bar, range bar, bubble) chart
 cubic line chart
Link to Examle
Here example of Line Chart
step 1:
download A-Chart Engine library from this link. copy the jar file into the libs folder of your
project.
step 2
the activity_main.xml like the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"

3. "Android Application Development Company India" www.letsnurture.com
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/Chart_layout"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
step 3
In the main.java do the following steps.
// First Create a Graphical View object called mChart.
import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.BasicStroke;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;

4. "Android Application Development Company India" www.letsnurture.com
import android.widget.LinearLayout;
public class MainActivity extends Activity {
private GraphicalView mChart;
private String[] mMonth = new String[] { "Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
openChart();
}
private void openChart() {
int[] x = { 1, 2, 3, 4, 5, 6, 7, 8 };
int[] income = { 2000, 2500, 2700, 3000, 2800, 3500, 3700, 3800 };
// int[] margin = { 10, -10, 10, 10 };
int[] expense = { 2200, 2200, 2200, 2200, 2200, 2200, 2200, 2200 };
// Creating an XYSeries for Performance
XYSeries performanceSeries = new XYSeries("Perfomance");
XYSeries expenseSeries = new XYSeries("expense");
// Adding data to Income and Expense Series
for (int i = 0; i < x.length; i++) {
performanceSeries.add(x[i], income[i]);
expenseSeries.add(x[i], expense[i]);
}
// Creating a dataset to hold each series

5. "Android Application Development Company India" www.letsnurture.com
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Perfomance Series to the dataset
dataset.addSeries(performanceSeries);
dataset.addSeries(expenseSeries);
// Creating XYSeriesRenderer to customize/style performanceSeries
XYSeriesRenderer performanceRenderer = new XYSeriesRenderer();
performanceRenderer.setColor(Color.GREEN);
performanceRenderer.setPointStyle(PointStyle.TRIANGLE);
performanceRenderer.setFillPoints(true);
performanceRenderer.setStroke(BasicStroke.SOLID);
performanceRenderer.setLineWidth(2);
performanceRenderer.setDisplayChartValues(true);
// Creating second XYSeriesRenderer to customize/style performanceSeries
XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();
expenseRenderer.setColor(Color.YELLOW);
expenseRenderer.setPointStyle(PointStyle.TRIANGLE);
expenseRenderer.setFillPoints(true);
expenseRenderer.setStroke(BasicStroke.SOLID);
expenseRenderer.setLineWidth(2);
expenseRenderer.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(-15);
multiRenderer.setLabelsTextSize(20);
multiRenderer.setAxisTitleTextSize(30);
// add chart title and x and y title
multiRenderer.setChartTitle("Performance Chart");
multiRenderer.setXTitle("Performance X title");

6. "Android Application Development Company India" www.letsnurture.com
multiRenderer.setYTitle("Performance Y Title");
// multiRenderer.setZoomButtonsVisible(true);
for (int i = 0; i < x.length; i++) {
multiRenderer.addXTextLabel(i + 1, mMonth[i]);
}
// Adding incomeRenderer and expenseRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to
// multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(performanceRenderer);
multiRenderer.addSeriesRenderer(expenseRenderer);
// Getting a reference to LinearLayout of the MainActivity Layout
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
// Creating a Line Chart
mChart = (GraphicalView) ChartFactory.getLineChartView(
getBaseContext(), dataset, multiRenderer);
// Adding the Line Chart to the LinearLayout
chartContainer.addView(mChart);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Finally You will get a Line Chart that will look like this.

7. "Android Application Development Company India" www.letsnurture.com
Here example of Pie Chart
step 1:
create a new android activity and name it as PieChart.
Step 2:
Now, navigate to "/res/layout" and select the xml file associated with above activity. In this case,
activity_pie_chart.xml and paste the following code there.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:id="@+id/chart"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
step 3:

8. "Android Application Development Company India" www.letsnurture.com
Now, navigate to PieChart.java file and replace the code with below code
import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.model.CategorySeries;
import org.achartengine.renderer.DefaultRenderer;
import org.achartengine.renderer.SimpleSeriesRenderer;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
public class PieChart extends Activity {
int[] pieChartValues={25,15,20,40};
publics tatic final String TYPE = "type";
private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE,
Color.MAGENTA, Color.CYAN };
private CategorySeries mSeries = new CategorySeries("");
private DefaultRenderer mRenderer = new DefaultRenderer();

9. "Android Application Development Company India" www.letsnurture.com
private GraphicalView mChartView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pie_chart);
mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.argb(100,50,50,50));
mRenderer.setChartTitleTextSize(20);
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
mRenderer.setMargins(new int[] {20,30,15,0});
mRenderer.setZoomButtonsVisible(true);
mRenderer.setStartAngle(90);
if (mChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer);
mRenderer.setClickEnabled(true);
mRenderer.setSelectableBuffer(10);
layout.addView(mChartView, new
LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
} else {
mChartView.repaint();
}
fillPieChart();
}

10. "Android Application Development Company India" www.letsnurture.com
public void fillPieChart(){
for(int i=0;i<pieChartValues.length;i++)
{
mSeries.add(" Share Holder "+ (mSeries.getItemCount() + 1),
pieChartValues[i]);
SimpleSeriesRenderer renderer = new SimpleSeriesRenderer();
renderer.setColor(COLORS[(mSeries.getItemCount() -1) %
COLORS.length]);
mRenderer.addSeriesRenderer(renderer);
if (mChartView != null)
mChartView.repaint();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
The working of code is almost similar to that of Bar chart. Renderer is used to actually draw the Pie
chart and we created a Dataset as a sample array

11. "Android Application Development Company India" www.letsnurture.com
int[] pieChartValues={25,15,20,40};
Then, we declare the different colors which will be used the differentiate the graph area. In our case
private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE,
Color.MAGENTA, Color.CYAN };
Then we have to declare some basic characteristics for renderer such as title, title size, margin,
zoom option or start angle etc. You can always modify it as per requirements. Since we are using
another activity to display the Pie chart so we declare it in onCreate method of PieChart activity.
Then we actually create reference of the "chart" layout we created in step 4 and assign the
"chartView" to it and call the fillPieChart() method.
if (mChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer);
mRenderer.setClickEnabled(true);
mRenderer.setSelectableBuffer(10);
layout.addView(mChartView, new
LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
} else {
mChartView.repaint();
}
fillPieChart();
}
Link of Source Code