Using MPandroidChart Library for rendering graphs

Hello Fellas, We all know andorid till date don’t provide any graph view. That’s is why we are here.

There are many library available by various contributor all over the world. Some reputated one’s are:

This blog is based on MPAndroidChart library. Here are the steps to create a simple graph (a curved or line graph).

Step1. Add dependency in module level gradle aka build.gradle

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


dependencies {
    //format for including lib jar files for all flavors
    compile fileTree(dir: 'libs', include: ['*.jar'])
      compile 'com.github.PhilJay:MPAndroidChart:v2.2.3'
}

repositories {

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

}

dependencies {

//format for including lib jar files for all flavors

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.github.PhilJay:MPAndroidChart:v2.2.3'

}

Step2. Add custom type of Chart provided by library.

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

<com.github.mikephil.charting.charts.LineChart

android:id="@+id/chart1"

android:layout_width="match_parent"

android:layout_height="match_parent" />

note: we are using LineChart for the same of simplicity.

Step3. Configure your Chart View that was defined in step 2.

MPAndroidChart provide getter setter for the basic view as well changes that we want to reflect in graph view.

Here is our sample configuration.

            mChart.setViewPortOffsets(0, 20, 0, 0);
            mChart.setBackgroundColor(Color.rgb(255, 255, 255));

            // description text
           // initializing chart
            mChart = (LineChart) view.findViewById(R.id.chart1);
           
           //adding description
            mChart.setDescription("Traffic Data");

            // enable touch gestures
            mChart.setTouchEnabled(true);

            // enable scaling and dragging
            mChart.setDragEnabled(true);
            mChart.setScaleEnabled(true);

            // if disabled, scaling can be done on x- and y-axis separately
            mChart.setPinchZoom(false);

           // to draw any grid
            mChart.setDrawGridBackground(true);

            // to draw X-axis for our graph
            XAxis xAxis = holder.mChart.getXAxis();
            xAxis.setEnabled(true); 
            
            // setting position to TOP and INSIDE the chart
            xAxis.setPosition(XAxis.XAxisPosition.TOP_INSIDE);
            //  setting text size for our axis label
            xAxis.setTextSize(10f);
            xAxis.setTextColor(Color.BLACK);
           
           // to draw axis line
            xAxis.setDrawAxisLine(true);
            xAxis.setDrawGridLines(false);


            YAxis yAxis = holder.mChart.getAxisLeft();
//          yAxis.setTypeface(tf);

           // setting the count of Y-axis label's
            yAxis.setLabelCount(12, false);
            yAxis.setTextColor(Color.BLACK);
            yAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
            yAxis.setDrawGridLines(true);
            yAxissetAxisLineColor(Color.BLACK);

            holder.mChart.getAxisRight().setEnabled(false);

            // add data 
            // note: create data is custom method
            holder.mChart.setData(createData(10));

            holder.mChart.getLegend().setEnabled(false);

            // adding some animation that is some good part
            holder.mChart.animateXY(2000, 2000);

            // dont forget to refresh the drawing
            holder.mChart.invalidate();

mChart.setViewPortOffsets(0, 20, 0, 0);

mChart.setBackgroundColor(Color.rgb(255, 255, 255));

// description text

// initializing chart

mChart = (LineChart) view.findViewById(R.id.chart1);

//adding description

mChart.setDescription("Traffic Data");

// enable touch gestures

mChart.setTouchEnabled(true);

// enable scaling and dragging

mChart.setDragEnabled(true);

mChart.setScaleEnabled(true);

// if disabled, scaling can be done on x- and y-axis separately

mChart.setPinchZoom(false);

// to draw any grid

mChart.setDrawGridBackground(true);

// to draw X-axis for our graph

XAxis xAxis = holder.mChart.getXAxis();

xAxis.setEnabled(true);

// setting position to TOP and INSIDE the chart

xAxis.setPosition(XAxis.XAxisPosition.TOP_INSIDE);

// setting text size for our axis label

xAxis.setTextSize(10f);

xAxis.setTextColor(Color.BLACK);

// to draw axis line

xAxis.setDrawAxisLine(true);

xAxis.setDrawGridLines(false);

YAxis yAxis = holder.mChart.getAxisLeft();

// yAxis.setTypeface(tf);

// setting the count of Y-axis label's

yAxis.setLabelCount(12, false);

