Praktikum Membangun Grafik Berbasis Highcharts

Pada praktikum kali ini kita akan mencoba untuk membuat grafik berbasis plugin Highchart pada aplikasi Android berbasis Hybrid. Grafik yang dibangun
didasarkan pada pengolahan data yang dihasilkan oleh API melalui Data Retrieve. Skenarionya adalah kita akan membuat grafik yang menghitung jumlah
transaksi yang ada pada database terutama tabel orders dengan ketentuan berikut ini
• API yang digunakan adalah API yang dibangun pada praktikum ke 9.
• API yang digunakan adalah api2.php dengan sedikit modifikasi.
• Tabel yang dibaca adalah tabel orders.
• Grafik yang dihasilkan berjumlah 2 buah. Grafik pertama adalah grafik penjualan berdasarkan hari dalam sebuah periode 1 bulan. Sedangkan grafik kedua
adalah grafik penjualan berdasarkan bulan dalam periode 1 tahun
Jika kebutuhan telah dipenuhi dan skenario telah dipahami, maka kita bisa mulai praktikumnya.
1. Langkah pertama adalah mendapatkan plugin Highcharts. Highchart adalah sebuah plugin javascript yang menangani tentang grafik atau infografis.
Silahkan download di https://www.highcharts.com/blog/download/
2. Langkah berikutnya adalah mempelajari dokumentasi penggunaan Highcharts yang ada di https://www.highcharts.com/docs/
3. Setelah berhasil mempelajari penggunaan plugin Highcharts, maka langkah berikutnya adalah mengcopy file engine dari Highcharts ke dalam aplikasi yang
kita bangun. Saat download plugin Highcharts, kita akan mendapatkan file dengan ekstensi zip. Silahkan extract file tersebut kemudian copy file yang
bernama highcharts.js yang ada di dalam folder code ke folder js yang ada dalam project kita.
4. Langkah berikutnya adalah menambahkan pemanggilan file highcharts.js tersebut ke file index.html. Letakkan sejajar dengan pemanggilan file Javascript
lainnya seperti syntax berikut

5. Langkah berikutnya adalah memodifikasi file view apipublic.html. Sesuai skenario, grafik pertama akan ditempatkan di view ini. Grafik ini akan digenerate
ketika kita menekan tombol cari (pemicu yang sama dengan pencarian data penjualan). Silahkan modifikasi div class page-content view apipublic.html
menjadi seperti berikut
6. Langkah berikutnya adalah memodifikasi function apipublic yang ada di file index.html. Modifikasi dilakukan untuk menyisipkan mekanisme untuk generate
data yang digunakan dalam grafik nantinya yang didasarkan dari data penjualan dalam 1 bulan sesuai dengan mekanisme pencariannya. Silahkan modifikasi
function tersebut sesuai gambar berikut (url API sesuaikan dengan milik masing-masing)
7. Langkah berikutnya adalah membuat function grafikq di file index.html sejajar dengan function javascript lainnya. Function ini digunakan untuk generate
grafik pada sebuah div tertentu yang didasarkan pada data yang dihasilkan pada langkah sebelumnya. Berikut syntax functionnya
8. Silahkan diuji coba untuk mekanisme grafik pertama sesuai gambar berikut

9. Langkah berikutnya adalah memodifikasi file api2.php yang ada di server online. Modifikasi dilakukan dengan menambahkan sebuah fungsi untuk men-
generate data grafik penjualan pertahun. Silahkan modifikasi api2.php sesuai syntax berikut
10. Langkah berikutnya adalah membuat view yang bernama grafik.html. View ini digunakan untuk me-realisasikan grafik kedua sesuai skenario yang telah
dijelaskan sebelumnya. Grafik yang dihasilkan adalah grafik penjualan pertahun yang didasarkan jumlah penjualan perbulan. Berikut syntaxnya
11. Langkah berikutnya mengatur routing untuk view grafik.html. Pengaturan routingnya sebagai berikut

12. Langkah berikutnya adalah membuat function yang berperan sebagai Client Handler yang dihubungkan dengan api2.php pada fungsi grafik_tahun.
Function tersebut bernama apigrafik. Tempatkan function ini pada file index.html dan sejajar dengan function javascript lainnya. Syntaxnya sebagai berikut
(url API sesuaikan dengan milik masing-masing)
13. Langkah berikutnya adalah membuat function yang digunakan untuk generate grafik yang didasarkan dari Data Retrieve yang dihasilkan oleh function
apigrafik. Grafik hasil generate akan ditempatkan pada view grafik.html. Function tersebut bernama grafiktahunan. Function ini ditempatkan pada file
index.html dan sejajar dengan function javascript lainnya. Syntaxnya sebagai berikut
14. Langkah berikutnya adalah membuat sebuah tombol yang digunakan untuk menjalankan function apigrafik. Tombol ini bernama Grafik By Tahun yang
diletakkan sesuai gambar berikut dan berikut pula syntax yang digunakan untuk membuatnya
15. Langkah berikutnya silahkan diuji fitur grafik penjualan tahunan ini sesuai gambar berikut
16. Silahkan diperiksa keseluruhan dari fitur yang telah dikembangkan dan jangan build project ini menjadi apk.