TheJadav

Android simple LineChart, Bar Chart, Pie Chart with MPAndroidChart

Android simple LineChart, Bar Chart, Pie Chart with MPAndroidChart

Implement chart with MPAndroidChart

What you need to implement MPAndroidChart in your application is first you need to add dependency into your project.

 Add dependancy

project level:

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

module level:

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

 Add Line Chart

Now you are ready to use MPAndroidChart in your project. You can implement it with xml or by dynamically adding it in view.

add chart in xml file

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

or add it dynamically

LineChart chart = new LineChart(Context);

// get a layout defined in xml
RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
rl.add(chart); // add the programmatically created chart

Now you have instance of chart, then you can add data in it. To add data you need list of Entry. Entry is model class with x and y points. I have added Entry for demo like below:

private val listData = ArrayList<entry>()
listData.add(Entry(0f, 10f))
listData.add(Entry(1f, 20f))
listData.add(Entry(2f, 30f))
listData.add(Entry(3f, 10f))
listData.add(Entry(4f, 40f))
listData.add(Entry(5f, 20f))

Now you need to create LineDataSet object. Modification to chart will comes here. You can specify styling to chart with LineDataSet

val lineDataSet = LineDataSet(listData, getString(R.string.chartLable))
lineDataSet.color = ContextCompat.getColor(this, R.color.colorAccent)
lineDataSet.valueTextColor = ContextCompat.getColor(this, android.R.color.white)

At the final step you need to assign LineData to chart. To assign LineData you need to create object of LineData with the help of LineDataSet created in previous step.

val lineData = LineData(lineDataSet)
lineChart.data = lineData
lineChart.invalidate() //refresh

Bar Chart

to add bar chart you need to use BarEntry. Just modify your list data with this.

private val listData = ArrayList<barentry>()
        listData.add(BarEntry(1f, 2497f))
        listData.add(BarEntry(2f, 12050f))
        listData.add(BarEntry(3f, 30000f))
        listData.add(BarEntry(4f, 10560f))
        listData.add(BarEntry(5f, 14340f))
        listData.add(BarEntry(6f, 21234f))

and in xml file add this xml

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Initialise your chart and set data like this

private fun initLineChart() {
        val xAxis = chart.xAxis
        xAxis.setDrawLabels(true)
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        val xAxisFormatter = DayAxisValueFormatter(chart)
        xAxis.valueFormatter = xAxisFormatter
        xAxis.granularity = 1f

        val rightYAxis = chart.axisRight
        rightYAxis.setDrawLabels(false)
}
override fun setChart(listData: ArrayList<barentry>) {
        val dataSet = BarDataSet(listData, getString(R.string.chartLable))
        dataSet.color = ContextCompat.getColor(activity, R.color.colorAccent)
        dataSet.valueTextColor = ContextCompat.getColor(activity, android.R.color.black)

        val lineData = BarData(dataSet)
        chart.setFitBars(true)
        chart.data = lineData
        chart.invalidate() //refresh
}

This will look like this:

Note that create DayAxiValueFormatter like auther specified. To check it click here 

Pie Chart

You can also add PieChart. To add Pie Chart you need to use PieEntry
Init data like this

private val listData = ArrayList<PieEntry>()
        listData.add(PieEntry(10f, 2497f))
        listData.add(PieEntry(20f, 12050f))
        listData.add(PieEntry(30f, 30000f))
        listData.add(PieEntry(20f, 10560f))
        listData.add(PieEntry(10.8f, 14340f))
        listData.add(PieEntry(9.2f, 21234f))
        getView().setChart(listData)

and set chart as

 val dataSet = PieDataSet(listData, getString(R.string.chartLable))
        dataSet.color = ContextCompat.getColor(activity, R.color.colorAccent)
        dataSet.valueTextColor = ContextCompat.getColor(activity, R.color.colorText)
        dataSet.setColors(intArrayOf(R.color.color1, R.color.color2, R.color.color3), activity)

        val lineData = PieData(dataSet)
        chart.data = lineData
        chart.invalidate() //refresh

In xml you have add PieChart

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/chart"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Download it from My dropbox link.

If want to know more about it, Visit Github Repository You can also follow author of MPAndroidChart library

Share this content:

Share:

More Posts

How does data persistence work in Android?

Data persistence in Android is the ability to save data to the device so that it can be accessed later, even if the app is closed or the device is restarted. There are several ways to achieve data persistence in Android

Fragments and Activities: Two Pillars of Android Development

Fragments and Activities are both important components of Android development. Fragments are a good choice for creating reusable and dynamic UIs, while Activities are a good choice for managing the lifecycle of an app’s UI and implementing core features.

Table of Contents

Send Us A Message