yAxis.setTextColor(Color.BLACK);

yAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);

yAxis.setDrawGridLines(true);

yAxissetAxisLineColor(Color.BLACK);

holder.mChart.getAxisRight().setEnabled(false);

// add data

// note: create data is custom method

holder.mChart.setData(createData(10));

holder.mChart.getLegend().setEnabled(false);

// adding some animation that is some good part

holder.mChart.animateXY(2000, 2000);

// dont forget to refresh the drawing

holder.mChart.invalidate();

Some cooked code for createData(count)

        private LineData setData(int count) {
// adding months in X-axis
            ArrayList<String> xVals = new ArrayList<String>();
            xVals.add("January");
            xVals.add("February");
            xVals.add("March");
            xVals.add("April");
            xVals.add("May");
            xVals.add("June");
            xVals.add("July");
            xVals.add("August");
            xVals.add("September");
            xVals.add("October");
            xVals.add("November");
            xVals.add("December");

            ArrayList<Entry> vals1 = new ArrayList<Entry>();
// Sample data in trafficDataJSON: 
//{"1":0,"2":0,"3":11,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
// Adding data values for Y-Axis
            for (int i = 1; i <= count; i++) {
                try {
                    vals1.add(new Entry(trafficDataJSON.getInt("" + i), i));
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }

            // create a dataset and give it a type
            LineDataSet set1 = new LineDataSet(vals1, "DataSet 1");
            set1.setDrawCubic(true);
            set1.setCubicIntensity(0.2f);
            //set1.setDrawFilled(true);
            set1.setDrawCircles(false);
            set1.setLineWidth(1.8f);
            set1.setCircleRadius(4f);
            set1.setCircleColor(Color.BLACK);
            set1.setHighLightColor(Color.rgb(244, 117, 117));
            set1.setColor(Color.BLACK);
            set1.setFillColor(Color.BLACK);
            set1.setFillAlpha(100);
            set1.setDrawHorizontalHighlightIndicator(false);
            set1.setFillFormatter(new FillFormatter() {
                @Override
                public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
                    return -10;
                }
            });

            // create a data object with the datasets
            LineData data = new LineData(xVals, set1);
//            data.setValueTypeface(tf);
            data.setValueTextSize(9f);
            data.setDrawValues(false);
            return data;

        }

private LineData setData(int count) {

// adding months in X-axis

ArrayList<String> xVals = new ArrayList<String>();

xVals.add("January");

xVals.add("February");

xVals.add("March");

xVals.add("April");

xVals.add("May");

xVals.add("June");

xVals.add("July");

xVals.add("August");

xVals.add("September");

xVals.add("October");

xVals.add("November");

xVals.add("December");

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

// Sample data in trafficDataJSON:

//{"1":0,"2":0,"3":11,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

// Adding data values for Y-Axis

for (int i = 1; i <= count; i++) {

try {

vals1.add(new Entry(trafficDataJSON.getInt("" + i), i));

} catch (JSONException e) {

e.printStackTrace();

}

// create a dataset and give it a type

LineDataSet set1 = new LineDataSet(vals1, "DataSet 1");

set1.setDrawCubic(true);

set1.setCubicIntensity(0.2f);

//set1.setDrawFilled(true);

set1.setDrawCircles(false);

set1.setLineWidth(1.8f);

set1.setCircleRadius(4f);

set1.setCircleColor(Color.BLACK);

set1.setHighLightColor(Color.rgb(244, 117, 117));

set1.setColor(Color.BLACK);

set1.setFillColor(Color.BLACK);

set1.setFillAlpha(100);

set1.setDrawHorizontalHighlightIndicator(false);

set1.setFillFormatter(new FillFormatter() {

@Override

public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {

return -10;

}

});

// create a data object with the datasets

LineData data = new LineData(xVals, set1);

// data.setValueTypeface(tf);

data.setValueTextSize(9f);

data.setDrawValues(false);

return data;

}

Here is our sample creation :

That’s all folks. Stay Updated.

Shubham Agarwal 14 December 2016

. . .

Using MPandroidChart Library for rendering graphs

Step1. Add dependency in module level gradle aka build.gradle

Step2. Add custom type of Chart provided by library.

Step3. Configure your Chart View that was defined in step 2.

Leave a Comment Cancel Reply

Message Sent!