How to Create Group BarChart in Android?
As we have seen how we can create a beautiful bar chart in Android but what if we have to represent data in the form of groups in our bar chart. So that we can plot a group of data in our bar chart. So we will be creating a Group Bar Chart in our Android app in this article.
What we are going to build in this article?
We will be building a simple application in which we will be displaying a bar chart with multiple sets of data in our Android application. We will display the data in the form of the group in our bar chart. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency and JitPack Repository
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation âcom.github.PhilJay:MPAndroidChart:v3.1.0â
Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.
allprojects {
repositories {
âŠ
maven { url âhttps://jitpack.ioâ }
}
}
After adding this dependency sync your project and now we will move towards its implementation.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > <!--Ui component for our bar chart--> < com.github.mikephil.charting.charts.BarChart android:id = "@+id/idBarChart" android:layout_width = "match_parent" android:layout_height = "match_parent" /> </ RelativeLayout > |
Step 4: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.graphics.Color; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import com.github.mikephil.charting.charts.BarChart; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.data.BarData; import com.github.mikephil.charting.data.BarDataSet; import com.github.mikephil.charting.data.BarEntry; import com.github.mikephil.charting.formatter.IndexAxisValueFormatter; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { // variable for our bar chart BarChart barChart; // variable for our bar data set. BarDataSet barDataSet1, barDataSet2; // array list for storing entries. ArrayList barEntries; // creating a string array for displaying days. String[] days = new String[]{ "Sunday" , "Monday" , "Tuesday" , "Thursday" , "Friday" , "Saturday" }; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initializing variable for bar chart. barChart = findViewById(R.id.idBarChart); // creating a new bar data set. barDataSet1 = new BarDataSet(getBarEntriesOne(), "First Set" ); barDataSet1.setColor(getApplicationContext().getResources().getColor(R.color.purple_200)); barDataSet2 = new BarDataSet(getBarEntriesTwo(), "Second Set" ); barDataSet2.setColor(Color.BLUE); // below line is to add bar data set to our bar data. BarData data = new BarData(barDataSet1, barDataSet2); // after adding data to our bar data we // are setting that data to our bar chart. barChart.setData(data); // below line is to remove description // label of our bar chart. barChart.getDescription().setEnabled( false ); // below line is to get x axis // of our bar chart. XAxis xAxis = barChart.getXAxis(); // below line is to set value formatter to our x-axis and // we are adding our days to our x axis. xAxis.setValueFormatter( new IndexAxisValueFormatter(days)); // below line is to set center axis // labels to our bar chart. xAxis.setCenterAxisLabels( true ); // below line is to set position // to our x-axis to bottom. xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // below line is to set granularity // to our x axis labels. xAxis.setGranularity( 1 ); // below line is to enable // granularity to our x axis. xAxis.setGranularityEnabled( true ); // below line is to make our // bar chart as draggable. barChart.setDragEnabled( true ); // below line is to make visible // range for our bar chart. barChart.setVisibleXRangeMaximum( 3 ); // below line is to add bar // space to our chart. float barSpace = 0 .1f; // below line is use to add group // spacing to our bar chart. float groupSpace = 0 .5f; // we are setting width of // bar in below line. data.setBarWidth( 0 .15f); // below line is to set minimum // axis to our chart. barChart.getXAxis().setAxisMinimum( 0 ); // below line is to // animate our chart. barChart.animate(); // below line is to group bars // and add spacing to it. barChart.groupBars( 0 , groupSpace, barSpace); // below line is to invalidate // our bar chart. barChart.invalidate(); } // array list for first set private ArrayList<BarEntry> getBarEntriesOne() { // creating a new array list barEntries = new ArrayList<>(); // adding new entry to our array list with bar // entry and passing x and y axis value to it. barEntries.add( new BarEntry(1f, 4 )); barEntries.add( new BarEntry(2f, 6 )); barEntries.add( new BarEntry(3f, 8 )); barEntries.add( new BarEntry(4f, 2 )); barEntries.add( new BarEntry(5f, 4 )); barEntries.add( new BarEntry(6f, 1 )); return barEntries; } // array list for second set. private ArrayList<BarEntry> getBarEntriesTwo() { // creating a new array list barEntries = new ArrayList<>(); // adding new entry to our array list with bar // entry and passing x and y axis value to it. barEntries.add( new BarEntry(1f, 8 )); barEntries.add( new BarEntry(2f, 12 )); barEntries.add( new BarEntry(3f, 4 )); barEntries.add( new BarEntry(4f, 1 )); barEntries.add( new BarEntry(5f, 7 )); barEntries.add( new BarEntry(6f, 3 )); return barEntries; } } |
Now run your app and see the output of the app.
Contact Us