Cara Membuat Grafik dari Database MySQL dengan Chart Js. Assalamualaikum, halo semuanya kembali lagi di sahretech. Kali ini mimin akan memberikan tutorial cara mengolah data dari database menjadi grafik yang mudah dibaca. Penasaran ? Ikuti tutorialnya berikut ini.
Chart atau grafik adalah salah satu fitur yang biasa ada di aplikasi laporan, pasalnya dengan adanya grafik pembacaan data menjadi lebih mudah dipahami. Bagi kamu sang programmer, tidak lengkap rasanya jika tidak memahami cara membuat grafik di php. Dan untungnya saat ini ada library javascript yang cukup membantu para developer untuk membuat aplikasi yang dibangun menjadi lebih interaktif yaitu chart js
Chart Js adalah library javascript yang memanfaatkan element canvas untuk membuat grafik yang akan ditampilkan di web. Kalian bisa mengunjungi situsnya di chartjs.org. Ada banyak pilihan chart atau bagan yang bisa kalian gunakan, itu semua tergantung kebutuhan kalian. Berikut beberapa daftar bagannya.
 |
| Daftar ChartJs yang bisa dimanfaatkan |
Pada tutorial kali ini kita akan menggunakan vertical bar chart untuk pengolahan data sederhana. Intinya agar kalian mudah memahaminya, dan bagi yang ingin tau lebih lanjut bagaimana cara membuat grafik yang lebih kompleks kalian bisa membuka halaman dokumentasi chart js.
Cara Membuat Chart Js Perbandingan Jumlah Jenis Kelamin
Intro : Pada tutorial kali ini kita akan mengolah data mahasiswa, dimana kita akan menampilkan perbandingan jumlah mahasiswa jenis kelamin laki-laki dan perempuan. Artinya kita membutuhkan 2 buah bar / batang yang merepresentasikan jumlah laki-laki dan jumlah perempuan. Ok kita langsung masuk :- 1. Buatlah sebuah database baru bernama latihan
- 2. Buat sebuah tabel latihan seperti gambar di bawah ini dan jangan lupa disi dengan beberapa record data
 |
