Membuat Grafik Chart JS dengan PHP MySQL

Untuk kesempatan baik ini kita akan membahas tutorial tentang bagaimana cara membuat grafik chart js dengan php mysql atau membuat tampilan statistik suatu data berbasis web menggunakan script php dalam bentuk grafik batang. Sebagaimana kita ketahui bahwa membuat grafik dengan php tidak hanya selalu dalam bentuk chart batang, bisa juga berbentuk chart pie atau line chart. Nah, yang akan kita pelajari kali ini adalah membuat chart js dengan php yang datanya diambil dari database mysql, kemudian ditampilkan dalam bentuk grafik batang. Sebagai contoh adalah statistik data siswa yang ditampilkan dalam bentuk grafik data mahasiswa berdasarkan jumlah siswa di masing-masing jurusan.

Tutorial cara membuat grafik chart js dengan php mysql menggunakan plugin chartjs ini kami lakukan pada web server XAMPP ver 5.6 include database MySQL. Sebagai persiapan awal sebaiknya siapkan terlebih dulu web server tersebut dan download plugin chartjs langsung dari sumbernya. Sehingga tutorial membuat grafik dengan php ini dapat diikuti dengan benar dan lancar.

Berikut adalah langkah - langkah cara membuat grafik chart js dengan php mysql lengkap dengan source code query database untuk mengambil data yang akan ditampilkan data statistik nya.

Buat folder untuk tutorial dan database
Download plugin Chart.js
Membuat homepage atau index.
Coding javascript dan php untuk menampilkan grafik

Membuat Grafik Chart JS dengan PHP MySQL

Grafik Chart JS PHP

Membuat Grafik Chart JS dengan PHP MySQL

1. Membuat Folder Kusus Tutorial dan Database

Di dalam folder inilah nanti akan disimpan semua source terkait grafik atau chart ini seperi file index php, file koneksi database, dan plugin chartjs. Sebagai contoh nama folder nya adalah "chart-js", kemudian database tidak perlu kita bahas karena source database dapat di download pada akhir tutorial ini.

2. Download Chart.js Plugin

Download chart.js plugin dapat diperoleh langsung secara gratis di sumbernya yaitu GitHub Code, scroll ke halaman paling bawah sampe menemukan bagian "Assets" dan klik download pada assets Chart.js.zip. Pada saat tutorial membuat grafik chart js dengan php ini dibuat versi v2.7.2 adalah ketersediaan versi tertinggi. Simpan sebagai folder dengan nama "chartjs" di dalam folder direktori tutorial yaitu di folder "chart-js" pada langkah pertama.

3. Membuat Homepage atau Index

Di homepage inilah coding script php untuk menampilkan grafik chart js akan dibuat, karena di file ini data grafik akan diproses. Termasuk include koneksi database mysql, pemanggilan plugin chart.js dan query data ke database.

Simpan sebagai index.php

<html>
<head>
	<title>Tutorial Cara Membuat Grafik Chart JS dengan PHP MySQL</title>
	<script type="text/javascript" src="chartjs/Chart.js"></script>
	<style type="text/css">
		body{font-family: roboto;}
		table{margin: 0px auto;}
	</style>
</head>
<body>
	<h2 align="center">Cara Membuat Grafik Chart JS dengan PHP MySQL<br/>Raja Putra Media</h2>
	<?php 
		include "koneksi.php";
	?>
	<div style="width: 800px;margin: 0px auto;">
		<canvas id="myChart"></canvas>
	</div><br/><br/>
	<table border="1" cellpadding="4">
		<thead>
			<tr>
				<th>No</th>
				<th>Nama Mahasiswa</th>
				<th>Jurusan</th>
			</tr>
		</thead>
		<tbody>
			<?php 
				$no =0;
				$data = mysql_query("select * from tb_siswa");
				while($d=mysql_fetch_array($data)){
				$no++
			?>
			<tr>
				<td><?php echo $no; ?></td>
				<td><?php echo $d['nama']; ?></td>
				<td><?php echo $d['jurusan']; ?></td>
			</tr>
			<?php 
				}
			?>
		</tbody>
	</table>
</body>
</html>

NOTE: coding script php untuk menampilkan grafik chart js di file index.php di atas belum berjalan, masih ada kode javascript yang harus ditambahkan. Di buat parsial seperti ini tujuannya agar tutorial mudah dipahami saja.

Kembali ke tutorial cara membuat grafik chart js dengan php mysql ini dan berikut penjelasan nya. Perhatikan pada coding baris ke-4 ini <script type="text/javascript" src="chartjs/Chart.js"></script> adalah source untuk memanggil plugin chartjs. Kemudian baris ke-13 yaitu include "koneksi.php"; adalah untuk melakukan koneksi dengan database karena kita akan menampilkan grafik chart js yang datanya dinamis dari database. Selanjutnya pada baris ke-16 yaitu <canvas id="myChart"></canvas> di dalam tag id inilah grafik chart js akan ditampilkan.

4. Coding Javascript dan PHP untuk Menampilkan Grafik

