Android Bar Chart or Bar Graph using MpAndroid Library Tutorial

This tutorial explains how to implement Bar Chart in a simple Android Application example.



multiseries_bar_chart

Introduction

A Bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column bar chart.

In this tutorial, we will implement Bar chart using MpAndroid library in Android application. We will cover all series of Bar chart. For that, we will create a simple Android application in Android studio and also need to include MpAndroid library in Android application.

Create a new project

To implement Bar chart, we are going to create a new android project. Go to File ⇒ New ⇒ New Projects in Android studio.

Add MpAndroid library

We need to add MpAndroid library in our project, so open build.gradle(Module:app) file and add following code:

repositories {
    maven { url "https://jitpack.io" }
}

dependencies {
   .....
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.4'
   .....
}

Create Layout

We can create two types Vertical and Horizontal Bar Chart. Vertical Bar Chart means the chart will be plotted Labels to X-axis and Numeric data to Y-axis. Horizontal Bar chart means a chart will be plotted Labels to Y-axis and Numeric data to X-axis. We need to use com.github.mikephil.charting.charts.BarChart XML tag for the Vertical Bar Chart and github.mikephil.charting.charts.HorizontalBarChart XML tag for Horizontal Bar Chart In the layout XML fil.

For Vertical Bar Chart

 <com.github.mikephil.charting.charts.BarChart
    android:id="@+id/barchart"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

For Horizontal Bar Chart

 <com.github.mikephil.charting.charts.HorizontalBarChart
    android:id="@+id/barchart"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Initialize Bar Chart

We need to initialize Bar chart in MainActivity.java file to display Charts.

For Vertical Bar Chart

BarChart barChart = (BarChart) findViewById(R.id.barchart);

For Horizontal Bar Chart

HorizontalBarChart barChart = (HorizontalBarChart) findViewById(R.id.barchart);

Create an ArrayList

We are going to store all data into an array and this data will populate into Chart. For that, we need to initialize an ArrayList. Every individual value of the data should be represented as a BarEntry. These BarEntry will store in an ArrayList.

ArrayList<String> labels = new ArrayList<String>();
            labels.add("2016");
            labels.add("2015");
            labels.add("2014");
            labels.add("2013");
            labels.add("2012");

Initialize BarDataSet Object

To display the data in a Bar chart, we need to initialize a BarDataSet instance. BarDataSet is the Subclass of DataSet class. Now, initialize the BarDataSet and pass the argument as an ArrayList of BarEntry object.

BarDataSet bardataset = new BarDataSet(entries, "Cells");

Define Labels

Without using labels, there is no meaningful sense of already added value to the chart. We can use an ArrayList to store labels.

ArrayList<String> labels = new ArrayList<String>();
            labels.add("2016");
            labels.add("2015");
            labels.add("2014");
            labels.add("2013");
            labels.add("2012");
            labels.add("2011");

Populate Data into Chart

To load the data into Bar Chart, We need to initialize BarData object with argument labels and bardataset. These BarData object pass into setData() method to load Bar Chart with data.

 BarData data = new BarData(labels, bardataset);
 barChart.setData(data); // set the data and list of labels into chart

Set the Description

To add description in the Bar Chart, we need to call setDescription(“Your Description”) method. Run your app in any Android Device to see Bar Chart.

 barChart.setDescription("Set Bar Chart Description");  // set the description

Vertical Bar Chart

bar_chart

Horizontal Bar Chart

horizontal_bar_chart

Set the Color

This library provides the number of predefined color templates that change the color of data set without having to deal with individual color values.

bardataset.setColors(ColorTemplate.COLORFUL_COLORS);

Vertical Bar Chart

bar_chart1

Horizontal Bar Chart


horizontal_bar_chart1

Adding Animations

This library supports animation, to make your charts appear more lively. The animateXY method is used to animate both axes of the chart. If you want to animate only one of the axes, you can use animateX oranimateY to animate the x-axis or y-axis respectively. You have to specify the duration (in milliseconds) of the animation when you call these methods. For example, to only animate the y-Axis, add the following code snippet:

barChart.animateY(5000);

MultiSeries Bar Chart

To create Multi-Series Bar Chart, We need to create individual DataSet and these dataset combined into an ArrayList. Type of this ArrayList is BarDataSet. Now, we will initialize the BarData object with argument list of labels and list of DataSet. Set the BarData into chart via setData();

// create BarEntry for Bar Group 1
 ArrayList<BarEntry> bargroup1 = new ArrayList<>();
        bargroup1.add(new BarEntry(8f, 0));
        bargroup1.add(new BarEntry(2f, 1));
        bargroup1.add(new BarEntry(5f, 2));
        bargroup1.add(new BarEntry(20f, 3));
        bargroup1.add(new BarEntry(15f, 4));
        bargroup1.add(new BarEntry(19f, 5));

// create BarEntry for Bar Group 1
ArrayList<BarEntry> bargroup2 = new ArrayList<>();
        bargroup2.add(new BarEntry(6f, 0));
        bargroup2.add(new BarEntry(10f, 1));
        bargroup2.add(new BarEntry(5f, 2));
        bargroup2.add(new BarEntry(25f, 3));
        bargroup2.add(new BarEntry(4f, 4));
        bargroup2.add(new BarEntry(17f, 5));

// creating dataset for Bar Group1
BarDataSet barDataSet1 = new BarDataSet(bargroup1, "Bar Group 1");  

//barDataSet1.setColor(Color.rgb(0, 155, 0));
barDataSet1.setColors(ColorTemplate.COLORFUL_COLORS);

// creating dataset for Bar Group 2
BarDataSet barDataSet2 = new BarDataSet(bargroup2, "Bar Group 2"); 
barDataSet2.setColors(ColorTemplate.COLORFUL_COLORS);

ArrayList<String> labels = new ArrayList<String>();
        labels.add("2016");
        labels.add("2015");
        labels.add("2014");
        labels.add("2013");
        labels.add("2012");
        labels.add("2011");

ArrayList<BarDataSet> dataSets = new ArrayList<>();  // combined all dataset into an arraylist
        dataSets.add(barDataSet1);
        dataSets.add(barDataSet2);

// initialize the Bardata with argument labels and dataSet        
BarData data = new BarData(labels, dataSets); 
barChart.setData(data);

Vertical Bar Chart

multiseries_bar_chart

Horizontal Bar Chart


multiseries_bar chart1




The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com