Chart atau grafik sangat penting dalam memvisualisasikan suatu data, dengan chart informasi yang kompleks dapat disajikan dalam format data yang ringkas dan informatif, sehingga lebih mudah dipahami oleh pengguna, dan dengan Chart ini memungkinkan kita dengan mudah dalam memantau data kita.

Pada Tutorial kali ini kita akan membuat chart yang dinamis dengan PHP, chart.js dan Mysql sebagai sumber datanya sehingga chart yang kita buat dinamis dan update apabila ada perubahan data di database Mysql-nya.

Keunggulan Menggunakan chart.js dengan PHP dan Mysql

Chart.js adalah sebuah pustaka atau library JavaScript yang fleksibel untuk membuat grafik interaktif di halaman web. Keunggulan penggunaan Chart.js dengan PHP dan MySQL terletak pada kemampuannya untuk menyajikan data dari database (MySQL) secara dinamis ke dalam grafik atau chart yang menarik dan informatif di halaman web yang dikembangkan dengan bahasa pemograman PHP. Beberapa keunggulan dari penggunaan Chart.js, PHP dan MySQL dalam membuat chart :

1. Kemudahan Integrasi

Chart.js mudah diintegrasikan dengan PHP dan MySQL karena dapat menerima data dari sumber apapun yang menyediakan data dalam format yang sesuai.

2. Interaktivitas dan Customisasi

Memungkinkan interaksi pengguna dengan chart, pengguna dapat melakukan zoom, filter, atau memperoleh detail tambahan saat berinteraksi dengan chart.
Memiliki banyak opsi konfigurasi dan kemampuan untuk menyesuaikan tampilan chart sesuai kebutuhan aplikasi.

3. Kemampuan Visualisasi Data

Mampu menyajikan data yang berasal dari MySQL dengan berbagai jenis chart, seperti bar chart, line chart, pie chart, dan lainnya.
Memfasilitasi pemetaan data dalam chart yang mudah dipahami, membantu pengguna untuk menganalisis data dengan lebih baik.

4. Dinamis dan Responsif

Dapat diperbarui secara dinamis dengan data baru dari MySQL, sehingga chart bisa menyesuaikan diri dengan perubahan data tanpa perlu reload halaman.
Responsif terhadap perangkat yang berbeda, termasuk perangkat mobile, sehingga chart tetap terlihat baik di berbagai layar.

5. Penggunaan Sederhana

Chart.js memiliki dokumentasi yang baik dan API yang mudah digunakan, membuatnya cocok untuk pengguna PHP yang ingin menyajikan data dari MySQL ke dalam bentuk chart dengan sedikit kode.

6. Kinerja yang Baik

Kinerja yang cepat dan ringan, membantu dalam memuat dan menampilkan chart dengan efisien pada halaman web.

7. Open Source dan Komunitas yang Besar

Chart.js bersifat open-source atau gratis, memiliki komunitas pengembang yang besar yang terus mendukungnya dengan pembaruan dan peningkatan fitur.

Dengan memanfaatkan Chart.js dalam pengembangan web menggunakan PHP dan MySQL, pengembang dapat dengan mudah membuat visualisasi data yang menarik dan interaktif, serta menyampaikan informasi dari database secara efisien kepada pengguna.

Contoh Pembuatan Chart dengan Chart.js, PHP dan Mysql

Disini saya menggunkan Xampp dan Vscode

Pembuatan database : CREATE DATABASE chart;
Pembutan table buying : CREATE TABLE `buying` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`date` date NOT NULL,
`total` double NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4
Memasukan data baru ke table buying : INSERT INTO `buying` (`id`, `date`, `total`) VALUES (NULL, ‘2023-11-01’, ‘1000’), (NULL, ‘2023-11-02’, ‘2000’), (NULL, ‘2023-11-03’, ‘3000’);

Bentuk struktur databasenya seperti diatas

4. Pembuatan folder chart di folder Htdocs, struktur foldernya seperti dibawah ini:

5. Pembuatan file config.php yang berguna untuk konfigurasi koneksi kedatabase

<?php

$server = "localhost";
$user = "root";
$pass = "";
$database = "chart";
 
$conn = mysqli_connect($server, $user, $pass, $database);
 
if (!$conn) {
    die("<script>alert('Can't connect to database')</script>");
}

?>

6. Pembuatan file index.php

<?php
include_once 'config.php';
?>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>

<?php
$result = mysqli_query($conn, "SELECT date, total from `buying` where MONTH(date)=11 ORDER BY date ASC");
while($produk_data = mysqli_fetch_array($result)) {
$totalbeli[] = $produk_data['total'];
$tglbeli[]=$produk_data['date'];
//echo json_encode($tglbeli);
// echo json_encode($totalbeli);
}
?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($tglbeli); ?>,
datasets: [{
label: 'Jumlah Pasien',
data: <?php echo json_encode($totalbeli); ?>,
backgroundColor: [
'rgba(255, 99, 71, 1)',
'rgba(9, 31, 242, 0.8)',
'rgba(255, 128, 6, 0.8)'
],
borderColor: [
'rgba(255, 99, 71, 1)',
'rgba(9, 31, 242, 0.8)',
'rgba(255, 128, 6, 0.8)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

jika dijalankan projectnya akan tampil seperti gambar dibawah ini

NOTE :

Untuk bentuk chartnya ada 4 bentuk yaitu line, doughnut, pie dan bar, kita hanya perlu merubah type: ‘line’, menjadi type: ‘doughnut’ atau menjadi type: ‘bar’ atau type: ‘pie’ untuk penulisannya harus huruf kecil semuanya. untuk hasilnya bisa dilihat di gambar dibawah ini

Demikian tutorial membuat chart dengan chart.js, php dan mysql, semoga bermanfaat

Membuat Chart dengan PHP, MySql dan chart.js