Sunday, July 1, 2018

Simple Bar Chart Android Use MPAndroidChart Library

Hallo Guys, kali ini saya akan membahas tentang cara membuat Bar Chart menggunakan
MPAndroidChart library. Mengapa saya memilih ini? karena cara menggunakannya mudah, dan dokumentasi lengkap nanti saya akan sertakan link github nya. Pasti sudah penasarankan seperti apa tampilannya? hehehehhe. Baik kita akan langsung mulai saja.

Pertama - tama , seperti biasa buka android studio dan pilih new Project seperti gambar
di bawah ini :

Jika kita sudah membuat project baru , kita melakukan install library terlebih dahulu dengan penambahan script . pertama pada bagian build.gradle (project) dibaris 18 - 20 , kedua pada bagian build.gradle di baris 28 (app). Masing-masing bisa di lihat pada gambar di bawah ini.

Build.gradle (Project)
Build.gradle (App)

Jika sudah kita lanjut mendesain layout androidnya dengan path nya app/layout/res , kemudian ikuti desain layoutnya seperti gambar di bawah ini.

activity_main.xml (App)

Jika kita lihat seperti gambar diatas, ada atribut layout dengan nama com.github.mikephil.charting.charts.BarChart, artinya yang kita lakukan saat install library telahberhasil serta atribut ini yang memegang peranan dalam membuat tampilan chart/grafik pada android nanti.

Jika kita sudah melakukan pengaturan layout pada android , kita langsung melakukan pengaturan pada bagian java nya, kita mulai dengan path-nya app/java/MainActivity.java, kalian bisa ikuti javanya seperti gambar di bawah ini.
MainActivity.java

Jika sudah , kita bahas satu per satu bagian dari code yang ada , berikut penjelasannya.

Detail Kode Bag 1

Pada baris ke 19 , kita mulai mendifinisikan Bar Chart  dengan membuat objek bar chart , lalu melakukan inisialisai terlebih dahulu.


Detail Kode Bag 2

Pada Baris ke 21 - 27 , kita membuat collection data dengan melakukan pengisian data pada BarEntry, fungsi BarEntry ada dua parameter , parameter pertama untuk isi nilai axis y, parameter kedua untuk pengaturan kolom setiap data, makanya di mulai dari nilai 0 terlebih dahulu.

Pada baris ke  28 , kita melakukan set data pada BarSetData, ini untuk menyimpan data yang sudah kita buat dalam collection java.

Detail Kode Bag 3

Pada Baris 30 - 36 , kita membuat collection data untuk nilai axis x, tidak terlalu seribet dengan collection data pada nilai axis y.

Detail Kode Bag 4

Pada Baris 38, disini kita memsaukan nilai axis x dengan nilai axis y dengan memanggil Bar Data.

Pada Baris 39, kita memasukan semua data yang sudah kita buat kedalam diagram/chart dengan memanggil kembali objek barChart yang kita buat lalu kita melakukan setData pada BarData.

Nah , teman - teman , jika semua sudah selesai , kita lakukan "run" aplikasi android yang kita buat maka akan muncul seperti gambar di bawah ini.

Bar Chart

Nah sangat mudah kan membuat grafiik di android ?  semoga ini bermanfaat ya teman - teman :) .

Referensi :
  • https://github.com/PhilJay/MPAndroidChart/wiki/Setting-Data
  • https://github.com/PhilJay/MPAndroidChart 

No comments:

Post a Comment