Home » How to easily create Charts & Graphs in your Android App
Create Charts & Graphs in your Android App

How to easily create Charts & Graphs in your Android App

Reading time: 9 Minutes

Charts & graphs are a greatest way of illustration and differentiating in report generation for any activities in day to day life. There is no report in the world without using Charts & Graphs. From Day to Day Business sales to personal Expenses, Charts & Graphs type of data illustration provide a greater productivity & Simplification. 

It is really a tough job & takes much time to create and program charts & graphs on your own in our android app. For this, there are enormous amount of open source libraries free & premium projects available which makes Charts & Graphs easy to create, edit & modify. We can use any of the available chart libraries in our project to save time & effort.

In this article, we are going to create Charts & graphs using AndroidMP Chart library package which is available in github. This is one of the best open source project created by a sole person & widely used among developer community. Their contributors have good & clear documents & reference materials and their support is very good. 

Let’s see an example how to easily create Charts & Graphs using AndroidMP Chart library.

Simple Steps

  •  Create an New Android Project or Open an Existing Android Project.
  • Import AndroidMP Chart Library to the project.
  • Add Charts in layout file
  • Push Data & generate Charts 

Step 1 (Create Android Project) :

Go to File -> New -> New Project

File New Android Project

 

Select Empty Activity & click Next to Proceed

Create New Android Project 1

Provide your Project Name, Package, Choose Language to Java & click Finish. Your Project will start Building automatically.

 

Step 2 (Importing Chart Library) :

Go to project level build.gradle file and write the following in repositories block.

maven { url 'https://jitpack.io' }

build.gradle file Project Level

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
dependencies {
classpath "com.android.tools.build:gradle:4.1.2"

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}

task clean(type: Delete) {
delete rootProject.buildDir
}

Go to App Level build.gradle file and add the following dependencies in the dependecies block

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

build.gradle file (App Level)

plugins {
id 'com.android.application'
}

android {
compileSdkVersion 29

defaultConfig {
applicationId "com.atooz.learning"
minSdkVersion 19
targetSdkVersion 29
versionCode 1
versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}

buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}

