membuat grafik chart js dengan php mysql

share

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

  • 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
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

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

David2023-09-29, 16:02 pm
Untuk aplikasi arsip berapa donasinya , terima kasih
AYI SYAHFITR2023-09-25, 10:33 am
Assalamualaikum, maaf apakah aplikasi ini berbayar atau bisa di instal bebas?
yulli2023-09-24, 17:09 pm
saya mau bertanya utk aplikasi sppd,brp dijualnya,terimakasih
yulli2023-09-24, 17:00 pm
saya mau bertanya utk aplikasi sppd,brp donasinya,
DENIEL AFRIA2023-09-20, 15:01 pm
berapa unruk program_ aplikasi_ surat_ masuk_ dan_ surat_ keluar
untuk harga 2023-09-20, 07:20 am
untuk harga aplikasi sipas brp min
Slamet2023-09-19, 10:05 am
untuk program aplikasi pendataan umkm, kalau boleh tahu dijual berapa?_ terima kasiih
Pria2023-09-14, 14:37 pm
untuk donasi menggunakan aplikasi ini berapa gan
Amot2023-09-09, 08:46 am
apakah framework nya php kak? berapa minimal donasi kak agar dpt password nya?
besse2023-08-25, 13:56 pm
minta kontak wa
rizal2023-08-24, 06:09 am
untuk harga aplikasi sipas brp min
Muji2023-08-20, 22:51 pm
Saya dan temen_ temen seorganisasi tertarik dengan Program Aplikasi Input Data Anggota, berapakah harga aplikasi tersebut
Auriga Danur2023-08-14, 11:32 am
File koneksi_ php nya kok gak ada ya?
Miftah2023-08-09, 16:36 pm
Apakah bisa develope aplikasi sistem management atlet, khususnya cabang olahraga atletik, data atlet, result event, dll
sutrisno2023-08-09, 11:45 am
bos haraga aplikasi surat berapa
Fahrul,S.Kom2023-08-07, 15:34 pm
saya tertarik dengan aplikasi SIPAS V2_ 0
ratna2023-07-30, 09:44 am
Mas aplikasi Sppd harganya berapa njih
Cien2023-07-25, 08:33 am
Buat biodata diri pakai tipe data boolean di php bagaimana min?
Viqi2023-07-20, 11:40 am
Untuk mendapatkan Aplikasi sarpras V4, Bayar berapa min?
Bimo Cakti T2023-07-13, 13:54 pm
aplikasi cuti online pegawai berapa min? mohon info
Dwi P2023-07-11, 21:45 pm
Mohon maaf mau menanyatakn aplikasi SIMPEG kira_ kira berapa harganya? Bisa dilist kan untuk semua SIMPEG
Duta2023-07-10, 18:38 pm
Saya ingin beli aplikasi Sipas V2_ 0
Alex2023-07-10, 11:38 am
Halo gan saya mau nanya2 dulu ya_ aplikasi perjalanan dinas SPD v2 itu bisa kita dapat source codenya donasi berap yah_ _
FIYO FAHREZI2023-07-09, 21:25 pm
Mas saya mau beli aplikasi KTP
sila susila2023-07-09, 17:06 pm
aplikasi pembayaran SPP sekolah donasi berapa klo untuk skripsi?
aa2023-07-06, 21:43 pm
net simpeg brp min?
aditya2023-06-22, 13:12 pm
berapa harga untuk aplikasi inventory? bagaimana transaksinya?
michael 2023-06-20, 23:06 pm
saya mau tanya kalo penamabahan harga untuk jumlah keseluruhan nya tu bgimana ya? terima kasih
Muhadi2023-06-20, 12:14 pm
Software aplikasi pembayaran SPP sekolah bisa diakses pakai HP tidak?
Fadly2023-06-18, 20:41 pm
Source code aplikasi arsip digital di jual harga berapa min? minat SC nya saja
Marisca2023-06-13, 08:16 am
Saya sedang diklat PIM IV, rencana akan memakai aplikasi kepegawaian simpeg untuk proyek perubahan, bisa dibantu?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat grafik chart js dengan php mysql