(Kotlin) Implementing a Barchart and Piechart using MPAndroidChart
In this article we will be covering two different types of charts, a barchart and a piechart. There aren’t many tutorials out there on how to implement these charts using Kotlin, this was a struggle I faced when I was trying to implement the two and somehow couldn’t find any reliable tutorials to guide me.
A common library when it comes to implementing charts is the [MPAndroidChart] which you’ll notice is in Java and so all the tutorials I’ve come across are in Java. In this article we will be using Kotlin to implement the charts. The use case for implementing the two charts in my case is for a warehouse management system that will allow the user to see Orders vs Inventory.
1. Setup:
We first want to start by setting up the dependencies for the charts. In your Project level Gradle file you want to add jitpack.io:
Next, you want to go to your App level Gradle file and add the following dependencies:
implementation ‘com.github.PhilJay:MPAndroidChart:v3.1.0’
You’re doing great! You obviously need to sync the gradle again to make sure everything is up to date.
2. Design UI:
We now want to implement the screen that will hold both the BarChart and the PieChart. In my approach, I will be using a Fragment to hold the charts.
In Android Studio, click File -> New -> Fragment -> Fragment (Blank) and give it a name, in my case it is called HomeFragment. Make sure Source Language is set to Kotlin.
We are now ready to get our hands dirty. With a new Fragment created, we now have a HomeFragment.kt file and in the layout file we have a home_fragment.xml file where we will be implementing our design.
You will notice:
This block holds the BarChart. MPAndroidChart is a library that allows you to work with different types of charts, the documentation for this library would be a great place to start if you want to learn more.
For the PieChart you will notice:
This will hold the PieChart.
3. Populate the charts:
For now, if you try running the app, you’ll notice the charts are empty with text “No chart data available”. We need to populate the charts with data.
In your Fragment class you want to start by making sure your Fragment extends Fragment(). We will proceed and declare some global variables.
We also want to get the current year from the system.
For this article we don’t have a backend to work with so we will be using dummy data. Feel free to checkout the final product on Github that fetches order and inventory data from a backend.
in onCreateView you want to bind the views to the layout.
Our getStats() function will be responsible for getting the stats data and passing it to displayStats() function.
You should now be able to see the bar chart populated with random generated data. So far we’ve covered the Bar chart, From this you can now plug your logic e.g. fetching data from a backend and displaying it in the chart. In the final product I invoke an API call in the viewmodel and setup a livedata observer in the fragment to observe the response which I loop through and add the data to the chart.
To display data in the piechart we need to create a PieDataSet and then add it to the PieChart. Per the MPAndroidChart documentation, you can display multiple PieDataSets but in our case we will be using two PieDataSets. That of Orders Data and Inventory Data.
Within displayData() function we can call preparePieData() just beneath prepareChartData to configure our PieChart.
After preparing our data set, we need to display the data in our pie chart. still within displayData() function we can call setPieChartData() to display the pie chart data.
We have covered both the Bar and Pie charts. I hope this article was helpful. If you have any questions or comments, please feel free to leave a comment below.
The full project with a working backend can be found here: https://github.com/Ultra-Techies/ghala-android
Feel free to create a PR for any improvement you may think of or to add a new chart type.
#Cheers