Letak coding ini tetap berada di file index.php seperti pada langkah ke-3 di atas, hanya saja script ini di tambahkan di bagian bawah. Dapat dikatakan bahwa coding ini adalah embed PHP ke dalam javascript, PHP disini bertugas untuk mengambil data dari database, sedangkan Javascript bertugas membentuk grafik atau chart berdasarkan hasil data yang di ambil oleh PHP. Lebih jelasnya silahkan lihat langsung source code untuk membuat grafik chart js dengan php mysql di bawah ini;

	<script>
		var ctx = document.getElementById("myChart").getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'bar',
			data: {
				labels: ["Teknik Elektro", "Teknik Mesin", "Teknik Komputer", "Akuntansi"],
				datasets: [{
					label: '',
					data: [
					<?php 
					$jumlah_elektro = mysql_query("select * from tb_siswa where jurusan='Teknik Elektro'");
					echo mysql_num_rows($jumlah_elektro);
					?>, 
					<?php 
					$jumlah_mesin = mysql_query("select * from tb_siswa where jurusan='Teknik Mesin'");
					echo mysql_num_rows($jumlah_mesin);
					?>, 
					<?php 
					$jumlah_komputer = mysql_query("select * from tb_siswa where jurusan='Teknik Komputer'");
					echo mysql_num_rows($jumlah_komputer);
					?>, 
					<?php 
					$jumlah_akuntansi = mysql_query("select * from tb_siswa where jurusan='Akuntansi'");
					echo mysql_num_rows($jumlah_akuntansi);
					?>
					],
					backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)'
					],
					borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)'
					],
					borderWidth: 1
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});
	</script>

Baris pertama dan kedua dari script di atas adalah membentuk variable id dengan nama "myChart" seperti yang dijelaskasn pada langkah ke-3 bahwa grafik chart js akan ditampilkan pada tag id dengan nama myChart. Baris ke-6 adalah label nama yang akan tampil pada setiap batang grafik, sedangkan baris ke-10 sampai 25 adalah script php untuk menampilkan data dari database sebagai informasi yang akan tampil di setiap batang grafik sesuai dengan labelnya.

Sampai tahap ini semua source yang dibutuhkan untuk membuat grafik chart js dengan php mysql telah selesai kita kumpulkan. Sehingga secara lengkap coding script di dalam file index.php menjadi seperti berikut di bawah ini;

<html>
<head>
	<title>Tutorial Cara Membuat Grafik Chart JS dengan PHP MySQL</title>
	<script type="text/javascript" src="chartjs/Chart.js"></script>
	<style type="text/css">
		body{font-family: roboto;}
		table{margin: 0px auto;}
	</style>
</head>
<body>
	<h2 align="center">Cara Membuat Grafik Chart JS dengan PHP MySQL<br/>Raja Putra Media</h2>
	<?php 
		include "koneksi.php";
	?>
	<div style="width: 800px;margin: 0px auto;">
		<canvas id="myChart"></canvas>
	</div><br/><br/>
	<table border="1" cellpadding="4">
		<thead>
			<tr>
				<th>No</th>
				<th>Nama Mahasiswa</th>
				<th>Jurusan</th>
			</tr>
		</thead>
		<tbody>
			<?php 
				$no =0;
				$data = mysql_query("select * from tb_siswa");
				while($d=mysql_fetch_array($data)){
				$no++
			?>
			<tr>
				<td><?php echo $no; ?></td>
				<td><?php echo $d['nama']; ?></td>
				<td><?php echo $d['jurusan']; ?></td>
			</tr>
			<?php 
				}
			?>
		</tbody>
	</table>
	<script>
		var ctx = document.getElementById("myChart").getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'bar',
			data: {
				labels: ["Teknik Elektro", "Teknik Mesin", "Teknik Komputer", "Akuntansi"],
				datasets: [{
					label: '',
					data: [
					<?php 
					$jumlah_elektro = mysql_query("select * from tb_siswa where jurusan='Teknik Elektro'");
					echo mysql_num_rows($jumlah_elektro);
					?>, 
					<?php 
					$jumlah_mesin = mysql_query("select * from tb_siswa where jurusan='Teknik Mesin'");
					echo mysql_num_rows($jumlah_mesin);
					?>, 
					<?php 
					$jumlah_komputer = mysql_query("select * from tb_siswa where jurusan='Teknik Komputer'");
					echo mysql_num_rows($jumlah_komputer);
					?>, 
					<?php 
					$jumlah_akuntansi = mysql_query("select * from tb_siswa where jurusan='Akuntansi'");
					echo mysql_num_rows($jumlah_akuntansi);
					?>
					],
					backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)'
					],
					borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)'
					],
					borderWidth: 1
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});
	</script>
</body>
</html>

Untuk membuktikan apakah tutorial cara membuat grafik chart js dengan php mysql menggunakan plugin chartjs ini berhasil atau tidak, silahkan jalankan file index.php di dalam web browser. Ketik url localhost/chart-js/ dan seharusnya menampilkan grafik chart js dalam bentuk grafik batang seperti gambar di bawah ini;

Membuat Grafik Chart JS dengan PHP MySQL

Jika coding script php untuk menampilkan grafik chart js belum berhasil tampil seperti gambar di atas, tidak perlu khawatir. Silahkan download source code grafik php secara utuh dan lengkap pada akhir pembahasan ini melalui link di bawah.

Download Tutorial Membuat Grafik Chart JS dengan PHP MySQL

Download Source Code Grafik PHP

Sekian penjelasan yang cukup panjang dan mungkin membosankan tentang bagaimana cara membuat grafik chart js dengan php mysql menggunakan plugin chart.js lengkap dengan contoh dan penjelasan nya. Untuk mendapatkan source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :