How to create Verticle Bargraph in Android?

Hi, As you all know that, Android is a mobile operating system based on the Linux kernel and designed primarily for touchscreen mobile devices such as smartphones and tablets. While working on Android applications, I encountered an issue where I need to create a verticle bargraph which can be rotated vertically & horizontally. I have searched in many android developer forum for this solutions but still issue remains the same. Hoping to get a solution from the fellow tech experts.

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:

1
2
3
4
5
6
7
8
9
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

1
2
3
4
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barchart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
For Horizontal Bar Chart

1
2
3
4
<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

1
BarChart barChart = (BarChart) findViewById(R.id.barchart);
For Horizontal Bar Chart

1
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.

1
2
3
4
5
6
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.

1
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.

1
2
3
4
5
6
7
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.

1
2
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.

1
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.

1
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:

1
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();

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

Awesome explanation, I was having a similiar problem so thanks:)