Chart.js adalah sebuah library JavaScript yang digunakan untuk membuat grafik dan chart interaktif di halaman web. Ini adalah alat yang kuat dan fleksibel untuk visualisasi data, dan banyak digunakan oleh pengembang web untuk menyajikan data dalam bentuk grafik yang lebih mudah dimengerti dan atraktif bagi pengguna. Chart.js menyediakan berbagai jenis grafik, termasuk bar chart, line chart, pie chart, doughnut chart, radar chart, dan sebagainya. Berikut adalah beberapa kegunaan utama dari Chart.js:

• Visualisasi Data, Chart.js memungkinkan untuk mengubah data menjadi grafik yang dapat dengan mudah dimengerti. Ini membantu dalam menyajikan data yang kompleks dalam bentuk yang lebih terstruktur dan visual.
• Interaktivitas, dapat membuat grafik yang interaktif dengan mudah menggunakan Chart.js. Pengguna dapat berinteraksi dengan grafik, seperti menggulir, memperbesar, atau mengeklik elemen-elemen tertentu untuk mendapatkan informasi lebih lanjut.
• Kustomisasi, dapat menyesuaikan tampilan grafik sesuai dengan kebutuhan. Chart.js mendukung berbagai opsi kustomisasi, termasuk mengubah warna, mengatur sumbu, menambahkan label, dan masih banyak lagi.
• Responsif, Grafik yang dibuat dengan Chart.js secara otomatis dapat menyesuaikan diri dengan ukuran layar atau jendela peramban, sehingga grafik tetap terlihat baik pada perangkat yang berbeda.
• Kompatibilitas Silang, Chart.js kompatibel dengan berbagai peramban web utama, termasuk Chrome, Firefox, Safari, dan Edge. Ini memastikan bahwa grafik dapat diakses oleh sebanyak mungkin pengguna.
• Sumber Terbuka, Chart.js adalah perangkat lunak sumber terbuka, yang berarti dapat menggunakannya tanpa biaya dan mengakses kode sumbernya untuk menyesuaikan sesuai kebutuhan.
• Integrasi dengan Framework Web, Chart.js dapat diintegrasikan dengan berbagai kerangka kerja web populer seperti Angular, React, dan Vue.js.

Langkah-langkah pembuatannya

• Persiapan Awal

Sebelum memulai, pastikan telah menginstal Laravel dan membuat proyeknya. Juga perlu menambahkan Chart.js ke proyek melalui CDN dengan menambahkan kode berikut dalam file blade, biasanya di bagian head atau body:

• Membuat grafik dasar

Pertama-tama, mari kita lihat bagaimana membuat grafik dasar dengan Chart.js. Di dalam file blade, tambahkan elemen canvas tempat kita akan menampilkan grafik:

• Membuat kelas Chart

Untuk menjadikan kode lebih terstruktur, dapat membuat kelas JavaScript yang menangani logika Chart.js. Ini memungkinkan untuk dengan mudah mengatur berbagai jenis grafik. Buat file JavaScript baru di dalam folder asset (misalnya, sample-chart.js):

Lalu script di body ubah menjadi:

• Membuat berbagai jenis grafik

Juga dapat membuat berbagai jenis grafik dalam satu halaman dengan mudah. Misalnya, kita akan menambahkan grafik pie. Tambahkan elemen canvas baru dalam file blade:

Kemudian, perbarui kelas JavaScript untuk menangani grafik pie:

• Mengambil data dummy controller

Untuk menggunakan data yang lebih dinamis dalam grafik, dapat mengambilnya dari controller. Misalnya, dalam contoh ini, kita akan menggunakan data yang dikirimkan dari controller ke tampilan blade. Pertama, dalam controller, siapkan data yang ingin digunakan dalam grafik:

Di dalam file blade, perlu mengkonversi data ini ke format JavaScript dengan menggunakan @json. Juga perlu menambahkan script untuk mengambil data ini dan memasukkannya ke dalam grafik:

Kemudian, dalam kelas JavaScript, dapat mengambil data ini dan menggunakannya dalam grafik:

• Mengambil data dari database

Terakhir, bagaimana mengambil data dari database Laravel dan menggunakannya dalam grafik. Perlu mengambil data dari database dalam controller dan mengirimkannya ke tampilan. Misalnya, memiliki tiga tabel terkait: User, Elections, dan Votings. Ingin menghitung jumlah suara yang setiap pemilihan terima dan menampilkannya dalam grafik. Dapat melakukan ini dengan query database seperti berikut:

• Mengambil data dari database dengan eloquent

Juga dapat melakukan hal serupa dengan menggunakan Eloquent ORM. Pastikan telah membuat model untuk setiap tabel dan mendefinisikan hubungan antara mereka. Dalam model Election, bisa menambahkan hubungan votes:

Lalu di controller nya:

Tampilan akhirnya: