Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js
Wednesday 6 March 2019
Edit
Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js
Membuat Grafik Dari Database MySQL Dan PHP Dengan Chart.js, membuat grafik tentu menjadi pilihan utama untuk menampilkan data dan memonitoring data dengan mudah, dengan adanya grafik kita bisa melihat perkembangan penjualan misalnya yang artinya mempermudah untuk mengetahui stock, penjulan, dan lain sebagainya.
Pada kesempatan kali ini saya akan mencoba memberikan tutorial membuat grafik dari databse MySQL dan PHP dengan chart.js, pada tutorial sebelumnya saya sudah membuat grafik dari database menggunakan MySQL dan PHP dengan FusionChart bisa anda lihat di link tersebut.
Kembali ke pembahasan, pertama kita buat sebuah database dengan nama mahasiswa, kemudian buat tabel dengan nama mahasiswa, untuk mempersingkat pembuatan database silahkan anda dumping SQL Sintax di bawah ini.
Baca Juga : Menampilkan Value combobox di PHP
Kembali ke pembahasan, pertama kita buat sebuah database dengan nama mahasiswa, kemudian buat tabel dengan nama mahasiswa, untuk mempersingkat pembuatan database silahkan anda dumping SQL Sintax di bawah ini.
Baca Juga : Menampilkan Value combobox di PHP
-- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Mar 04, 2019 at 10:34 AM -- Server version: 10.1.35-MariaDB -- PHP Version: 7.1.21 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `mahasiswa` -- -- -------------------------------------------------------- -- -- Table structure for table `mahasiswa` -- CREATE TABLE `mahasiswa` ( `id` int(10) NOT NULL, `nim` varchar(5) NOT NULL, `nama` varchar(40) NOT NULL, `ipk` double NOT NULL, `jurusan` varchar(40) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `mahasiswa` -- INSERT INTO `mahasiswa` (`id`, `nim`, `nama`, `ipk`, `jurusan`) VALUES (1, 'M0002', 'Hakko Bio Richard', 3, 'Manajemen Informatika'), (2, 'M0003', 'Dede Rizki Ramadhan', 2.8, 'Manajemen Informatika'), (3, 'M0004', 'Anton Sugianto', 3.2, 'Teknik Informatika'), (4, 'M0005', 'Ujang Walim', 3.1, 'Sistem Informasi'), (5, 'M0016', 'Dony', 3, 'Teknik Industri'), (6, 'M0100', 'Dimas', 3.1, 'Psikologi'), (7, 'M0016', 'Dion', 3, 'Teknik Industri'), (8, 'M0016', 'Mayang', 3, 'Teknik Industri'), (9, 'M0016', 'Susi', 3, 'Teknik Industri'), (10, 'M0016', 'Niqo', 3, 'Teknik Industri'), (11, 'M0016', 'Esbeye', 3, 'Teknik Industri'), (12, 'M0016', 'Joko', 3, 'Teknik Industri'), (13, 'M0016', 'Jaka', 3, 'Teknik Industri'), (14, 'M0016', 'Wira', 3, 'Teknik Industri'), (15, 'M0016', 'Maradona', 3, 'Teknik Industri'), (16, 'M0016', 'Ujang', 3, 'Teknik Industri'), (17, 'M0016', 'Sugiarto', 3, 'Teknik Industri'), (18, 'M0016', 'Karman', 3, 'Teknik Industri'), (19, 'M0016', 'Anto', 3, 'Teknik Industri'), (20, 'M0016', 'Rosada', 3, 'Teknik Industri'), (21, 'M0016', 'Bima', 3, 'Teknik Industri'), (22, 'M0016', 'Lusi', 3, 'Teknik Industri'), (23, 'M0016', 'Ipul', 3, 'Teknik Industri'), (24, 'M0016', 'Erik', 3, 'Teknik Industri'), (25, 'M0016', 'Siffa', 3, 'Teknik Industri'), (26, 'M0016', 'Sebastian', 3, 'Teknik Industri'), (27, 'M0016', 'George', 3, 'Teknik Industri'), (28, 'M0016', 'Richard', 3, 'Teknik Industri'), (29, 'M0016', 'Dony', 3, 'Teknik Industri'); -- -- Indexes for dumped tables -- -- -- Indexes for table `mahasiswa` -- ALTER TABLE `mahasiswa` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `mahasiswa` -- ALTER TABLE `mahasiswa` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=30; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
</> Langkah selanjutnya buatlah folder dengan nama grafik kemudian simpan di direktori c:/xampp/htdocs/grafik
</> setelah itu silahkan anda download chart.js
</> selanjutnya copy dan pastekan kode di bawah ini simpan dengan nama index.php di direktori c:/xampp/htdocs/grafik
<!doctype html>
<html>
<head>
<title>Menampilkan data dari database MySQL ke grafik dengan PHP dan Chart JS | www.hakkoblogs.com</title>
<script src="dist/Chart.bundle.js"></script>
<script src="dist/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<?php
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "mahasiswa";
$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(mysqli_connect_errno()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}
$mi = "Manajemen Informatika";
?>
<script>
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var barChartData = {
labels: ['Sistem Informasi', 'Teknik Informatika', 'Manajemen Informatika', 'Teknik Industri', 'Psikologi'],
datasets: [{
label: 'Mahasiswa',
backgroundColor: [color(window.chartColors.red).alpha(0.5).rgbString(),
color(window.chartColors.blue).alpha(0.5).rgbString(),
color(window.chartColors.yellow).alpha(0.5).rgbString(),
color(window.chartColors.blue).alpha(0.5).rgbString(),
color(window.chartColors.default).alpha(0.5).rgbString()],
borderColor: [window.chartColors.red,
window.chartColors.blue,
window.chartColors.yellow,
window.chartColors.blue,
window.chartColors.default],
borderWidth: 3,
data: [
<?php $tampil1=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Sistem Informasi'");
echo mysqli_num_rows($tampil1);
?>,
<?php $tampil2=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Teknik Informatika'");
echo mysqli_num_rows($tampil2);
?>,
<?php $tampil3=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Manajemen Informatika'");
echo mysqli_num_rows($tampil3);
?>,
<?php $tampil4=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Teknik Industri'");
echo mysqli_num_rows($tampil4);
?>,
<?php $tampil5=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Psikologi'");
echo mysqli_num_rows($tampil5);
?>
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Tabel Jurusan Mahasiswa | www.hakkoblogs.com'
}
}
});
};
</script>
</body>
</html>
</> Selanjutnya menjalankan file tersebut di browser dengan akses URL localhost/grafik, ketika di run file tersebut maka akan ada tampilan seperti gambar di bawah ini
Penjelasan singkat kode :
Kode di bawah ini merupakan bagian head dari file yng berfungsi untuk memanggil chart.js
<head>
<title>Menampilkan data dari database MySQL ke grafik dengan PHP dan Chart JS | www.hakkoblogs.com</title>
<script src="dist/Chart.bundle.js"></script>
<script src="dist/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
Kode ini meanggil id javascript dengan nama canvas yang berfungsi untuk menampilkan grafik dari database.
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
Kode di bawah ini adalah kode untuk memanggil koneksi database,
<?php
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "mahasiswa";
$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(mysqli_connect_errno()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}
?>
Kode di bawah ini merupakan script untuk menampilkan data ke grafik, bila anda perhatikan kode di bawah ini terlihat di bagian data disisipkan kode PHP yang berfungsi untuk counting atau menghitung jumlah mahasiswa berdasarkan kriteria jurusan yang dikehendaki.
<script>
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var barChartData = {
labels: ['Sistem Informasi', 'Teknik Informatika', 'Manajemen Informatika', 'Teknik Industri', 'Psikologi'],
datasets: [{
label: 'Mahasiswa',
backgroundColor: [color(window.chartColors.red).alpha(0.5).rgbString(),
color(window.chartColors.blue).alpha(0.5).rgbString(),
color(window.chartColors.yellow).alpha(0.5).rgbString(),
color(window.chartColors.blue).alpha(0.5).rgbString(),
color(window.chartColors.default).alpha(0.5).rgbString()],
borderColor: [window.chartColors.red,
window.chartColors.blue,
window.chartColors.yellow,
window.chartColors.blue,
window.chartColors.default],
borderWidth: 3,
data: [
<?php $tampil1=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Sistem Informasi'");
echo mysqli_num_rows($tampil1);
?>,
<?php $tampil2=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Teknik Informatika'");
echo mysqli_num_rows($tampil2);
?>,
<?php $tampil3=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Manajemen Informatika'");
echo mysqli_num_rows($tampil3);
?>,
<?php $tampil4=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Teknik Industri'");
echo mysqli_num_rows($tampil4);
?>,
<?php $tampil5=mysqli_query($koneksi, "select * from mahasiswa WHERE jurusan='Psikologi'");
echo mysqli_num_rows($tampil5);
?>
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Tabel Jurusan Mahasiswa | www.hakkoblogs.com'
}
}
});
};
</script>
sampai tahap ini anda sudah bisa membuat grafik dari databse MySQL dan PHP dengan Chart JS, jika anda masih bingung saya sudah siapkan source code lengkap yang bisa anda download di link berikut ini
Silahkan dicoba dan di praktekkan, semoga tutorial singkat ini bisa berguna dan bermanfaat untuk anda yang sedang ingin enampilkan data ke dalam bentuk grafik dengan mudah.
Tetap pantau www.hakkoblogs.com untuk mendapatkan update terbaru seputar tutorial, programing dan aplikasi gratis.