BAB 10 – GrafikPemrograman Perangkat MobileTeknik Informatika-Program Teknologi Informasi dan Ilmu KomputerUniversitas Brawijaya

(1)

Eriq Muhammad A. J., ST., M.Kom., Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

BAB 10 – Grafik

Pemrograman Perangkat Mobile

Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

Universitas Brawijaya

Eriq Muhammad A. J., ST., M.Kom., Widhy Hayuhardhika, S.Kom

(2)

1 Pendahuluan

Membuat Grafik pada aplikasi Android bisa dilakukan dengan menggunakan modul atau library tambahan.

Pada bab ini akan dibahas bagaimana menampilkan grafik pada aplikasi android dengan menggunakan library AChartEngine

Tujuan Instruksional Khusus

Penguasaan materi dalam modul ini, akan dapat

1. Menguasai pembuatan grafik pada aplikasi android menggunakan library AChartEngine

Daftar Materi

1. PENDAHULUAN

1.1 Definisi library AChartEngine 2. MEMBUAT CHART

2.1 Menambahkan library ke Project 2.2 Menyiapkan Activity dan Data 2.3 Menyiapkan Data

2.4 Inisialisasi dan Konfigurasi grafik 2.5 Konfigurasi Bentuk Grafik

3. LATIHAN / SOAL / KUIS / PROJEK

(3)

1.1 Stream

AchartEngine merupakan library yang digunakan untuk membuat tampilan grafik pada aplikasi Android.

Beberapa type grafik yang disediakan yakni:

 line chart

 area chart

 scatter chart

 time chart

 bar chart

 pie chart

 bubble chart

 doughnut chart

 range (high-low) bar chart

 dial chart / gauge

 combined (any combination of line, cubic line, scatter, bar, range bar, bubble) chart

 cubic line chart

Semua type chart bisa menampung banyak seri data, misalnya grafik untuk perbandingan perkembangan produk. Karena perbandingan, tentunya ada banyak produk yang dibandingkan tidak cuma satu

2 Membuat Chart

2.1 Menambahkan Library ke Project

Untuk membuat grafik, perlu diimport library AChartEngine ke dalam project kita. Untuk itu, download

librarynya terlebih dahulu. Librarynya dapat di download di:

http://code.google.com/p/achartengine/downloads/list.

Setelah library dicopy kan ke dalam direktory project, import library tersebut ke dalam project. Caranya:

klik kanan pada project > kemudian pilih Properties.

Kemudian pada bagian Java Build Path, pilih tab Libraries, kemudian pilih button Add JARs untuk menambahkan file Jar dari library AChartEngine tersebut.

Eriq Muhammad A. J., ST., M.Kom., Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

(4)

2.2 Menyiapkan Activity dan Data.

Sebelum kita menyiapkan data, kita perlu mengetahui bahwa sebuah grafik yang menggunakan library AChartEngine ini tidak membutuhkan layout satu-pun dalam pembuatan grafiknya. Sehingga kita tidak perlu repot-repot untuk membuat layout untuk masing-masing grafik. Kecuali kalau nanti grafiknya akan kita buat sebagai sebuah widget baru pada layout

Untuk itu, kita perlu mengubah kelas SimpleChartActivity dengan mengubah baris yang me-load layout main.xml.

...

