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

jasa pasang iklan murah

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

OSMAN ARISAN2021-12-07, 09:43 am
ok banget
Khoirul2021-11-29, 14:48 pm
Mau tanya unutk Aplikasi SPPD brpa harga?
azob2021-11-25, 09:27 am
Aplikasi E_ dokumen apakah bisa custome?
yus2021-11-19, 08:54 am
berapa harga aplikasi cuti
ahya2021-11-17, 20:02 pm
harga aplikasi arsip surat brp??? bs bntu instal ga?
M. Taufik2021-11-17, 11:44 am
Saya tertarik dengan aplikasi data mahasiswa, tapi apakah bisa data mahasiswa nya dapat diisi sendiri?
man2021-11-11, 08:08 am
App cuti bisakah di+ fitur laporan rekap per cuti per pegawai dan rekap tahun lalu_ Utk tentukan bisa tidak dpt cuti lg
project2021-11-01, 12:14 pm
mba irene masi cari aplikasi arsip surat ?
Ari2021-10-31, 12:24 pm
saya tertarik aplikasi input data anggota_ boleh minta no hp yang bia saya hubungi? terimaksih
Ketut Wiyasa2021-10-22, 09:58 am
Biaya pembuatan aplikasi marketplace berbasis web
Budi H2021-10-06, 11:12 am
Saya tertarik dengan disain Sistem informasi Manajemen data anggota, bisa di custom untuk data UMKM?
Irene2021-10-05, 14:50 pm
Hai, saya tertarik dengan aplikasi arsip surat masuk dan keluar_ _ Berapa ya kira kira rincian biayanya?
adi2021-10-03, 17:16 pm
terima kasih tutorialnya sangat membantu
Abi2021-10-02, 01:48 am
hai saya tertarik dengan Program Aplikasi Input Data Anggota, ada telp yang bisa di hubungi ?
saya ertin2021-09-28, 15:07 pm
apakah saya bisa hosting yang data siswa
Indra2021-09-20, 14:39 pm
selamat siang, sy mau coba utk bikin startup peminjaman barang, apakah bisa di setup lokal server ?harga brp?ada limiter
Dimas Nurcah2021-09-16, 11:38 am
cara menampilkan ip versi 6 nya itu gimana min? saya coba scriptnya malah _ _ 1 _ Mohon sekali bantuannya min
dedi2021-09-11, 13:06 pm
sandi login untuk aplikasi absensi mas apa ya
Budi2021-09-09, 15:49 pm
Maaf ingin bertanya, harga untuk aplikasi sarpras dan simpeg berapa ya masing_ masingnya
SURATNO2021-09-03, 13:47 pm
saya ingin bikin aplikasi data rt rw apakah bisa di bantu
BUKHORI2021-08-23, 00:36 am
mohon info harga aplikasi input data anggota?
Bagas2021-08-12, 14:04 pm
Bagaimana saya bisa mendownload aplikasi E_ Skripsi
Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
NOFAL2021-06-02, 20:57 pm
hallo, untuk aplikasi penjualan retail brp harganya? ini sistem bisnisnya source code di ksh atau cloud?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Farah Ghaida2021-05-20, 15:13 pm
maaf pa sy mau tanya biaya pembuatan aplikasi data kepegawaian
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya
dela2021-03-10, 10:23 am
ka untuk pembelian aplikasi manajemen anggota berapa budgetnya? dan mendapatkan source codenya tidak ya?
isna2021-02-26, 23:59 pm
saya minat Aplikasi pengajuan judul skripsi online bang_

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat grafik chart js dengan php mysql