Membuat grafik atau chart di kodular

Membuat grafik atau chart di kodular

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 ada 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

 Cara membuat grafik dan chart di kodular
 Buat design pada screen 1
 Blok program untuk membuat chart di kodular

 Blok program untuk membuat Pie chart atau grafik lingkaran
 Blok program untuk membuat Bar chart atau grafik batang
 Blok program untuk membuat Line chart atau grafik garis
 Blok program untuk button clear
 Build project kedalam bentuk aplikasi

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

design tampilan membuat chart

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



Blok program membuat pie chart

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



blok program membuat bar chart
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



blok program membuat line chart
line colors digunakan untuk memberika warna.
yAxisPoint dan xAxisPoint sama seperti bar chart.

Blok program untuk button clear

blok program 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.