How to Plot Charts & Graphs in Android with MPAndroidChart Library

by Mir Suhail

A chart, also called a graph, is a graphical representation of data, in which “the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart“.

Charts are often used to ease understanding of large quantities of data and relationships between parts of data. Charts can usually be read more quickly than raw data that they are produced from. Below is the chart plotted for representing the data in America Walks app.

graph

In this blog, we are going to learn about a popular open source charting library MPAndroidChart. The charts of this library are highly customizable, interactive, and easy to create.

Getting Started

Adding dependency

In order to use the library, you have to import library into android package. There are 4 different options for this:

  1. Gradle dependency (recommended)
  2. Maven
  3. jar file only
  4. Clone whole repo

However, we will use the first (recommended) option i.e. gradle dependency. For this,

  • Add the following to your project level build.gradle:
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}
  • Add this to your app build.gradle:
dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
}

Creating the View

For using BarChart,LineChart, PieChart, etc , we have defined it in .xml layout:

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

And then retrieve it in the  Activity or Fragment like this:

    // Here, a BarChart is initialized from xml
    BarChart chart = (BarChart) findViewById(R.id.bar_chart);
    // If it is in a fragment, then use this in onCreateView() method
    BarChart chart = (BarChart) view.findViewById(R.id.bar_chart);

or create the instance programmatically (and then add it to a layout):

    // programmatically create a BarChart
    BarChart chart = new BarChart(Context);

    // get a layout defined in xml
    RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
    rl.add(chart); // add the programmatically created chart

Adding data

After we add instance of chart in the Activity or Fragment class, next thing to do is to add data to chart. All data to be fed to chart should be converted into a DataSet object before it can be used by a chart. Different types of charts use different subclasses of the DataSet class. For example, a BarChart uses a BarDataSet instance. Similarly, a PieChartuses a PieDataSet instance.

So, to display data in a bar chart, we need to create a BarDataSet instance. You can follow the same steps to create instances of other subclasses of DataSet.

Every individual value of raw data should be represented as an Entry. An ArrayList of such Entry objects is used to create a DataSet. Let’s create a few BarEntry objects and add them to an ArrayList:

ArrayList<BarEntry> BarEntry = new ArrayList<>();
BarEntry.add(new BarEntry(2f, 0));
BarEntry.add(new BarEntry(4f, 1));
BarEntry.add(new BarEntry(6f, 2));
BarEntry.add(new BarEntry(8f, 3));
BarEntry.add(new BarEntry(7f, 4));
BarEntry.add(new BarEntry(3f, 5));

Now that the ArrayList of BarEntry objects is ready, we can create a BarDataSet out of it:

BarDataSet dataSet = new BarDataSet(Barentry, "Projects");

After we have added BarDataSet into BarEntry, we will next setup x-axis of the chart. Each x-axis label is represented using a String and an ArrayList is used to store all labels.

ArrayList<String> labels = new ArrayList<>();
labels.add("January");
labels.add("February");
labels.add("March");
labels.add("April");
labels.add("May");
labels.add("June");

After we create dataSet and labels field, they are passed to the BarData object.

BarData data = new BarData(labels, dataSet);

We are done! Now the instance of chart which we have retrieved initially needs to be loaded with above data object, and chart will display data on screen. We can also add color Templates to dataSet and animations to chart instances as shown below.

dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
chart.setData(data);

You can also add a description to the chart.

chart.setDescription("No of Projects");

After doing this, just run the app and you should be able to view bar charts on app screen for the above dataSet like below:Bar-Graph-3

 

This is how we can create simple Bar Charts in android using MPAndroidChart library. You can follow the same steps to create other types of charts like Pie Chart, Line Chart etc and also add extra features to the charts. To learn more about this library, please wiki and examples on Github.

Go ahead and start coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

Mobile Research Apps

We have deep expertise in design and development of mobile research apps that work on both iOS and Android securely.

Contact us now

Popular Posts