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:

i. PhilJay/MPAndroidChart

ii. http://www.android-graphview.org/

iii. aChartEngine

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'

}

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" />

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();

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;

}

Here is our sample creation :

That’s all folks. Stay Updated.

. . .

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!