Tutorial PHP MySQL, Menampilkan Data Grafik Menggunakan ChartJS

November 24, 2017 / Diposting Oleh TondanoWeb.com / Tutorial


Beberapa waktu lalu admin mengerjakan sebuah proyek pembuatan aplikasi web, nah dalam aplikasi web tersebut terdapat modul untuk menampilkan laporan dalam bentuk grafik, sempat bingung memilih plugin grafik apa yang akan digunakan, setelah coba sana-sini akhirnya ketemu salah satu plugin grafik namanya ChartJS, ada banyak plugin-plugin javascript untuk membuat grafik tapi admin memilih untuk menggunakan plugin ini saja.

Alasanya selain tampilanya simple, mudah digunakan serta dokumentasinya lengkap sangat mudah dimengerti, cocok untuk menampilkan data statis dan juga bisa menampilkan data dinamis yang datanya diambil dari database yang tiap saat atau realtime berubah-ubah.






Cukup untuk Intro nya :), saat ini kita langsung saja.

Langkah pertama sobat download dahulu library  ChartJS di website resminya http://www.chartjs.org/  kita juga bisa menggunakan library  ChartJS yang ada di CDN silahkan sobat cek disini https://cdnjs.com/libraries/Chart.js.

Untuk tutorial ini menggunakan librari yang berada di CDN.

 

Langkah selanjutnya sobat  masuk ke dalam direktori localhost dan buat satu buah file dan beri nama grafik.php, kemudian pastekan script dibawah ini.

Pada script HTML diatas sudah berisi tag <canvas id=”myChart” class=”chart”></canvas> tag canvas ini yang nantinya akan menampilkan grafik  ChartJS.

Jangan lupa juga untuk menambahkan link library javascript  ChartJS  di dalam tag <head> untuk tutorial ini admin menggunakan library yang ada di CDN https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js atau jika sobat sudah mendownload library tersebut silahkan menyesuaikan dengan link/path yang berada di direktori laptop/komputer sobat.

 

Langkah selanjutnya kita akan menampilkan contoh tampilan grafiknya, pastekan script dibawah ini didalam tag <body>

 

Untuk source kode lengkapnya silahkan menyesuaikan seperti dibawah ini.

 

Coba sobat panggil file grafik.php tadi di browser sobat. Jika tampilannya sudah seperti dibawah ini berarti sobat berhasil menampilkan tampilan grafik  ChartJS.

 

Setelah langkah-langkah percobaan diatas selesai selanjutnya kita akan menampilkan data yang ada di database ke dalam grafik  ChartJS.

Sobat buat sebuah database kemudian buat struktur tabel seperti dibawah ini.

 

Selanjutnya kita akan menampilkan data pekerjaan yang ada di dalam database ke dalam tampilan grafik.

sobat buka lagi file grafik.php tadi dan sesuaikan isinya dengan script di bawah ini.

Jika tidak error hasilnya akan seperti dibawah ini.

ChartJs juga memiliki beberapa tampilan, seperti line, bar, radar, doughnut, pie, polar dan sebagainya, sobat bisa mengubahnya dengan merubah parameter  type: ‘JENIS_GRAFIK’, menyesuaikan dengan kebutuhan tampilan grafik yang sobat inginkan.

Kita juga bisa merubah background warna grafiknya dan lain-lain. Tutorial ini belum begitu terlalu lengkap masih banyak fitur-fitur menarik yang ada di ChartJS yang berlum diulas, sobat bisa langsung menuju ke halaman dokumentasinya disini http://www.chartjs.org/docs/latest/ untuk mempelajari fitur-fitur menarik yang ada di ChartJS.

Demikian untuk tutorial kali ini, jika sobat memiliki pertanyaan, kritik, saran, maupun masukkan silahkan sobat menuliskannya di kolom komentar dibawah atau menghubungi kami melalui halaman kontak. Terima kasih. 🙂

Baca Juga :


Tags: , , , , ,