TUTORIAL MEMBUAT GRAFIK DINAMIS DENGAN JAVASCRIPT CHART.JS

Hai selamat datang di kotak pelajar, semoga teman-teman sehat selalu ya, dan jangan lupa untuk tetap semangat belajar dan mengerjakan project nya yaa.

kali ini saya akan membagikan tutorial yang telah saya pelajari yaitu membuat chart dinamis menggunakan plugin javascript yaitu chart.js.

Grafik ini sangat membantu jika kita ingin menampilkan data secara visual yang menarik dan mudah dipahami di dalam aplikasi atau sistem informasi yang kita buat. Sehingga aplikasi kita bisa lebih menarik dengan animasi dan efek yang keren dari grafik ini.

Membuatnya pun tidaklah sulit dengan adanya plugin javascript chartjs, buat teman-teman yang belum tau apa itu chart.js. saya jelaskan sedikit dulu ya, Chart.js merupakan plugin javascript yang memudahkan kita dalam pembuatan suatu grafik dalam sebuah aplikasi atau website, jenis grafiknya pun banyak seperti grafik bar, line ,pie doughnut dll. Untuk detailnya teman-teman bisa kunjungi website resminya di http://www.chartjs.org

Sebelumnya kita persiapkan dulu amunisinya, teman-teman bisa download chart.js nya di https://github.com/chartjs/Chart.js/releases/tag/v2.7.2 atau bisa ambil dari yang sudah saya siapkan link berikut : Download.

Kalo sudah di download silahkan teman-teman extract dulu di dalam folder project teman-teman. Disini saya membuatnya menggunakan file html, tapi jika teman teman dengan format php pun bisa, jadi sesuai kebutuhan saja.

Untuk chart yang saya buat disini saya ada sedikit modifikasi,dimana di aplikasi ini saya buat data nilainya bisa langsung teman-teman input dan grafik yang tampil menjadi lebih dinamis.

Strukturnya saya buat dalam satu folder project, dan file style.css, script.js , chart.js nya saya dimpan kedalam folder assets. Seperti berikut :

Jadi yang kita buat yaitu :
1. index.html
2. style.css
3. script.js
Ketiga file tersebut yang dimana akan kita koneksikan ke file Chart.js.

Oke lansung saja, berikut script untuk file index.html




Saya jelaskan dulu ya,




Disni kita buat element <canvas></canvas> dengan id="PieChart", yang dimana akan kita gunakan sebagai penampil grafik yang kita buat, dan id sebagai identitas grafik. disini saya memberi nama dengan "PieChart", teman-teman bisa menggunakan nama lain sebagai identitasnya.




Kemudian kita buat element untuk menampung nilai dari inputan kita, dan kita buat beberapa class dan name sesuai dengan nama jenis inputannya sebagai identitasnya.



Dan jangan lupa kita koneksikan file index kita dengan file Chart.js dan script.js yang ada di dalam folder assets yang sudah kita buat. oia biasanya untuk pemanggilan script javascript saya simpan sebelum akhir tag </body>. jadi supaya nanti saat web kita dijalankan, yang pertama kali diproses oleh web browser adalah element htmlnya dulu, baru kemudian javascriptnya dijalankan.

Kemudian kita buat style.css nya agar tampilan web kita lebih menarik,




Next yang paling penting kita buat script.js nya sebagai handler yang menjalankannya.




Disini saya jelaskan sedikit :



Pertama kita buat variabel berdasarkan jenis inputannya dengan fungsi querySelector() yang mencari data di dalam document html dengan berdasarkan identitas name.



Kemudian, kita buat variable ctx yang dimana mencari identitas id="PieChart" didalam html.

tentukan type chart yang kita gunakan, disini saya menggunakan chart "doughnut", atau teman teman silahkan ubah sesuai kebutuhan.

kemudian variable updateChart Value digunakan untuk menangkap nilai inputan kita, kemudian mengupdatenya.

Berikut hasilnya :




Gimana keren kan hasilnya ?
 
Dan untuk video tutorialnya bisa lihat chanel youtube kotakpelajar :

Masih banyak jenis grafik yang bisa dibuat, silahkan teman-teman coba saja.

Silahkan lihat dokumentasi resminya di http://www.chartjs.org/docs/latest/

Sampai disini teman-teman telah berhasil membuat grafik menggunakan chart.js dengan inputan langsung ke tampilannya. Di tulisan berikutnya akan saya bahas cara menampilkan data dari database kita menggunakan php yang dikoneksikan ke database kita.

Sekian dulu pembahasan kali ini, semoga bisa membantu teman-teman dalam belajar atau mengerjakan project.

Terima kasih sudah mampir membaca tutorial pembuatan grafik menggunakan chart.js ini. Jika teman-teman suka dengan tutorial ini, silahkan share ke teman-teman lainnya, semoga bermanfaat.

Salam kotak pelajar.

Tertarik ? Silahkan download full source code nya lewat link dibawah ini:

Link Download1

Link Download 2