Post 98: Android: Line Graph for AChartEngine

Line Graph for AChartEngine

what is Line graph ? 

Line graph is a type of which displays information as a series of data points.

Line graph shows how a particular data changes at equal intervals of time.

How to create Line chart in Android ?
In this article we will draw Income vs Expense line chart in an Android application using AChartEngine library.

Line chart is create as follows

Step 1: Basic Setup for AChartEngine with LineChartExample as project name

Step 2:   Update the file res/values/strings.xml

1 2 3 4 5 6 7

<resources>     <string name="app_name">AChartEngineLineChart</string>     <string name="hello_world">Hello world!</string>     <string name="menu_settings">Settings</string>     <string name="title_activity_main">MainActivity</string>     <string name="str_btn_chart">Income vs Expense Line Chart</string> </resources>

---

Step 3:  Update the layout of the MainActivity in the file res/layout/activity_main.xml  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent" >       <Button         android:id="@+id/btn_chart"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:text="@string/str_btn_chart"         tools:context=".MainActivity" />   </RelativeLayout>

---

Step 4: Update the file res/values/styles.xml

1 2 3

<resources>     <style name="AppTheme" parent="android:Theme" /> </resources>

---

Step 5: Update the file res/values-v11/styles.xml

1 2 3

<resources>     <style name="AppTheme" parent="android:Theme.Holo" /> </resources>

Step 6:  Update the file res/values-v14/styles.xml

1 2 3

<resources>     <style name="AppTheme" parent="android:Theme.Holo" /> </resources>

---

Step 7: Update the class MainActivity in the file src/in/wptrafficanalyzer/achartenginelinechart/MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

package in.revan.achartenginelinechart;   import org.achartengine.ChartFactory; import org.achartengine.chart.PointStyle; import org.achartengine.model.XYMultipleSeriesDataset; import org.achartengine.model.XYSeries; import org.achartengine.renderer.XYMultipleSeriesRenderer; import org.achartengine.renderer.XYSeriesRenderer;   import android.app.Activity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;   public class MainActivity extends Activity {       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);           // Getting reference to the button btn_chart         Button btnChart = (Button) findViewById(R.id.btn_chart);           // Defining click event listener for the button btn_chart         OnClickListener clickListener = new OnClickListener() {               @Override             public void onClick(View v) {                 // Draw the Income vs Expense Chart                 openChart();             }         };           // Setting event click listener for the button btn_chart of the MainActivity layout         btnChart.setOnClickListener(clickListener);     }       private void openChart(){         int[] x = { 1,2,3,4,5,6,7,8 };         int[] income = { 2000,2500,2700,3000,2800,3500,3700,3800};         int[] expense = {2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400 };           // Creating an  XYSeries for Income         XYSeries incomeSeries = new XYSeries("Income");         // Creating an  XYSeries for Expense         XYSeries expenseSeries = new XYSeries("Expense");         // Adding data to Income and Expense Series         for(int i=0;i<x.length;i++){             incomeSeries.add(x[i], income[i]);             expenseSeries.add(x[i],expense[i]);         }           // Creating a dataset to hold each series         XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();         // Adding Income Series to the dataset         dataset.addSeries(incomeSeries);         // Adding Expense Series to dataset         dataset.addSeries(expenseSeries);           // Creating XYSeriesRenderer to customize incomeSeries         XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();         incomeRenderer.setColor(Color.WHITE);         incomeRenderer.setPointStyle(PointStyle.CIRCLE);         incomeRenderer.setFillPoints(true);         incomeRenderer.setLineWidth(2);         incomeRenderer.setDisplayChartValues(true);           // Creating XYSeriesRenderer to customize expenseSeries         XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();         expenseRenderer.setColor(Color.YELLOW);         expenseRenderer.setPointStyle(PointStyle.CIRCLE);         expenseRenderer.setFillPoints(true);         expenseRenderer.setLineWidth(2);         expenseRenderer.setDisplayChartValues(true);           // Creating a XYMultipleSeriesRenderer to customize the whole chart         XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();         multiRenderer.setXLabels(0);         multiRenderer.setChartTitle("Income vs Expense Chart");         multiRenderer.setXTitle("Year 2012");         multiRenderer.setYTitle("Amount in Dollars");         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(incomeRenderer);         multiRenderer.addSeriesRenderer(expenseRenderer);           // Creating an intent to plot line chart using dataset and multipleRenderer         Intent intent = ChartFactory.getLineChartIntent(getBaseContext(), dataset, multiRenderer);           // Start Activity         startActivity(intent);     }       @Override     public boolean onCreateOptionsMenu(Menu menu) {         getMenuInflater().inflate(R.menu.activity_main, menu);         return true;     } }

---

Step 8: Update the file AndroidManifest.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="in.revan.achartenginelinechart"     android:versionCode="1"     android:versionName="1.0" >       <uses-sdk         android:minSdkVersion="4"         android:targetSdkVersion="15" />       <application         android:icon="@drawable/ic_launcher"         android:label="@string/app_name"         android:theme="@style/AppTheme" >         <activity             android:name=".MainActivity"             android:label="@string/title_activity_main" >             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>         <activity android:name="org.achartengine.GraphicalActivity" />     </application> </manifest>

---

Step 9: Run the application

DOWNLOAD Code