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

josh hutapea2023-01-26, 13:10 pm
mau pesan aplikasi gimana caranya
tania2023-01-20, 09:53 am
kalo mau mesen aplikasi berbasis web bisa ga ka
Irfan 2023-01-16, 10:13 am
klo mau pesan aplikasi ke no wa mana
Jenny Sokoy 2023-01-11, 13:18 pm
cara membuat aplikasi absensi siswa
alvinno2022-12-27, 01:52 am
berpa aplikasi Program Aplikasi Pembayaran SPP Sekolah
Ronny2022-12-21, 17:34 pm
Jika saya butuh aplikasi CAT custom berapa ya?
reo2022-12-21, 09:46 am
berapa harga untuk apk rental mobil
anto2022-12-19, 11:48 am
aplikasi pos nya tidak bisa di download ya_ ? apa sekarang berbayar_ buat referensi tugas akhir
NDARU SUBEKT2022-12-19, 11:02 am
untuk simpeg 7_ 2 brp bos
Herawan2022-12-17, 06:24 am
Itu versi demo, utk versi non demo, ada pembayaran berapa?
afio2022-12-12, 15:55 pm
kak gimana cara download aplikasinya?
peres2022-12-09, 08:22 am
admin berapa harga aplikasi sipasnya_ ?
thomas2022-11-29, 08:07 am
brp aplikasi HRD
Repades Patr2022-11-26, 14:51 pm
aplikasi bisnis rental barang berapa ?
Ifan2022-11-19, 23:28 pm
Aplikasi pendataan pegawai harga berapa?
yunislisa2022-11-09, 10:42 am
Bisa nggak saya request aplikasi penyadap SMS? Dan biayanya berapa?
AZ2022-11-07, 16:06 pm
Halo utk aplikasi surat masuk keluar biaya nya berapa ya?
nursia2022-11-02, 15:42 pm
apakah aplikasi itu bisa di kostum sesuai kebutuhan, terimakasih, mohon info via email yaa
Nursia2022-11-02, 15:40 pm
apakah ada aplikasi tentang data pengembangan kompetensi _ diklat PNS? jika ada boleh infokan kepada saya
yosp2022-11-02, 05:35 am
saya ingin aplikasi bembayaran spp web
Irfan shobar2022-11-01, 20:20 pm
Ingin membuat KTP online
Riska koromo2022-10-20, 09:14 am
Ass Ka tutorial membuat aplikasi absen PKL berbasis web
Nst2022-10-15, 02:50 am
Bagaimana mengkoneksikannya dengan pelanggan?
Dennis2022-10-14, 22:40 pm
Saya tertarik dengan Program Rental Web Based, bagaimana untuk proses pembelianya?
Wan2022-10-07, 14:12 pm
Berapa harga aplikasi sisfo pasar
RANGGA2022-10-06, 14:10 pm
bang mau beli aplikasi pembuat KTP softcopy itu bang
Prathama2022-09-19, 15:48 pm
Aplikasi Koperasi Usaha Bisa
Andre2022-09-16, 23:31 pm
untuk aplikasi pengajuan judul skripsi berapa min
Basilio2022-09-15, 07:37 am
Pagi Bang ada aplikasi semua data siswa?
Bagus Andrem2022-09-11, 14:00 pm
Kl pembuatn aplikasi pos berbasi android berpa gan?
herry2022-09-01, 13:18 pm
saya di distribusi oksigen dgn sistem rental tabungnya_ saya butuh apk utk moinitoring tabung
Asri2022-08-27, 09:04 am
Brapa price tuk aplikasi manajemen database organisasi dan anggota 1 provinsi saja_ _
HERLI2022-08-25, 02:14 am
Untuk Harga SIPAS Brapa Bg ?
Usman Musa2022-08-24, 00:06 am
Mau tanya jika berapa biaya pembuatan Aplikasi Data Keanggotaan sebuah Organisasi atau Perguruan Silat
Bayu2022-08-20, 06:28 am
info harga aplikasi hrd berbasis web
Ferdyn Rede2022-08-07, 09:56 am
Bagaimana cara download link e_ ktp nya🙏🏻
Yuko Hermawa2022-08-05, 08:12 am
Boleh info harganya ? Ada fitur utk akses cloud gak ? Klo custom apakah bisa ?
efrin2022-07-15, 22:44 pm
Program Aplikasi Arsip Digital Berbasis Web mohon bertanya berapa harganya makasih
Toyo2022-07-13, 08:23 am
Brp harga Apk Inventory barang gudang
Leo2022-07-11, 18:37 pm
Halo selamat malam,, gmn cara beli aplikasi edit ktp ? Mksh
patrick2022-07-08, 21:35 pm
mau tanya bang kalo cara insert gambar pake query sql gimana ya
hery2022-07-08, 07:48 am
assalamu alaikum mau tanya mengenai pembuatan aplikasi untuk input data anggota SSB
siwimorin2022-07-05, 13:18 pm
mohon info aplikasi arsip surat tugas, lhp, dan B_ A_ S_ T untuk inspektorat
Rachmadi2022-06-29, 15:33 pm
mohon info harga aplikasi data anggota_ terima kasih

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat grafik chart js dengan php mysql