public class SimpleChartActivity extends Activity { /** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

// setContentView(R.layout.main);

} }

2.3 Menyiapkan Data.

Sebuah grafik biasanya digunakan untuk merepresentasikan data ke dalam bentuk visual untuk menunjukkan perbedaannya dengan data lainnya dan memiliki sangat sedikit text. Dan tentunya, sebuah grafik memiliki banyak data yang direpresentasikan ke dalam bentuk grafik. Sehingga, jika direpresentasikan ke dalam bentuk program, maka data-data ini biasanya berupa array data.

Kembali ke SimpleChartActivity, kita perlu menyiapkan data untuk chart dalam bentuk array double (agar bisa menampung pecahan).

...

@Override

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

String judulGraf = "nilai";

Double[] nilai = { 7.6, 4.5, 6.0, 7.8 };

(5)

2.4 Inisialisasi dan Konfigurasi Grafik.

Untuk dapat menggunakan grafik, kita harus membuat sebuah objek untuk merender grafik dari kelas XYMultipleSeriesRenderer, kemudian dikonfigurasi agar terlihat lebih menarik.

...

XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();

// konfigurasi grafik

renderer.setChartTitle("Grafik Nilai Ujian");

renderer.setXTitle("Ujian Ke-");

renderer.setYTitle("Nilai");

renderer.setYLabels(10);

renderer.setXAxisMax(5);

renderer.setXAxisMin(0.5);

renderer.setYAxisMax(10);

renderer.setYAxisMin(0);

renderer.setBarSpacing(0.2);

renderer.setZoomRate(1);

Keterangan: Tambahkan baris ini setelah baris untuk menyiapkan data di atas di dalam methode onCreate.

 renderer.setChartTitle(“Grafik Nilai Ujian”); Untukmenentukan judul grafik.

 renderer.setXTitle(“Ujian Ke-”); Untuk memberikan nama sumbu X dengan nama “Ujian Ke-”.

 renderer.setYTitle(“Nilai”); Untuk memberikan nama sumbu Y dengan nama “Nilai”.

 renderer.setYLabels(10); Menentukan jumlah item nilai pada subu Y yang tampil sebanyak 10 item.

 renderer.setXAxisMax(5); Menentukan nilai maksimum untuk sumbu X pada satu layar.

 renderer.setXAxisMin(0.5); Menentukan nilai minimum untuk sumbu X pada layar (sehingga akan dimulai dari 0.5 sampai dengan 5).

 renderer.setYAxisMax(10); Menentukan nilai maksimum untuk sumbu Y pada sayu layar.

 renderer.setYAxisMin(0); Menentukan nilai minimum untuk sumbu Y pada sayu layar.

 renderer.setBarSpacing(0.2); Menentukan jarak antar bar dari nilai satu dengan nilai lainnya sebesar 0.2.

 renderer.setZoomRate(1); Mengatur agar zoom rate ke 1 (zoom 100%).

2.5 Konfigurasi Bentuk Grafik (Bar, Line atau lainnya)

Selanjutnya, kita harus menentukan bentuk grafik yang akan kita buat. Pada contoh kali ini, kita akan membuat grafik Bar, sehingga kita harus menyiapkan pe-render series yang bertype XYSeriesRenderer (pada beberapa jenis grafik lain, akan menggunakan pe-render yang berbeda juga).

...

XYSeriesRenderer r = new XYSeriesRenderer();

r.setColor(Color.GREEN);

r.setDisplayChartValues(true);

renderer.addSeriesRenderer(r);

(6)

Keterangan:

 r.setColor(Color.GREEN); Mengatur warna bar menjadi berwarna hijau.

 r.setDisplayChartValues(true); Mengatur agar nilai bar ditampilkan.

 renderer.addSeriesRenderer(r); Menambahkan sebuah seri perender ke objek renderer.

2.6 Membuat Dataset

Dataset, digunakan untuk mengubah data yang tadinya berbentuk array ke dalam sebuah set data yang akan ditampilkan pada grafik. Berikut kodenya:

...

XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();

CategorySeries s = new CategorySeries(judulGraf);

for(Double n : nilai) { s.add(n);

}

dataset.addSeries(s.toXYSeries());

Keterangan:

 CategorySeries s = new CategorySeries(judulGraf); Membuat sebuah seri data, dan diberi nama sesuai dengan isi variabel judulGraf yakni “nilai”.

Menambahkan data nilai satu-persatu ke dalam seri, kemudian seri data yang telah diberi data ditambahkan ke dataset (Sebuah dataset, bisa memiliki banyak seri, namun masing-masing seri nanti akan direpresentasikan dengan satu buah bar graf dan perlu di konfigurasi perender serinya -lih poin 3).

(7)

4. PROJECT

Buat aplikasi yang menggunakan Android untuk menampilkan beberapa jenis grafik menggunakan library Achartengine

Kombinasikan dengan penggunaan database SQLite

REFERENSI

Yudhi , Wibisono .2011. Pengantar Mobile Programming dengan Android, UPI.

Safaat, H. Nazruddin. 2011. ANDROID Pemrograman Aplikasi Mobile Smartphone dan Tablet PC Berbasis Android, Penerbit Informatika.