MP PhilJay Bar Chart Android

Android MP PhilJay Bar Chart Android Studio

This tutorial describes how to create Android MP PhilJay Bar Chart Android Studio with MP PhilJay liberary and how to use bar entry from array list. and also describes how to create onClickListenter to show each bar in the chart value in alert dialog.

Android mp philjay charts library is jitpack library which is maven repositories. So, it requires jitpack.io dependency. Lets start.

MP Philjay Bar Chart Dependencies

Start a new android studio and open project level gradle file, then add the jitpack maven dependency.

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

Then, open module level gradle file and add the following dependencies. And click sync.

implementation 'com.android.support:design:28.0.0'
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

The next step, Open main activity xml file and add android mp philjay bar chart.

BarChart XML Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/barChart"/>
</LinearLayout>

Open main activity java file and create general objects of BarChart, arrayList of BarEntries and arrayList of String that will represent the label name of the months. And initiate them in onCreate method.

BarChart barChart;
ArrayList<BarEntry> barEntriesArrayList;
ArrayList<String > lableName;

barChart = findViewById(R.id.barChart);
barEntriesArrayList = new ArrayList<>();
lableName  = new ArrayList<>();

Then, create new java class the will represent the model of sales of the month.

public class MonthlySalesData {
    String month;
    int sales;

    public MonthlySalesData(String month, int sales) {
        this.month = month;
        this.sales = sales;
    }

    public String getMonth() {
        return month;
    }

    public void setMonth(String month) {
        this.month = month;
    }

    public int getSales() {
        return sales;
    }

    public void setSales(int sales) {
        this.sales = sales;
    }
}

Bar chart data step, create general arrayList of MonthlySalesData and initialize it in main activity class.

public class MainActivity extends AppCompatActivity {

    BarChart barChart;
    ArrayList<BarEntry> barEntriesArrayList;
    ArrayList<String > lableName;
    ArrayList<MonthlySalesData> monthlySalesDataArrayList = new ArrayList<>();

Next, we need to create the method that file the MonthlySalesArrayList with data the the bar chart will show it.

private void fillMonthlySalesArrayList(){

    monthlySalesDataArrayList.clear();
    monthlySalesDataArrayList.add(new MonthlySalesData("Jan",242000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Feb",300000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Mar",150000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Apr",250000));
    monthlySalesDataArrayList.add(new MonthlySalesData("May",242000));
    monthlySalesDataArrayList.add(new MonthlySalesData("June",300000));
    monthlySalesDataArrayList.add(new MonthlySalesData("July",150000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Aug",210000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Sep",242000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Oct",320000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Nov",150000));
    monthlySalesDataArrayList.add(new MonthlySalesData("Dec EGypt",200000));
}

And call the method in onCreate method of main activity.

fillMonthlySalesArrayList();

The BarEntryArrayList Step, we need to loop through monthlySalesArrayList and add each sales of the month to barEntryList. And in the same loop add month name in label nameArrayList. As following code.

for (int i =0; i < monthlySalesDataArrayList.size();i++){
    String month = monthlySalesDataArrayList.get(i).getMonth();
    int sales = monthlySalesDataArrayList.get(i).getSales();
    barEntriesArrayList.add(new BarEntry(i,sales));
    lableName.add(month);
}

Good work, next we need to create a new BarDataSet object that takes two parameters. The first is list of BarEntry and the second is String Label name. You can set the colors of Bar Chart through barDataset.setColors() method.

BarDataSet barDataSet = new BarDataSet(barEntriesArrayList,"Monthly Sales");
barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);

Bar Chart Description, You can create bar chart description and set it`s text, position and text alignment. And cast it to bar chart description.

Description description = new Description();
description.setText("Months");
barChart.setDescription(description);

Very Good, next create new BarData Object and cast barDataSet to it, and cast the barData to the barChart.

BarData barData = new BarData(barDataSet);
barChart.setData(barData);

Bar Chart XAXIS Formatter

Create a new object of XAxis which is getMethod of barChart object. The xAxis shows the label names(month names) and make us to set the positions, grid lines, granularity, label count and label rotating angle.

xAxis.setValueFormatter(new IndexAxisValueFormatter(lableName));
xAxis.setDrawGridLines(false);
xAxis.setDrawAxisLine(false);
xAxis.setGranularity(1f);
xAxis.setLabelCount(lableName.size());
xAxis.setLabelRotationAngle(270);
barChart.animateY(2000);
barChart.invalidate();

You are a hero android developer , Lets run your app to show the chart.

Android MP PhilJay Bar Chart Click Listener

barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
        int x = barChart.getData().getDataSetForEntry(e).getEntryIndex((BarEntry) e);
        String region = monthlySalesDataArrayList.get(x).getMonth();
        String sales = NumberFormat.getCurrencyInstance().format(monthlySalesDataArrayList.get(x).getSales());
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
        builder.setCancelable(true);
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.regional_sales_layout,null);
        TextView regionTxtView = view.findViewById(R.id.region);
        TextView salesTxtView = view.findViewById(R.id.sales);
        regionTxtView.setText(region);
        salesTxtView.setText(sales);
        builder.setView(view);
        alertDialog = builder.create();
        alertDialog.show();

    }

    @Override
    public void onNothingSelected() {

    }
});

Thank You

Tutorials You may interested in.