12/08/2018, 15:10

MPAndroidChart

Every now and then as a developer you might come accross a hug arrays of data that needs some sort of data representation. If this representation happens to be charts then MPAndroidChart is one of the best you can embrace in your app. Using charts instead of tables to display that data can lead to ...

Every now and then as a developer you might come accross a hug arrays of data that needs some sort of data representation. If this representation happens to be charts then MPAndroidChart is one of the best you can embrace in your app. Using charts instead of tables to display that data can lead to a vastly better user experience and MPAndroidChart is highly flexible and supports customizations, interactivity and easy to implement.

Getting Started

  1. Download the latest version of the library from Github.
  2. Copy mpandroidchartlibrary-1-7-4.jar to your project's libs directory.
  3. In Android Studio, right click the JAR file and select Add as Library.

When trying to import data to be used by any type of chart, the data should be converted into Dataset object. Different types of charts use different subclasses of the DataSet class. For example, a BarChart uses a BarDataSet instance. Similarly, a PieChart uses a PieDataSet instance. Instead of simply dealing with random numbers to generate a sample chart, let's consider a hypothetical scenario. Say there is a store that sells a particular item and a record of items sold between January to June is recorded. Below is a data representation we will use to create a chart to show the number of items sold for this period.

Months Num of Items
January 12
Febuary 8
March 14
April 4
May 2
June 16

Looking at this data, a bar chart seems like a good option. To display the data in a 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 the 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> entries = new ArrayList<>();
entries.add(new BarEntry(12f, 0));
entries.add(new BarEntry(8f, 1));
entries.add(new BarEntry(14f, 2));
entries.add(new BarEntry(4f, 3));
entries.add(new BarEntry(2f, 4));
entries.add(new BarEntry(16f, 5));

Note that the first parameters passed to BarEntry represents the values of items. Now that the ArrayList of Entry objects is ready, we can create a DataSet out of it.

BarDataSet dataset = new BarDataSet(entries, "# of Calls");

Defining the X-Axis Labels Now that we have We have added several values to our chart, but they won't make much sense to the user unless we give them some meaningful labels. Each x-axis label is represented using a String and an ArrayList is used to store all the labels.

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

Now that we have all data represented and passed into out lists we can move on to the next step, creating our chat.

Creating a Chart All charts of MPAndroidChart library are subclasses of ViewGroup, which means that you can easily add them to any layout. You can define your chart using an XML file or Java code. If the chart is going to take up the entire screen of an Activity or Fragment, then using Java code is easier.

BarChart chart = new BarChart(context);
setContentView(chart);

The above code creates a blank chart without any data. Now let's use the data set and list of labels we created in the previous steps to define this chart's data.

BarData data = new BarData(labels, dataset);
chart.setData(data);

Adding a description label to the Chart chart.setDescription("# of Items Sold");

Now if we run the app we will see the values have been set and description also set. By default the chart is interactive and responds to pinch-to-zoom and dragging gestures.

For futher info on MPAndroidChart library such as Color Templates, Adding animations and so on please refer this link or checkout here for updates.

0