Cara Membuat Chart di Android Studio Menggunakan MPAndroidChart Library

Cara Membuat Chart di Android Studio Menggunakan MPAndroidChart Library

Cara Membuat Chart di Android Studio Menggunakan MPAndroidChart Library
Cara Membuat Chart di Android Studio Menggunakan MPAndroidChart Library

Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat Chart di Android Studio Menggunakan MPAndroidChart Library, dimana kita akan menggunakan library dari MPAndroidChart Library pada program android studio yang nanti sobat buat, dan kalian juga bisa lihat artikel sebelumnya dimana saya sudah membuat artikel tentang tutorial android studio crud mysql bisa lihat disini, nah biasanya charts atau grafik ini dipakai untuk menyajikan laporan, monitoring data, dan masih banyak yang lainnya,

Dan untuk tujuannya yaitu mempresentasikan sebuah data dalam bentuk suatu grafis agar mudah untuk dipahami oleh pengguna. Seperti yang di kutip Wikipedia:

Bagan, juga diistilahkan sebagai grafik atau diagram, adalah sebuah representasi grafis dari data. Data yang diwakili dibentuk oleh simbol-simbol, seperti batang dalam bagan batang, garis-garis dalam sebuah bagan garis, atau irisan dalam bagan pai. — Wikipedia

jadi tutorial android studio kali ini yaitu membuat aplikasi charts atau mengimplementasikan bar chart di android studio menggunakan library MPAndroidChart.

Membuat Bar Char di Android Studio Menggunakan MPAndroidChart Library :


Langkah pertama silahkan sobat buka android studio sobat,saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "LatihanChart" kemudian pilh Api 19 , yaitu Android KitKat, langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut

Nah setelah kebuka silahkan sobat import library untuk MPAndroidChart ini dengan cara, ke Gradle Scripts ->build.gradle(Module: app) inget loh yang module:app, kemudian sobat masukkan codingan yang dibawah ini , dan terakhir Synch Now



implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

Setelah kalian synch now pasti akan muncul pesan error yang dimana pesan error itu menuliskan seperti ini :

ERROR: Failed to resolve: com.github.PhilJay:MPAndroidChart:v3.0.3

Tenang saja , kita masuk ke tahap yang ke dua agar tidak error ,  caranya dengan sobat ke Gradle Scripts ->build.gradle(Project: LatihanChart) , inget loh ya yang satunya , bukan yang module: app, lalu sobat tambahkan repository baru dibawah ini, dan langkah terakhir sobat Sync Now , maka tidak akan ada error lagi , jadi cukup Sync Now disitu saja , tidak ada error lagi nantinya.



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

Nah sobat, proses instalasi library sudah selesai. Sekarang sobat akan mulai proses implementasi MPAndroidChart di Android. nah untuk tutorial ini kita menampilkan Grafik Bar. silahkan sobat modifikasi activity_main.xml yang terletak di res -> values. Sobat akan menggunakan LinearLayout sebagai containernya.



<?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:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Sobat bisa lihat design nya , bertuliskan no charts data availabel ya karena kita belum membuat fungsinya, nah langsung saja kita membuat fungsinya silahkan sobat modifikasi pada file MainActivity.java bisa sobat lihat pada gambar dibawah ini.



package com.example.latihanchart;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.AxisBase;
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.IAxisValueFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private BarChart mBarChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBarChart = findViewById(R.id.chart);

        float groupSpace = 0.08f;
        float barSpace = 0.02f;
        float barWidth = 0.45f;
        float tahunAwal = 2016f;

        // Data-data yang akan ditampilkan di Chart
        List<BarEntry> dataPemasukan = new ArrayList<BarEntry>();
        dataPemasukan.add(new BarEntry(2016, 1500000));
        dataPemasukan.add(new BarEntry(2017, 1430000));
        dataPemasukan.add(new BarEntry(2018, 1750000));
        dataPemasukan.add(new BarEntry(2019, 1390000));

        List<BarEntry> dataPengeluaran = new ArrayList<BarEntry>();
        dataPengeluaran.add(new BarEntry(2016, 500000));
        dataPengeluaran.add(new BarEntry(2017, 430000));
        dataPengeluaran.add(new BarEntry(2018, 750000));
        dataPengeluaran.add(new BarEntry(2019, 390000));

        // Pengaturan atribut bar, seperti warna dan lain-lain
        BarDataSet dataSet1 = new BarDataSet(dataPemasukan, "Pemasukan");
        dataSet1.setColor(ColorTemplate.JOYFUL_COLORS[0]);

        BarDataSet dataSet2 = new BarDataSet(dataPengeluaran, "Pengeluaran");
        dataSet2.setColor(ColorTemplate.JOYFUL_COLORS[1]);

        // Membuat Bar data yang akan di set ke Chart
        BarData barData = new BarData(dataSet1, dataSet2);

        // Pengaturan sumbu X
        XAxis xAxis = mBarChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM.BOTTOM);
        xAxis.setCenterAxisLabels(true);

        // Agar ketika di zoom tidak menjadi pecahan
        xAxis.setGranularity(1f);

        // Diubah menjadi integer, kemudian dijadikan String
        // Ini berfungsi untuk menghilankan koma, dan tanda ribuah pada tahun
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return String.valueOf((int) value);
            }
        });

        //Menghilangkan sumbu Y yang ada di sebelah kanan
        mBarChart.getAxisRight().setEnabled(false);

        // Menghilankan deskripsi pada Chart
        mBarChart.getDescription().setEnabled(false);

        // Set data ke Chart
        // Tambahkan invalidate setiap kali mengubah data chart
        mBarChart.setData(barData);
        mBarChart.getBarData().setBarWidth(barWidth);
        mBarChart.getXAxis().setAxisMinimum(tahunAwal);
        mBarChart.getXAxis().setAxisMaximum(tahunAwal + mBarChart.getBarData().getGroupWidth(groupSpace, barSpace) * 4);
        mBarChart.groupBars(tahunAwal, groupSpace, barSpace);
        mBarChart.setDragEnabled(true);
        mBarChart.invalidate();

    }
}

Lagi dan lagi admin ingatkan sobat ketikkan dari bagian import saja sampai kebawah , dan disini admin ingin menjelaskan apabila sobat mengalami error pada bagian codingan

import androidx.appcompat.app.AppCompatActivity;

Silahkan sobat ganti dengan codingan

import android.support.v7.app.AppCompatActivity;

sebenernya mah sobat harus ketikkan dari bagian codingan

import com.github.mikephil.charting.charts.BarChart;

Dan sudah selesai deh , sobat tinggal running,  nah sobat bisa lihat hasilnya pada gambar dibawah ini, dan perlu sobat ketahui, ini artikel nulisnya cukup lama, 1jam, cuma buat running hasilnya doang, ya maklum gan laptop admin kentang hahahah, jadi silahkan sobat share artikel ini ya , agar admin makin semangat hahaha, oke itu saja terimakasih sobat sudah berkunjung sampai jumpa di tutorial android selanjutnya.


Anda mungkin menyukai postingan ini