Android – Combined Line AND Bar Chart using MpAndroid Library Android Tutorial

This tutorial explains how to implement Combined Line and Bar Chart in a simple Android Application example

0
combined Line & Bar Chart

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





Introduction

A Chart is used to represent the data as symbol such as bars, lines, bubbles. In this tutorial, we will use MpAndroid Library to represent combined Line and Bar Chart.

This Library works for Android API 8 and above but if we are using animations, It works on API 11 and above. Animation is the greatest feature apart from easy data input.

Create a new project

To implement 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 to create chart, so open build.gradle(Module:app) file and add following code:

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

dependencies {
  ...
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
  ...
}

Create Layout

To display Combined Line and Bar chart in Android application, we need to add com.github.mikephil.charting.charts.CombinedChart xml tag in your layout xml file. Use the following code:

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

Create Array List of Line And Bar Chart

We will create two ArrayList<Entry>, ArrayList<BarEntry> getBarEnteries return type method that return list of Line and Bar data. In this method every individual value of raw data should be store in the Entry object. Such Entry object will used to create a DataSet.

private ArrayList<Entry> getLineEntriesData(ArrayList<Entry> entries){
    entries.add(new Entry(1, 20));
    entries.add(new Entry(2, 10));
    entries.add(new Entry(3, 8));
    entries.add(new Entry(4, 40));
    entries.add(new Entry(5, 37));

    return entries;
}

private ArrayList<BarEntry> getBarEnteries(ArrayList<BarEntry> entries){
    entries.add(new BarEntry(1, 25));
    entries.add(new BarEntry(2, 30));
    entries.add(new BarEntry(3, 38));
    entries.add(new BarEntry(4, 10));
    entries.add(new BarEntry(5, 15));
    return  entries;
}

Generate LineData and BarData object



We need to create two different return type(LineData and BarData) of method. In this method, we will create DataSet object called LineDatSet and BarDataSet. Pass the list of entry and String in the DataSet. Also, we can set the Line and Bar chat features like set color, set the size of text or set its color, set the Axis dependency etc. add the DataSet to the LineData object.

private LineData generateLineData() {

        LineData d = new LineData();

        ArrayList<Entry> entries = new ArrayList<Entry>();

        entries = getLineEntriesData(entries);

        LineDataSet set = new LineDataSet(entries, "Line");
        //set.setColor(Color.rgb(240, 238, 70));
        set.setColors(ColorTemplate.COLORFUL_COLORS);
        set.setLineWidth(2.5f);
        set.setCircleColor(Color.rgb(240, 238, 70));
        set.setCircleRadius(5f);
        set.setFillColor(Color.rgb(240, 238, 70));
        set.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        set.setDrawValues(true);
        set.setValueTextSize(10f);
        set.setValueTextColor(Color.rgb(240, 238, 70));

        set.setAxisDependency(YAxis.AxisDependency.LEFT);
        d.addDataSet(set);

        return d;
    }

private BarData generateBarData() {

        ArrayList<BarEntry> entries = new ArrayList<BarEntry>();
        entries = getBarEnteries(entries);

        BarDataSet set1 = new BarDataSet(entries, "Bar");
        //set1.setColor(Color.rgb(60, 220, 78));
        set1.setColors(ColorTemplate.COLORFUL_COLORS);
        set1.setValueTextColor(Color.rgb(60, 220, 78));
        set1.setValueTextSize(10f);
        set1.setAxisDependency(YAxis.AxisDependency.LEFT);

        float barWidth = 0.45f; // x2 dataset


        BarData d = new BarData(set1);
        d.setBarWidth(barWidth);


        return d;
    }

Create String Array

To set the Labels, we need to create String Array list. This Array list is used to set Lables. Without Chart Lables, Chart becomes meaning less.

protected String[] mMonths = new String[] {
   "Jan", "Feb", "Mar", "Apr", "May", "June"
};

Initialize Line Chart

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

public class MainActivity extends AppCompatActivity {
    private CombinedChart mChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mChart = (CombinedChart) findViewById(R.id.chart1);
   }
}

Set the Description

We can add the description to the chart via .getDescription().setText(“Your Description”).

 mChart.getDescription().setText("This is testing Description");

Enable Or Disable Background Grid

We can enable or disable grid view in background of the Chart by using setDrawGridBackground() method. If You want to set background grid then pass true otherwise false in the setDrawGridBackground() method.

 mChart.setDrawGridBackground(true);

Enable or Disable Bar Shadow

We can enable or disable full bar shadow by using below code:

mChart.setDrawBarShadow(true);
mChart.setHighlightFullBarEnabled(true);

Draw Combined Chart

We can set order of the Combined Chart bu using setDrawOrder(). In this tutorial, we can see bar draw behind the line.

// draw bars behind lines
mChart.setDrawOrder(new CombinedChart.DrawOrder[]{
    CombinedChart.DrawOrder.BAR,  CombinedChart.DrawOrder.LINE
});

Set the Legends Orientation

Create Legend object by calling getlegent(). Here, we will set word wrap by using setWordWrapEnabled() and also set horizontal, vertical Alignment and set orientation of the Legend.

Legend l = mChart.getLegend();
l.setWordWrapEnabled(true);
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);

Set Right And Left Axis

We can set Axis position to left or right or both

YAxis rightAxis = mChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setDrawGridLines(false);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

Set X-Axis Lables

Without lables, Chart is meaningless. We need to set X-Axis lables. We have already create String ArrayList to store lables as string. We need to create xAxis object and call .setValueFormatter() to set X-Axis.

XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);
xAxis.setAxisMinimum(0f);
xAxis.setGranularity(1f);
xAxis.setValueFormatter(new IAxisValueFormatter() {
   @Override
   public String getFormattedValue(float value, AxisBase axis) {
         return mMonths[(int) value % mMonths.length];
   }
});

Create CombinedData Object

Now, We need to create CombinedData object to set the LineData and BarData object. This is helpul to combined all data set.

 CombinedData data = new CombinedData();

data.setData( generateLineData());
data.setData(generateBarData());

Finally Create Chart

Pass the CombinedData object to setData(). It will create chart with data.

 xAxis.setAxisMaximum(data.getXMax() + 0.25f);
 mChart.setData(data);
 mChart.invalidate();

Combined Line & Bar Chart