Tutorial kali ini kita akan belajar membuat grafik atau chart di kodular, dimana chart biasa dipakai untuk merepresentasikan suatu nilai atau hasil baik dalam bentuk diagram lingkaran, batang, garis ataupun bentuk-bentuk lainnya. Tujuan dari pembuatan chart yaitu untuk memudahkan pengguna dalam memvisualiasasi data agar lebih mudah dipahami.
Dalam menampilkan data pada aplikasi android, tidak hanya disajikan dalam bentuk list, ataupun tabel. Data bisa juga ditampilkan dalam bentuk chart atau grafik, ini berlaku apabila kita mengelola data dalam bentuk angka.
Misalkan kita mengelola data absen, data stok barang, data pendapatan, ataupun data-data yang berhubungan dengan angka lainnya. Dimana data-data tersebut akan digunakan untuk mengetahui perbedaan-perbedaan, ataupun naik turunnya nilai. Nah agar lebih mudah dipahami oleh pengguna, maka data tersebut dapat disajikan dalam bentuk chart atau grafik.
Pada kodular sendiri masih belum tersedia komponen utama untuk menampilkan data dalam bentuk chart. Oleh karena itu kita akan menggunakan bantuan extension untuk menampilkan chart.
extension tersebut adalah SimpleChartV2.aia . Extension tersebut dibuat oleh henry richard anggota community kodular dan juga seorang developer aplikasi.
Dengan bantuan extension tersebut kita dapat dengan mudah membuat chart dalam bentuk lingkaran, batang, atau garis, dimana kita sama sekali tidak menggunakan komponen webview untuk menampilkan chart tersebut.
Cara membuat grafik dan chart di kodular
Table of Contents
Pertama kita masuk terlebih dahulu ke kodular, setelah itu buat projek baru dan dan beri nama ChartTest. Setelah login jangan lupa untuk mendownload extension SimpleChartV2.aia yang akan kita gunakan. Jika sudah didownload langsung import ke project kodular yang sedang kita buat.
Untuk tahap tersebut saya harap kalian sudah paham bagaimana cara import extension ke kodular.
Buat design pada screen 1
untuk tutorial kali ini kita hanya akan menggunakan 1 screen saja. Jadi aplikasi yang akan dibuat bisa menampilkan berbagai macam data chart dalam satu tampilan. Adapaun design yang dibuat yaitu
dimana terdapat komponen Horizontal Arrangement, yang digunakan untuk membungkus 4 komponen Button yang terdiri dari button Pie Chart, Bar Graph, Line Graph, dan Clear. Masing-masing digunakan untuk mengenerate data chart kecuali tombol clear yang berfungsi untuk membersihkan atau mengosongkan layar.
Kemudian komponen selanjutnya adalah Vertical Arrangement yang digunakan sebagai tempat untuk menampilkan data chart.
Selanjutnya setelah membuat design adalah membuat blok program.
Blok program untuk membuat chart di kodular
karena disini akan menampilkan data chart dalam 3 tampilan yaitu Pie chart, Bar chart dan Line chart maka akan ada 3 fungsi blok program yang akan kita buat untuk menampilkan chart.
Blok program untuk membuat Pie chart atau grafik lingkaran
pada bagian value colors digunakan untuk memberikan warna pada setiap grup nilai-nilai yang akan ditampilkan. Sayangnya untuk warna kamu hanya bisa menggunakan warna yang sudah disediakan oleh kodular, jadi kamu tidak bisa membuat warna sendiri dengan komponen color.
Selanjutnya pada bagian subtitle colors digunakan untuk memberikan warna pada chart.
Lalu pada bagian value names digunakan untuk menampilkan tulisan pada setiap chart.
untuk animation duration adalah nilai yang bisa kita masukkan untuk menentukan berapa lama animasi tersebut berjalan. 1000 = 1 detik.
Blok program untuk membuat Bar chart atau grafik batang
bar colors digunakan untuk memberikan warna.
yAxisPoint dan xAxisPoint digunakan untuk menampilkan nilai angka, Y untuk nilai keatas dan X untuk nilai kesamping.
legends digunakan untuk menampilkan penjelasan dari setiap data di chart.
Blok program untuk membuat Line chart atau grafik garis
line colors digunakan untuk memberika warna.
yAxisPoint dan xAxisPoint sama seperti bar chart.
Blok program untuk button clear
button clear digunakan untuk mereset tampilan atau membersihkan chart yang sebelumnya ditampilkan.
Untuk menampilkan datanya pastikan kamu membuatnya dalam bentuk list, seperti pada contoh gambar-gambar diatas
tambahan
Setelah selesai proses pembuatan blok program, selanjutnya adalah
Build project kedalam bentuk aplikasi
Build project yang sudah kita buat, agar kita dapat mengetahui hasil dari aplikasi yang sedang kita buat apakah berfungsi dengan baik atau tidak.
Berikut di bawah ini adalah hasil dari aplikasi yang dibuat pada tutorial kali ini