Don’t say NO Before you Try it !
Kali ini aku ingin share wacana pengalaman aku menciptakan aplikasi android “mengambil data dari database dan lalu menampilkan di barchart android” . Saya rasa ini cukup sulit alasannya di beberapa tutorial website, stack overflow, developer android group, youtube jarang yang bahas detail untuk kasus menyerupai ini. Saya coba tanya ke beberapa komunitas android dan teman, tapi cukup sulit untuk mendapatkannya 😀
Akhirnya aku menemukan satu buah link di stack overflow, gak rinci sih tapi ngasih inti penyelesaiannya. #ayee 😀
Link nya sanggup di saluran disini !
Sekarang, aku akan memperlihatkan step by step bagaimana menciptakan barchart dan mengambil data dari database :
1. Terlebih dahulu, kita siapkan sebuah data JSON, menyerupai dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | { “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 sanggup dipakai yaitu PUT, GET, dan lain-lain
1 | implementation <strong class="markup--strong markup--pre-strong">'com.squareup.retrofit2:retrofit:2.3.0'</strong> |
- MPAndoidchart, so far this is awesome library :* Kita sanggup menciptakan banyak sekali macam jenis chart menyerupai barchart, Linechart, Radarchart dan lain-lain
1 | compile <strong class="markup--strong markup--pre-strong">'com.github.PhilJay:MPAndroidChart:v2.0.9'</strong> |
3. Pada serpihan desainnya, kita tambahkan kodingan menyerupai ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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;"> </span> |
4. Pada Activity, tambahkan kodingan untuk untuk get data json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <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 serpihan MainBarChart Acitivity :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <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 balasannya :
Demo :
Download project dari github
Last, I want to say Alhamdulillah and Don’t forget leave your feedback and comment 🙂
Thanks
Sumber aciknadzirah.blogspot.com
EmoticonEmoticon