| tabel mahasiswa |
- Atau biar cepat buatlah sebuah file baru bernama mahasiswa.sql. Isi file tersebut dengan script di bawah ini.
- Import mahasiswa.sql ke database latihan, caranya masuk ke database latihan > import > pilih file > klik go untuk melanjutkan.
-- phpMyAdmin SQL Dump
-- version 4.9.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 05 Apr 2020 pada 17.43
-- Versi server: 10.4.11-MariaDB
-- Versi PHP: 7.3.13
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: `latihan`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `mahasiswa`
--
CREATE TABLE `mahasiswa` (
`idmahasiswa` int(11) NOT NULL,
`nama` varchar(30) NOT NULL,
`jk` enum('laki-laki','perempuan') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data untuk tabel `mahasiswa`
--
INSERT INTO `mahasiswa` (`idmahasiswa`, `nama`, `jk`) VALUES
(1, 'nabil putra', 'laki-laki'),
(2, 'nabilah putri', 'perempuan'),
(3, 'bill gates', 'laki-laki'),
(4, 'neymar', 'laki-laki'),
(5, 'kevin', 'laki-laki'),
(6, 'fitri', 'perempuan'),
(7, 'eko cahyono', 'laki-laki'),
(8, 'Dwi cahyani', 'perempuan'),
(9, 'raden', 'laki-laki'),
(10, 'silvia', 'perempuan'),
(11, 'chen', 'laki-laki');
--
-- Indexes for dumped tables
--
--
-- Indeks untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
ADD PRIMARY KEY (`idmahasiswa`);
--
-- AUTO_INCREMENT untuk tabel yang dibuang
--
--
-- AUTO_INCREMENT untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
MODIFY `idmahasiswa` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
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 */;
- 4. Setelah semua data berhasil diimport langkah selanjutnya adalah membuat folder baru bernama latihangrafik dan lalu buatlah file baru bernama index.php di dalamnya. Lalu ikuti scriptnya seperti di bawah ini.
<?php
//melakukan koneksi ke database
// host = localhost, user = root, password = '', database = latihan
$koneksi = mysqli_connect("localhost", "root", "", "latihan");
//ambil data mahasiswa dimana jenis kelamin adalah laki-laki
$lakilaki = mysqli_query($koneksi, "SELECT jk FROM mahasiswa WHERE jk = 'laki-laki' ");
//ambil data mahasiswa dimana jenis kelamin adalah perempuan
$perempuan = mysqli_query($koneksi, "SELECT jk FROM mahasiswa WHERE jk = 'perempuan' ");
?>
<html>
<head>
<title>Belajar Chart</title>
<!-- import library chart menggunakan cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<style type="text/css">
.container {
width: 50%;
margin: 15px auto;
}
</style>
</head>
<body>
<div class="container">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
// tipe chart
type: 'bar',
data: {
//karena hanya menggunakan 2 batang
//maka buat dua lebel, yaitu lebel laki-laki dan perempuan
labels: ['Laki-laki', 'Perempuan'],
//dataset adalah data yang akan ditampilkan
datasets: [{
label: 'jumlah mahasiswa',
//karena hanya menggunakan 2 batang/bar
//maka 2 sql yang dibutuhkan
//hitung jumlah mahasiswa laki-laki dan jumlah mahasiswa perempuan
data: [
<?php echo mysqli_num_rows($lakilaki); ?>,
<?php echo mysqli_num_rows($perempuan);?>,
],
//atur background barchartnya
//karena cuma dua, maka 2 saja yang diatur
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
//atur border barchartnya
//karena cuma dua, maka 2 saja yang diatur
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
- 5. Jalankan di browser kalian, maka hasilnya akan tampak seperti gambar di bawah ini. grafik laki-laki ditunjukkan dengan warna merah cerah dan grafik perempuan ditunjukkan dengan warna biru jika dikalkulasi keduanya maka jumlahnya sama dengan yang ada di database
 |
| Hasil chart dengan data mahasiswa |
Penjelasan script di atas :
- Line 4 : Menambahkan koneksi ke database
- Line 5 : Mengambil data hanya mahasiswa laki-laki
- Line 5 : Mengambil data hanya mahasiswa perempuan
- Line 38 : Memberi label untuk masing-masing bar chart
- Line 48 : Menghitung total data mahasiswa laki-laki
- Line 49 : Menghitung total data mahasiswa perempuan
- Line 55 - 56 : Memberi background color untuk setiap bar chart
- Line 62 - 63 : Memberi border color untuk setiap bar chart
Penjelasan script di atas sekaligus menjadi parameter yang harus di isi dalam menggunakan bar chartjs. Jika kita simulasikan ke data lain, yaitu menghitung jumlah mahasiswa berdasarkan jurusan maka kita perlu
- menambahkan koneksi ke database, dan mengambil data mahasiswa per jurusan
- menambahkan label jurusan sebanyak jurusan yang ada, misalkan ada 5 jurusan maka buat lima label
- pada dataset tambahkan label 'jurusan'
- pada dataset tambahkan 5 data jurusan yang telah dicount/dihitung
- tambahkan background dan border color sesuai jumlah jurusan
saya rasa tutorial singkat ini sangat mudah unutk dipahami asalkan kalian semua sudah mengerti dasar-dasar CRUD pada aplikasi berbasis php dan untuk chartnya sendiri kalian hanya mengubah beberapa parameter atau kodingan saja.
Baca artikel tutorial pemrograman seru lainnya :
Baca artikel tutorial pemrograman seru lainnya :
Cukup sekian tutorial Cara Membuat grafik dari Php dan Database MySQL dengan ChartJs. Semoga tutorial ini dapat membantu kalian semua. Kurang lebihnya saya mohon maaf, apabila ada kritik, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding dan sampai jumpa di tutorial selanjutnya :)
Terimakasih min sangat membantu sekali. salam kenal saya Siti Hatijah daari ISB Atma Luhur
ReplyDeleteTerimakasih kunjungan nya
Deletemantap
ReplyDeletesama-sama :)
Delete