-->
Home
code
php

Cara Membuat Grafik Dari Database Dan PHP Dengan ChartJS

chart js

Cara Membuat Grafik Dari Database MYSQL Dan PHP Menggunakan ChartJS  

Untuk website yang memiliki banyak data pastinya di asing lagi jika menggunakan grafik untuk menunjukan berapa banyak data yang telah tersimpan, selain itu juga untuk mempercantik tampilan dari website.

Dalam artikel ini saya akan memberikan sedikit tutorial bagaimana cara untuk menampilkan data didalam database ke dalam ChartJS. Pada artikel ini juga saya menggunakan bootstrap untuk tampilan table (sebagai contoh data).

Installasi ChartJS.

Pada artikel ini saya menggunakan CDN dari ChartJs tersebut, caranya cukup mudah, kamu tinggal akses website ChartJs > Get Started > Getting Started > Installation. Dihalaman tersebut ChartJs menyediakan berabagai cara untuk installasi, menggunakan npm, jsdelivr, cdn, dan github. atau kamu klik link tersebut untuk mengakses chartjs/cdn. 

Kemudian copy dan tempelkan di bagian bawah sebelum tag </body>.

Import CDN ChartJS

Membuat Koneksi Database.

Koneksi Database

Menampilkan Grafik ChartJS

Dikesempatan ini saya menggunakan grafik type PIE, untuk codenya kita bisa lihat dokumentasi dari web ChartJS. Sebelum itu lebih enaknya kita sisiapkan tag html di bawah tag <body> 

Canvas ChartJs

Kemudian kita kembali lagi ke website ChartJs, pilih Chart Types > Doughnut and Pie Chart > pilih yang Pie, lalu copy semua code config dan setupnya dan paste dibagian bawah script kamu.

Sampai sini apakah grafiknya sudah muncul? Ya belum, karna kita belum membuat fungsi untuk menampilkan grafiknya, caranya cukup mudah, buat variabel baru setelah const config

Const MyChart

Nah setelah itu grafik dapat tampil, lalu bagaimana menampilkan data dari database kedalam chartJs? Selanjutnya kita akan melakukanya.

Menampilkan Data Kedalam Grafik ChartJS

Pertama pastinya kita memiliki data, kebetulan di artikel saat ini saya menggunakan data dari database yang sudah ada, data tersebut terdiri dari nama dan gender, dimana pada gender memiliki 2 bagian yaitu 'Female' dan 'Male'. Selanjutnya kita lihat kembali dibagian script yang kita sisipkan tadi, dibagian datasets, terdapat object data yang didalamnya array, hapus saja data array tersebut dan kita ganti dengan script php dan query sql. Codenya menjadi seperti gambar di bawah.

Penambahan Query Sql

Bagian variabel resF menggunakan fungsi num_rows atau mysqli_num_rows() untuk mengetahui jumlah record yang ada dalam database. Jadi pada query diatas kita hanya memilih field gender dari tabel author yang dimana gendernya itu female/male lalu ditampilkan sebagai bentuk jumlah. Semoga ngarti dah wwkkw.

Hasil Akhir 


Post a Comment