Learn How to Create Line Chart In Android

Introduction

This article explains how to prepare a Line Chart in Android using Android Studio.

In this application you will prepare a chart of income and expenses. You will see the graph showing the rise and fall of both income and expenses.

First you will download the Android Plot Library. In your XML file you will create the Android plot and use the id of this in the Android XY plot variable. Then you will create three arrays, one of String type and another of number type with the values you want to show on the chart.

Second you will get the object of XYplot returned by the SimpleXYSeries(). Now set the color for the line by the LineandPointFormatter class.

Step 1

Create an XML file and write this:

<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"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context=".MainActivity">

 

    <com.androidplot.xy.XYPlot

            android:id="@+id/plotxy"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            title="Income / Expenditure Chart [ Year 2012 ]"/>

 

 

</RelativeLayout>

Step 2
 

package com.myapplication;

 

import android.graphics.Color;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

 

import com.androidplot.series.XYSeries;

import com.androidplot.xy.LineAndPointFormatter;

import com.androidplot.xy.SimpleXYSeries;

import com.androidplot.xy.XYPlot;

 

import java.lang.reflect.Array;

import java.util.Arrays;

 

public class MainActivity extends Activity {

 

String []months=new String[]{"A","B","C","D","E","F","G","H"};

    Number[] incomes={2000, 2500, 2700, 3000, 2800, 3500, 3700, 3800};

    Number[] expences={2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400};

 

    XYPlot xyplot;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

    xyplot=(XYPlot)findViewById(R.id.plotxy);

 

        XYSeries incomePlot=new SimpleXYSeries(Arrays.asList(incomes), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY,"Income");

 

        XYSeries expence=new SimpleXYSeries(Arrays.asList(expences), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY,"Expence");

 

        LineAndPointFormatter IncomeFormatter=new LineAndPointFormatter(

                Color.rgb(255,0,0),

                Color.rgb(0,255,0),

                null);

 

 

        LineAndPointFormatter ExpenceFormatter=new LineAndPointFormatter(

                Color.rgb(255,0,0),

                Color.rgb(0,255,0),

                null);

    }

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

 

}

Step 3

Android Menifest.xml file
 

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.myapplication"

    android:versionCode="1"

    android:versionName="1.0" >

 

    <uses-sdk

        android:minSdkVersion="7"

        android:targetSdkVersion="16" />

 

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.myapplication.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

 

</manifest>

Step 4