Android Chart Example: MP Android Chart library

Now days when building business apps, or fitness apps, one of the common UI component used is a chart. But drawing a chart through graphics could take a lot of time and would slow down your development. Therefore to fast pace your development, many open source libraries are available online. One of those libraries is MPAndroidChart by Phil Jay, this library when compared to other chart libraries, is comparatively new. But still it is very stable and is starred by more than 3K users on GitHub. By using MP Chart library for Android, displaying graphs or charts is much simpler now as it also supports customization and animation of graphs. Therefore in this Android chart example, I would make a bar chart, using MPAndroidChart library.

As I mentioned above, MP Android Chart library is not the only library available for drawing charts on Android. I would like to mention here that this Android Chart Example is the fifth in line to my series on displaying graphs on Android. Please go through them to choose a best approach for your project, as different projects have different requirements:

1. Google Chart Tools- Latest Chart Tools
2. Google Chart Tools: Image Tools– Deprecated
3. AFreeChart Library
4. AChartEngine Library
5. Android MP Chart Library

MP Android Chart Library Example

Using these libraries, drawing charts on Android could never be simpler. MPAndroidChart library works on Android API 8 and above, but if you are using animations, it works on API 11 and above. Animations is one of the greatest features apart from easy data input, this library could have. Some how I feel animations give good user experience to an application. Through MPAndroidChart library, we can use more than 25 inbuilt animations, also can define custom animations. When making charts on Android MPAndroidChart library which falls under the Apache 2.0 license, we can draw a:

• Simple Bar Chart
• Grouped Bar Chart
• Horizontal Bar Chart
• Simple Line Chart
• Line Chart with Cubic Lines
• Grouped Line Chart
• Combined Line and Bar Chart
• Pie Chart
• Scatter Chart
• Candlestick Chart
• Radar Chart

Moving forward in this tutorial, we will make a grouped bar chart, with animation as shown in the animation above. To start first add these in your gradle file:

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

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

Next lets create a layout for MP Android Chart Example:

<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.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

As you can see in the above layout, I have used com.github.mikephil.charting.charts.BarChart xml tag to create an Android bar chart example. But if you plan on to create different charts with MPAndroidChart library don’t forget to change the tag as shown below.

Next lets have a look at the activity code:

package com.truiton.mpchartexample;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

import com.github.mikephil.charting.charts.BarChart;
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.utils.ColorTemplate;

import java.util.ArrayList;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BarChart chart = (BarChart) findViewById(R.id.chart);

        BarData data = new BarData(getXAxisValues(), getDataSet());
        chart.setData(data);
        chart.setDescription("My Chart");
        chart.animateXY(2000, 2000);
        chart.invalidate();
    }

    private ArrayList<BarDataSet> getDataSet() {
        ArrayList<BarDataSet> dataSets = null;

        ArrayList<BarEntry> valueSet1 = new ArrayList<>();
        BarEntry v1e1 = new BarEntry(110.000f, 0); // Jan
        valueSet1.add(v1e1);
        BarEntry v1e2 = new BarEntry(40.000f, 1); // Feb
        valueSet1.add(v1e2);
        BarEntry v1e3 = new BarEntry(60.000f, 2); // Mar
        valueSet1.add(v1e3);
        BarEntry v1e4 = new BarEntry(30.000f, 3); // Apr
        valueSet1.add(v1e4);
        BarEntry v1e5 = new BarEntry(90.000f, 4); // May
        valueSet1.add(v1e5);
        BarEntry v1e6 = new BarEntry(100.000f, 5); // Jun
        valueSet1.add(v1e6);

        ArrayList<BarEntry> valueSet2 = new ArrayList<>();
        BarEntry v2e1 = new BarEntry(150.000f, 0); // Jan
        valueSet2.add(v2e1);
        BarEntry v2e2 = new BarEntry(90.000f, 1); // Feb
        valueSet2.add(v2e2);
        BarEntry v2e3 = new BarEntry(120.000f, 2); // Mar
        valueSet2.add(v2e3);
        BarEntry v2e4 = new BarEntry(60.000f, 3); // Apr
        valueSet2.add(v2e4);
        BarEntry v2e5 = new BarEntry(20.000f, 4); // May
        valueSet2.add(v2e5);
        BarEntry v2e6 = new BarEntry(80.000f, 5); // Jun
        valueSet2.add(v2e6);

        BarDataSet barDataSet1 = new BarDataSet(valueSet1, "Brand 1");
        barDataSet1.setColor(Color.rgb(0, 155, 0));
        BarDataSet barDataSet2 = new BarDataSet(valueSet2, "Brand 2");
        barDataSet2.setColors(ColorTemplate.COLORFUL_COLORS);

        dataSets = new ArrayList<>();
        dataSets.add(barDataSet1);
        dataSets.add(barDataSet2);
        return dataSets;
    }

    private ArrayList<String> getXAxisValues() {
        ArrayList<String> xAxis = new ArrayList<>();
        xAxis.add("JAN");
        xAxis.add("FEB");
        xAxis.add("MAR");
        xAxis.add("APR");
        xAxis.add("MAY");
        xAxis.add("JUN");
        return xAxis;
    }
}

This would result in a great looking bar chart like this:

Now lets understand how MPAndroidChart library works. As shown in the above class, first a BarChart is initialized. Then data according to the bar chart is generated using the BarEntry class. This is a subclass of Entry class, which is the base class for all chart data types in MPAndroidChart library. Further this BarEntry is added into BarDataSet. Then all of these values along with X axis values are set in the bar chart using chart.setData(data) method. Now to make the bar chart reflect this latest data, we need to call chart.invalidate() method. This would result into a great looking bar chart as shown above.

As I mentioned, MPAndroidChart library is customizable, lets have a look at some of its key features:

MP Android Chart Animations

To animate a chart from MPAndroidChart library these methods are used:

• chart.animateX(2000) – For X axis animation
• chart.animateY(2000) – For Y axis animation
• chart.animateXY(2000, 2000) – For XY axis animation

Although, above code would do a standard animation. But if you wish to change the animation style or want to make a custom animation, refer to this page. Please note animations would work only on API 11 and above.

MP Android Chart Colors

While making charts on Android using MPAndroidChart library, you can also change the color of bars in the chart by using these methods:

• setColor – used to set a single color to full data set.
• setColors – used to set entries in different colors, in a data set.

These methods are used while creating the DataSet object as shown above.

Conclusion

With this I would like to conclude by saying, MPAndroidChart is a great library. Above I showed an Android chart example, for bar chart, using this library. But if you wish to make other types of charts, you may just need to change the class names. As MP Chart library is designed in such a way that most of the charts input data in same way. Hope this helped. Connect with us on Facebook, Google+ and Twitter for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.