tampilan grafik simplegis

Membuat Grafik Menggunakan CanvasJs

Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, biasanya sering kita temui di dalam aplikasi excel, word dll. Untuk menampilkan data di sebuah halaman website bisa digunakan sebuah plugin jquery, salah satunya adalah canvasJs.

Beberapa waktu sebelumnya telah kita buat sebuah aplikasi pemetaan dengan nama Simple Gis yang didalamnya terdapat data jalan dan juga data jembatan yang akan kita tampilkan grafiknya ke halaman depan dari aplikasi tersebut.

Sebelumnya download canvasJs, exstract dan copy paste file canvasjs.min.js ke dalam folder assets/js.

Bagi yang sudah membuat aplikasi Simple Gis silahkan buka dan edit file view/homepage.php dengan menambahkan script pada bagian bawah dari “<h1 class=”text-center”>Simple Gis</h1>” seperti berikut :

Biar tidak terjadi error edit juga file Home.php di folder controller.

Kemudian buka dengan mengakses http://localhost/simplegis sehingga tampak 2 buah tabel jalan dan jembatan.

homepage simplegis
homepage simple gis menampilkan data jalan dan jembatan

Untuk menampilkan grafik dari data di database kita akan menambahkan sebuah function loadgrafik dan function buatgrafik sehingga keseluruhan file homepage menjadi seperti berikut ini.

Dan juga untuk file controller Home.php tambahkan satu function yaitu function loaddata().

Hasil akhirnya akan tampak seperti berikut ini.

tampilan grafik simplegis
Tampilan grafik simplegis,

Terima kasih telah ikut mencoba membuat. 😀

One thought on “Membuat Grafik Menggunakan CanvasJs”

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.