dependencies {

implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

Step 3 (Adding Charts in Layout File)

Go to activity_mail.xml  layout file.

Add the following for LineChart View

<com.github.mikephil.charting.charts.LineChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/lineChart1"
android:layout_margin="5dp"
/>

For PieChart

<com.github.mikephil.charting.charts.PieChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/pieChart1"
android:layout_margin="5dp"
/>

For BarChart

<com.github.mikephil.charting.charts.BarChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/barChart1"
android:layout_margin="5dp"
/>

You can also create these views at runtime and assign to parent container or view in Java File .

activity_mail.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/lineChart1"
android:layout_margin="5dp"
/>
<com.github.mikephil.charting.charts.PieChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/pieChart1"
android:layout_margin="5dp"
/>
<com.github.mikephil.charting.charts.BarChart
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="@+id/barChart1"
android:layout_margin="5dp"
/>

</LinearLayout>

</androidx.core.widget.NestedScrollView>

 

Step 4 (Push Data  and Generate Charts):

We can Create a sample Data Set for Chart Values & Pass it to ChartViews to generate the respective charts like Line Chart, Pie Chart and Bar Chart.

Go to MainActivity.java & write following codes

For LineChart :

LineChart lineChart1 = (LineChart) findViewById(R.id.lineChart1);Entry entry1 = new Entry(1,100);
Entry entry2 = new Entry(2,200);
Entry entry3 = new Entry(3,350);
Entry entry4 = new Entry(5,450);
Entry entry5 = new Entry(6,250);
List entryList = new ArrayList() ;
entryList.add(entry1);
entryList.add(entry2);
entryList.add(entry3);
entryList.add(entry4);
entryList.add(entry5);
LineDataSet lineDataSet = new LineDataSet(entryList, "XY Line Chart");
lineDataSet.setCircleColor(Color.GREEN);
lineDataSet.setColor(Color.CYAN);
lineDataSet.setValueTextColor(Color.GRAY);
LineData lineData = new LineData(lineDataSet);
lineChart1.setData(lineData);
lineChart1.invalidate();

For Pie Chart

PieEntry pieEntry1 = new PieEntry(5000,"Home Rent");
PieEntry pieEntry2 = new PieEntry(8000,"Food Expense");
PieEntry pieEntry3 = new PieEntry(18000,"Children School Fees");
PieEntry pieEntry4 = new PieEntry(1000,"Electricity Bill");
PieEntry pieEntry5 = new PieEntry(1000,"Netflix Subscription");
List pieEntryList = new ArrayList();
pieEntryList.add(pieEntry1);
pieEntryList.add(pieEntry2);
pieEntryList.add(pieEntry3);
pieEntryList.add(pieEntry4);
pieEntryList.add(pieEntry5);
PieDataSet pieDataSet = new PieDataSet(pieEntryList,"Monthly Personal Expenses");
int[] colorList = new int[]{Color.BLUE,Color.YELLOW, Color.GREEN, Color.RED, Color.DKGRAY};
pieDataSet.setColors(colorList);
pieDataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
PieData pieData = new PieData(pieDataSet);
PieChart pieChart1 = (PieChart) findViewById(R.id.pieChart1);
pieChart1.setData(pieData);
pieChart1.invalidate();

For Bar Chart

BarEntry barEntry1 = new BarEntry(10, 1000);
BarEntry barEntry2 = new BarEntry(20, 1500);
BarEntry barEntry3 = new BarEntry(30, 3000);
BarEntry barEntry4 = new BarEntry(40, 1200);
BarEntry barEntry5 = new BarEntry(50, 5000);
List barEntryList = new ArrayList();
barEntryList.add(barEntry1);
barEntryList.add(barEntry2);
barEntryList.add(barEntry3);
barEntryList.add(barEntry4);
barEntryList.add(barEntry5);
BarDataSet barDataSet = new BarDataSet(barEntryList,"Bar Graph");
barDataSet.setColors(Color.GREEN);
BarData barData = new BarData(barDataSet);
BarChart barChart1 = (BarChart) findViewById(R.id.barChart1);
barChart1.setData(barData);
barChart1.invalidate();

MainActivity.java file

package com.atooz.learning;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {



@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chartInit();

}

public void chartInit(){
LineChart lineChart1 = (LineChart) findViewById(R.id.lineChart1);

Entry entry1 = new Entry(1,100);
Entry entry2 = new Entry(2,200);
Entry entry3 = new Entry(3,350);
Entry entry4 = new Entry(5,450);
Entry entry5 = new Entry(6,250);

List<Entry> entryList = new ArrayList<Entry>() ;
entryList.add(entry1);
entryList.add(entry2);
entryList.add(entry3);
entryList.add(entry4);
entryList.add(entry5);

LineDataSet lineDataSet = new LineDataSet(entryList, "XY Line Chart");
lineDataSet.setCircleColor(Color.GREEN);
lineDataSet.setColor(Color.CYAN);
lineDataSet.setValueTextColor(Color.GRAY);

LineData lineData = new LineData(lineDataSet);
lineChart1.setData(lineData);
lineChart1.invalidate();


PieEntry pieEntry1 = new PieEntry(5000,"Home Rent");
PieEntry pieEntry2 = new PieEntry(8000,"Food Expense");
PieEntry pieEntry3 = new PieEntry(18000,"Children School Fees");
PieEntry pieEntry4 = new PieEntry(1000,"Electricity Bill");
PieEntry pieEntry5 = new PieEntry(1000,"Netflix Subscription");

List<PieEntry> pieEntryList = new ArrayList<PieEntry>();
pieEntryList.add(pieEntry1);
pieEntryList.add(pieEntry2);
pieEntryList.add(pieEntry3);
pieEntryList.add(pieEntry4);
pieEntryList.add(pieEntry5);

PieDataSet pieDataSet = new PieDataSet(pieEntryList,"Monthly Personal Expenses");
int[] colorList = new int[]{Color.BLUE,Color.YELLOW, Color.GREEN, Color.RED, Color.DKGRAY};
pieDataSet.setColors(colorList);
pieDataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

PieData pieData = new PieData(pieDataSet);
PieChart pieChart1 = (PieChart) findViewById(R.id.pieChart1);
pieChart1.setData(pieData);
pieChart1.invalidate();

BarEntry barEntry1 = new BarEntry(10, 1000);
BarEntry barEntry2 = new BarEntry(20, 1500);
BarEntry barEntry3 = new BarEntry(30, 3000);
BarEntry barEntry4 = new BarEntry(40, 1200);
BarEntry barEntry5 = new BarEntry(50, 5000);

List<BarEntry> barEntryList = new ArrayList<BarEntry>();
barEntryList.add(barEntry1);
barEntryList.add(barEntry2);
barEntryList.add(barEntry3);
barEntryList.add(barEntry4);
barEntryList.add(barEntry5);

BarDataSet barDataSet = new BarDataSet(barEntryList,"Bar Graph");

barDataSet.setColors(Color.GREEN);

BarData barData = new BarData(barDataSet);
BarChart barChart1 = (BarChart) findViewById(R.id.barChart1);
barChart1.setData(barData);
barChart1.invalidate();

}

}

That’s all folks. Run the app. You will get beautiful charts. Large Customizations can be done using this library. Go through it. It will be wonderful.

Output 2
Output 3

I think you liked the article. Thanks for spending your time with my post. Lets see in another post. Bye… Bye…

Related Posts

Leave a Reply

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

%d bloggers like this: