Skip to main content

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


Income vs Expense Chart using AChartEngine in Android


Comments

Post a Comment

Popular posts from this blog

How to get VTU Provisional Degree Certificate (PDC) ?

Here is the procedure to get the Provisional Degree Certificate from the VTU by passed out candidates. You can get the certificate through post by sending the required documents to VTU. Documents and things required: 1. Provisional Degree Certificate (PDC) application form 2. DD of specified fees amount or print copy of receipt if you paid the fees online 3. A letter to the VTU registrar 4. A4 size envelope Step 1: Fill the PDC application You can download the PDC application form from the VTU website. Click below link for application download. PDC application form download     After downloading the application take a print of it and properly fill the form. Step 2: Make a DD of specified amount as the fees of PDC: Go to the bank and make the DD of prescribed fee amount for the PDC. The fee amount is specified in the above link from where you downloaded the application. Make the DD in favor of " Finance Officer, VTU Belgaum ".   ...
2 comments
Read more

TIME TABLE: VTU BE/B.Tech June/July 2016 Exam Time table Draft Layout

Semester-wise June-July 2016 Exam time table (Draft Layout) Are You Using updated Kwikstudy App?
2 comments
Read more