membuat grafik chart js dengan php mysql

share

  • membuat grafik chart js dengan php mysql

    Membuat Grafik Chart JS dengan PHP MySQL


    Cara membuat grafik chart js dengan php mysql menggunakan plugin chart.js atau membuat tampilan statistik suatu data berbasis web yang dibuat dengan source code script php dalam bentuk grafik batang.
  • membuat grafik chart js dengan php mysql
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat grafik chart js dengan php mysql
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat grafik chart js dengan php mysql Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat grafik chart js dengan php mysql
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

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;

Membuat Grafik Chart JS dengan PHP MySQL



Grafik Chart JS PHP

membuat grafik chart js dengan php mysql
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
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 :


Membuat Grafik Chart JS dengan PHP MySQL

Tags: grafik chart js php mysql, membuat grafik chart js, membuat chart js, grafik chart js, membuat grafik chart js dengan php mysql


Reliable

membuat grafik chart js dengan php mysql

Advertise

membuat grafik chart js dengan php mysql

Payment & Donation

membuat grafik chart js dengan php mysql

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat grafik chart js dengan php mysql

Account :

andihatmoko@gmail.com

Live Chat

lazuardi2019-12-12, 09:08 am
Mantaps, gan!
HANAFI2019-11-27, 11:16 am
Brapa harga aplikasi koperasi simpan pinjam
andra2019-11-27, 02:45 am
berapa harga aplikasi sppd ?
Dirham Th2019-11-26, 19:55 pm
Gan .ada aplikasi service kendaraan gak..ato bisa bantu buat aplikasi kasus yg kami alami.,?
daud2019-11-19, 14:26 pm
bagaimana cara mengakses aplikasi demo untuk program aplikasi input data organisasi?
Denny Lon2019-11-16, 20:20 pm
Halo admin. Apakah aplikasi ini bisa digunakan untuk usaha Rental Alat-Alat Fotografi? Mohon informasinya
Arsya Rid2019-11-15, 13:21 pm
berapa harga raja rental v.2.0 dan bagaimana transaksinya?
doni2019-11-12, 21:13 pm
brapa harga HRD 2.0
Karya Wap2019-11-12, 18:55 pm
Bang ada nggak yang berbentuk CD
agus2019-11-07, 11:31 am
selamat siang. bagaimana cara saya agr bisa login ke trial SIM-ASET?
Joyce 2019-11-06, 08:55 am
bergabung membuat PHP Database
jauhar2019-10-31, 11:14 am
ini harga berapa ya? trus bisa kah ditambah form pengajuan cuti?
rian2019-10-25, 13:46 pm
mau nanya utk pembelian program data karyawan bpr ya harganya
Hari2019-10-18, 20:38 pm
Berapa biaya untuk pembuatan aplikasi SPPD
silvani2019-10-18, 16:39 pm
aplikasi arsip digital berbasis web ini berapa ya kak?
Yunus2019-10-17, 15:55 pm
Harga aplikasi SPPD ini berapa ya
CIKWAN2019-10-13, 21:00 pm
berapa harga aplikasi SPPD versi 2
WIRA2019-10-04, 14:49 pm
kami berminat aplikasi simpeg versi 7...bagaimana cara mendapatkannya....dan berapa no WA nya. terima kasih
azis2019-10-03, 15:14 pm
bang saya mau bayar buat aplikasi dokumen kontrol
antosilat2019-10-01, 16:48 pm
mohon info untuk biaya custom aplikasi
Lucas Weber2019-09-29, 00:31 am
Good Day, Lucas Weber Here from World Class Solutions, wondering can we publish your blog post over here? We are lo
sugeng cu2019-09-25, 13:35 pm
simpeg 7 berapa ya dan ke mana bayar nya
M Siagian2019-09-24, 01:50 am
Data base karyawan dan penggajian
L2019-09-19, 13:55 pm
cara mengurangi 2 date yang ada di database gmana sih ? gw error mlu!
Ruslan2019-09-18, 07:27 am
Brapa aplikasi Gaji Berkalanya bro ki
Ade Ruh2019-09-17, 07:49 am
Assalamualaikam , Berapa harga aplikasi SPPD yg terbaru?
Ridho2019-09-05, 09:00 am
Aplikasi untuk kepegawaian (simpeg) untuk sekolah ada?
willybass2019-08-27, 13:24 pm
om mo nanya aplikasi simpeg tu berapa biayanya
Chairudin2019-08-26, 18:41 pm
assalamu alikum , brapa harga aplikasi Simpegnya pa
JUMARIS2019-08-20, 11:14 am
maaf om mau nanya berapa harga aplikasi SIMPEG Versi 7 terbaru om
sandi mau2019-08-18, 12:57 pm
assalamualaikum om, om boleh bagi script aplikasi web dokumen kontrol? lagi butuh om. tolong dengan sangat
ibnul2019-08-15, 12:27 pm
kalau beli simpeg v7.0 seperti yang di demokan itu berapa gan?
alessio2019-08-10, 11:50 am
min untuk aplikasi sistem informasi pasar full saya harus gimana??
agung2019-07-31, 14:47 pm
tertarik dengan aplikasi simpeg Kemdikbud.. boleh email ke saya..
gita2019-07-20, 06:10 am
untuk aplikasi stok barang berbayar ya, di download ada paswordnya
Solekha2019-07-19, 16:33 pm
aplikasi cuti online katanya bs download gratis kka, boleh mnta link nya
andre2019-07-16, 12:40 pm
tertarik dengan aplikasi simpeg, bisa email saya utk harga dan penjelasan yg lebih detail? terima kasih
Toni2019-06-20, 14:27 pm
Saya tertarik dengan software simpeg. Berapa harganya? apakah sekali beli atau ada newer yearly? apakah termasuk s Codex
agus2019-06-20, 09:51 am
saya minat aplikasi e-arsip v4. berapa harga nya gan?
azis2019-06-18, 10:47 am
saya tertarik dengan aplikasi dokumen kantor
timmy2019-06-10, 15:46 pm
donasi Program Aplikasi HRD Berbasis Web berapa gan
zul2019-06-10, 13:31 pm
kak ini mau nyoba aplikasi live chat
Edyrianto2019-05-26, 20:28 pm
pak saya berminat dengan Aplikasi SPPD nya tp menu dan templatenya bisa dirubah dan ditambah sesuai dengan kebutuhan dgn
rido2019-05-24, 17:29 pm
gimna ya cara dapt aplikasi biodata mahasiswa
rhenald2019-05-03, 13:21 pm
om boleh tanya kalo mo beli aplikasi simpegnya berapa y harganya
Amri2019-04-02, 16:05 pm
klo saya pesan aplikasi absensi karyawan berapa lama dan harganya berapa?
khomsin2019-03-26, 01:16 am
mau pesan aplikasi sederhana,, mirip seperti aplikasi SIMPAS.. berapa lama yah
Benny2019-02-18, 09:27 am
berapa harga aplikasi cuti online? Apa tidak ada menu cetak form permohonan cuti?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 

membuat grafik chart js dengan php mysql