Cara Membuat Barchart pada Android Menggunakan Retrofit dan Database MySQL

Don’t say NO Before you Try it !

Kali ini saya ingin share tentang pengalaman saya membuat aplikasi android “mengambil data dari database dan kemudian menampilkan di barchart android” . Saya rasa ini cukup sulit karena di beberapa tutorial website, stack overflow, developer android group, youtube jarang yang bahas detail untuk kasus seperti ini. Saya coba tanya ke beberapa komunitas android dan teman, tapi cukup sulit untuk mendapatkannya 😀

Akhirnya saya menemukan satu buah link di stack overflow, gak rinci sih tapi ngasih inti penyelesaiannya. #ayee 😀

Link nya bisa di akses disini !

Sekarang, saya akan memberikan step by step bagaimana membuat barchart dan mengambil data dari database :

1. Terlebih dahulu, kita siapkan sebuah data JSON, seperti dibawah ini :

{
“result”: “true”,
“msg”: “Data Indikator”,
“data”: [
{
“id_indikator”: “35”,
“id_tipe_indikator”: “1”,
“th_indikator”: “2012”,
“jml_indikator”: “16.43”,
“id”: “1”,
“tipe_indikator”: “Pertumbuhan Ekonomi”
},
{
“id_indikator”: “36”,
“id_tipe_indikator”: “1”,
“th_indikator”: “2013”,
“jml_indikator”: “-8.16”,
“id”: “1”,
“tipe_indikator”: “Pertumbuhan Ekonomi”
},
{
“id_indikator”: “37”,
“id_tipe_indikator”: “1”,
“th_indikator”: “2014”,
“jml_indikator”: “0.48”,
“id”: “1”,
“tipe_indikator”: “Pertumbuhan Ekonomi”
},
{
“id_indikator”: “38”,
“id_tipe_indikator”: “1”,
“th_indikator”: “2015”,
“jml_indikator”: “7.65”,
“id”: “1”,
“tipe_indikator”: “Pertumbuhan Ekonomi”
},
{
“id_indikator”: “39”,
“id_tipe_indikator”: “1”,
“th_indikator”: “2016”,
“jml_indikator”: “3.74”,
“id”: “1”,
“tipe_indikator”: “Pertumbuhan Ekonomi”
}
]
}

2. Kemudian di androidnya, kita tambahkan beberapa library yang akan digunakan

Library Retrofit , library ini berfungsi untuk mengambil dan menyimpan data ke database server. Method yang bisa digunakan adalah PUT, GET, dan lain-lain

implementation 'com.squareup.retrofit2:retrofit:2.3.0'

MPAndoidchart, so far this is awesome library :* Kita bisa membuat berbagai macam jenis chart seperti barchart, Linechart, Radarchart dan lain-lain

compile 'com.github.PhilJay:MPAndroidChart:v2.0.9'

3. Pada bagian desainnya, kita tambahkan kodingan seperti ini :

<em class="markup--em markup--pre-em"><?</em><strong class="markup--strong markup--pre-strong">xml version="1.0" encoding="utf-8"</strong><em class="markup--em markup--pre-em">?>
</em><<strong class="markup--strong markup--pre-strong">android.support.constraint.ConstraintLayout 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="imastudio.id.co.androidcharexample.MainActivity"</strong>>

    <<strong class="markup--strong markup--pre-strong">RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"</strong>>
        <<strong class="markup--strong markup--pre-strong">com.github.mikephil.charting.charts.BarChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent" </strong>/>

    </<strong class="markup--strong markup--pre-strong">RelativeLayout</strong>>
</<strong class="markup--strong markup--pre-strong">android.support.constraint.ConstraintLayout</strong>><span style="background-color: #cce4f5;" data-mce-style="background-color: #cce4f5;">&nbsp;</span>

4. Pada Activity, tambahkan kodingan untuk untuk get data json

<strong class="markup--strong markup--pre-strong">private void </strong>getListData() {
        <strong class="markup--strong markup--pre-strong">try </strong>{
            RestApi api = MyRetrofitClient.<em class="markup--em markup--pre-em">getInstanceRetrofit2</em>();


            Call<RssJ544IndikatorByTipe> call = api.getIndikatorByTipe(<strong class="markup--strong markup--pre-strong">idTipe</strong>);
            call.enqueue(<strong class="markup--strong markup--pre-strong">new </strong>Callback<RssJ544IndikatorByTipe>() {
                @Override
                <strong class="markup--strong markup--pre-strong">public void </strong>onResponse(Call<RssJ544IndikatorByTipe> call, Response<RssJ544IndikatorByTipe> response) {
<em class="markup--em markup--pre-em">//                    Log.d("onResponse", response.body().toString());

                    </em>String r = response.body().getResult();
                    Log.<em class="markup--em markup--pre-em">d</em>(<strong class="markup--strong markup--pre-strong">"adaa22"</strong>, response.body().toString());

                    <strong class="markup--strong markup--pre-strong">if </strong>(r.equalsIgnoreCase(<strong class="markup--strong markup--pre-strong">"true"</strong>)) {


                        <em class="markup--em markup--pre-em">dataIndikator </em>= response.body().getData();

                        ArrayList<BarEntry> yVals = <strong class="markup--strong markup--pre-strong">new </strong>ArrayList<BarEntry>();


                        <strong class="markup--strong markup--pre-strong">for </strong>(<strong class="markup--strong markup--pre-strong">int </strong>i = 0; i < <em class="markup--em markup--pre-em">dataIndikator</em>.size(); i++) {
                            DataItemJ554IndikatorByTipe x = <em class="markup--em markup--pre-em">dataIndikator</em>.get(i);
                            <strong class="markup--strong markup--pre-strong">float </strong>a12 = Float.<em class="markup--em markup--pre-em">parseFloat</em>(x.getJmlIndikator());
                            <strong class="markup--strong markup--pre-strong">int </strong>a22 = Integer.<em class="markup--em markup--pre-em">parseInt</em>(x.getId());
                            yVals.add(<strong class="markup--strong markup--pre-strong">new </strong>BarEntry(a12, i));
                        }


                        ArrayList<String> xVals = <strong class="markup--strong markup--pre-strong">new </strong>ArrayList<String>();
                        <strong class="markup--strong markup--pre-strong">for </strong>(<strong class="markup--strong markup--pre-strong">int </strong>i = 0; i < <em class="markup--em markup--pre-em">dataIndikator</em>.size(); i++) {
                            DataItemJ554IndikatorByTipe x = <em class="markup--em markup--pre-em">dataIndikator</em>.get(i);
                            <strong class="markup--strong markup--pre-strong">float </strong>a12 = Float.<em class="markup--em markup--pre-em">parseFloat</em>(x.getJmlIndikator());
                            String a22 = x.getThIndikator();

                        }

                        BarDataSet dataSet = <strong class="markup--strong markup--pre-strong">new </strong>BarDataSet(yVals, <em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        dataSet.setColors(ColorTemplate.<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">COLORFUL_COLORS</em></strong>);

                        BarData data = <strong class="markup--strong markup--pre-strong">new </strong>BarData(xVals, dataSet);


                        LimitLine line = <strong class="markup--strong markup--pre-strong">new </strong>LimitLine(12f, <em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        line.setTextSize(12f);
                        line.setLineWidth(4f);
                        YAxis leftAxis = <strong class="markup--strong markup--pre-strong">chart</strong>.getAxisLeft();
                        leftAxis.addLimitLine(line);

                        <strong class="markup--strong markup--pre-strong">chart</strong>.setData(data);
                        <strong class="markup--strong markup--pre-strong">chart</strong>.setDescription(<em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        <strong class="markup--strong markup--pre-strong">chart</strong>.animateY(2000);


                    } <strong class="markup--strong markup--pre-strong">else </strong>{

                    }


                }

                @Override
                <strong class="markup--strong markup--pre-strong">public void </strong>onFailure(Call<RssJ544IndikatorByTipe> call, Throwable t) {

                }
            });

<em class="markup--em markup--pre-em">//
        </em>} <strong class="markup--strong markup--pre-strong">catch </strong>(Exception e) {
        }
    }

Full kodingan pada bagian MainBarChart Acitivity :

<strong class="markup--strong markup--pre-strong">public class </strong>MainBarChart <strong class="markup--strong markup--pre-strong">extends </strong>AppCompatActivity {

    <strong class="markup--strong markup--pre-strong">public static </strong>List<DataItemJ554IndikatorByTipe> <em class="markup--em markup--pre-em">dataIndikator</em>;


    DataItemJ54GetAllIndikator <strong class="markup--strong markup--pre-strong">dataItemGet</strong>;
    String <strong class="markup--strong markup--pre-strong">idTipe</strong>;
    BarChart <strong class="markup--strong markup--pre-strong">chart</strong>;

    <strong class="markup--strong markup--pre-strong">int start</strong>, <strong class="markup--strong markup--pre-strong">end</strong>;


    @Override
    <strong class="markup--strong markup--pre-strong">protected void </strong>onCreate(Bundle savedInstanceState) {
        <strong class="markup--strong markup--pre-strong">super</strong>.onCreate(savedInstanceState);
        setContentView(R.layout.<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">activity_main</em></strong>);
        <strong class="markup--strong markup--pre-strong">chart </strong>= (BarChart) findViewById(R.id.<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">chart</em></strong>);

        <em class="markup--em markup--pre-em">dataIndikator </em>= <strong class="markup--strong markup--pre-strong">new </strong>ArrayList<>();


        <strong class="markup--strong markup--pre-strong">int </strong>posisi = getIntent().getIntExtra(<strong class="markup--strong markup--pre-strong">"posisi"</strong>, 0);

        <strong class="markup--strong markup--pre-strong">dataItemGet </strong>= MenuTipeIndikatorActivity.<em class="markup--em markup--pre-em">dataItemJ23RiwayatLelangs</em>.get(posisi);

        <strong class="markup--strong markup--pre-strong">idTipe </strong>= <strong class="markup--strong markup--pre-strong">dataItemGet</strong>.getId();
        Toast.<em class="markup--em markup--pre-em">makeText</em>(getApplicationContext(), <strong class="markup--strong markup--pre-strong">"id " </strong>+ <strong class="markup--strong markup--pre-strong">idTipe</strong>, Toast.<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">LENGTH_LONG</em></strong>).show();


        getListData();

    }

    <strong class="markup--strong markup--pre-strong">private void </strong>getListData() {
        <strong class="markup--strong markup--pre-strong">try </strong>{
            RestApi api = MyRetrofitClient.<em class="markup--em markup--pre-em">getInstanceRetrofit2</em>();


            Call<RssJ544IndikatorByTipe> call = api.getIndikatorByTipe(<strong class="markup--strong markup--pre-strong">idTipe</strong>);
            call.enqueue(<strong class="markup--strong markup--pre-strong">new </strong>Callback<RssJ544IndikatorByTipe>() {
                @Override
                <strong class="markup--strong markup--pre-strong">public void </strong>onResponse(Call<RssJ544IndikatorByTipe> call, Response<RssJ544IndikatorByTipe> response) {
<em class="markup--em markup--pre-em">//                    Log.d("onResponse", response.body().toString());

                    </em>String r = response.body().getResult();
                    Log.<em class="markup--em markup--pre-em">d</em>(<strong class="markup--strong markup--pre-strong">"adaa22"</strong>, response.body().toString());

                    <strong class="markup--strong markup--pre-strong">if </strong>(r.equalsIgnoreCase(<strong class="markup--strong markup--pre-strong">"true"</strong>)) {


                        <em class="markup--em markup--pre-em">dataIndikator </em>= response.body().getData();

                        ArrayList<BarEntry> yVals = <strong class="markup--strong markup--pre-strong">new </strong>ArrayList<BarEntry>();


                        <strong class="markup--strong markup--pre-strong">for </strong>(<strong class="markup--strong markup--pre-strong">int </strong>i = 0; i < <em class="markup--em markup--pre-em">dataIndikator</em>.size(); i++) {
                            DataItemJ554IndikatorByTipe x = <em class="markup--em markup--pre-em">dataIndikator</em>.get(i);
                            <strong class="markup--strong markup--pre-strong">float </strong>a12 = Float.<em class="markup--em markup--pre-em">parseFloat</em>(x.getJmlIndikator());
                            <strong class="markup--strong markup--pre-strong">int </strong>a22 = Integer.<em class="markup--em markup--pre-em">parseInt</em>(x.getId());
                            yVals.add(<strong class="markup--strong markup--pre-strong">new </strong>BarEntry(a12, i));
                        }


                        ArrayList<String> xVals = <strong class="markup--strong markup--pre-strong">new </strong>ArrayList<String>();
                        <strong class="markup--strong markup--pre-strong">for </strong>(<strong class="markup--strong markup--pre-strong">int </strong>i = 0; i < <em class="markup--em markup--pre-em">dataIndikator</em>.size(); i++) {
                            DataItemJ554IndikatorByTipe x = <em class="markup--em markup--pre-em">dataIndikator</em>.get(i);
                            <strong class="markup--strong markup--pre-strong">float </strong>a12 = Float.<em class="markup--em markup--pre-em">parseFloat</em>(x.getJmlIndikator());
                            String a22 = x.getThIndikator();

                        }

                        BarDataSet dataSet = <strong class="markup--strong markup--pre-strong">new </strong>BarDataSet(yVals, <em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        dataSet.setColors(ColorTemplate.<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">COLORFUL_COLORS</em></strong>);

                        BarData data = <strong class="markup--strong markup--pre-strong">new </strong>BarData(xVals, dataSet);


                        LimitLine line = <strong class="markup--strong markup--pre-strong">new </strong>LimitLine(12f, <em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        line.setTextSize(12f);
                        line.setLineWidth(4f);
                        YAxis leftAxis = <strong class="markup--strong markup--pre-strong">chart</strong>.getAxisLeft();
                        leftAxis.addLimitLine(line);

                        <strong class="markup--strong markup--pre-strong">chart</strong>.setData(data);
                        <strong class="markup--strong markup--pre-strong">chart</strong>.setDescription(<em class="markup--em markup--pre-em">dataIndikator</em>.get(0).getTipeIndikator());
                        <strong class="markup--strong markup--pre-strong">chart</strong>.animateY(2000);


                    } <strong class="markup--strong markup--pre-strong">else </strong>{

                    }


                }

                @Override
                <strong class="markup--strong markup--pre-strong">public void </strong>onFailure(Call<RssJ544IndikatorByTipe> call, Throwable t) {

                }
            });

<em class="markup--em markup--pre-em">//
        </em>} <strong class="markup--strong markup--pre-strong">catch </strong>(Exception e) {
        }
    }


}

5. Jalankan aplikasi, dan lihat hasilnya :