Membuat Grafik Berdasarkan Jenis Kelamin Menggunakan Chart.js
Pada tutorial sebelumnya saya sudah membahas bagaimana menampilkan data menggunakan php dan chart.js, nah sekarang saya akan sedikit membahas tentang bagaimana menampilkan data grafik tersebut berdasarkan jenis kelamin, namun dengan teknik penulisan kode yang berbeda dari sebelumnya dimana cara ini relatif lebih mudah karena nanti data akan langsung dipanggil didalam Javascript menggunakan php.
Cara Mudah Membuat Grafik Berdasarkan Jenis Kelamin Menggunakan PHP dan Chart.js
Database.
Pertama buatlah sebuah database baru dengan tabel seperti berikut
CREATE TABLE `tb_mahasiswa` (
`id_mahasiswa` int(13) NOT NULL,
`nama` varchar(30) NOT NULL,
`jurusan` enum('Matematika','Teknologi Informasi','Bahasa Inggris') NOT NULL,
`jenis_kelamin` enum('L','P') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data untuk tabel `tb_mahasiswa`
--
INSERT INTO `tb_mahasiswa` (`id_mahasiswa`, `nama`, `jurusan`, `jenis_kelamin`) VALUES
(1, 'Ahmad Zaelani', 'Matematika', 'L'),
(2, 'Dinda', 'Teknologi Informasi', 'P'),
(3, 'Maher', 'Teknologi Informasi', 'L'),
(4, 'Lutfi', 'Matematika', 'L'),
(5, 'Susan', 'Teknologi Informasi', 'P');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_mahasiswa`
--
ALTER TABLE `tb_mahasiswa`
ADD PRIMARY KEY (`id_mahasiswa`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tb_mahasiswa`
--
ALTER TABLE `tb_mahasiswa`
MODIFY `id_mahasiswa` int(13) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
/*!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 */;
koneksi.mahasiswa.php
File mahasiswa.koneksi.php nanti akan digunakan untuk melakukan koneksi ke database agar kita bisa membuat dan menjumlahkan data berdasarkan jenis kelamin menggunakan php dan chart.js
<?php
define('NAME_SERVER', 'localhost');
define('NAME_USER','root');
define('NAME_PASS','');
define('NAME_DB', 'chart');
$koneksi=mysqli_connect(NAME_SERVER,NAME_USER,NAME_PASS,NAME_DB);
if($koneksi==false){
die("Tidak dapat melakukan koneksi".mysqli_connect_error());
}
?>function.mahasiswa.php
Didalam function nantinya akan berisi script untuk menjumlahkan data berdasarkan jenis kelamin menggunakan sum if, data tersebut nanti akan dijadikan variabel didalam fetch array yang selanjutnya variabel tersebut akan dipanggil didalam javascript agar dapat menampilkan grafik pie chart berdasarkan jenis kelamin. Anda mungkin bisa menjumlahkan data perjenis kelamin menggunakan fungsi mysqli_num_rows(); tapi mungkin nanti perlu dua kali query, sehingga saya menyingkatnya saja dalam sekali query menggunakan sum if
<?php
function query($sql){
global $koneksi;
$perintah=mysqli_query($koneksi,$sql);
if(!$perintah) die("Gagal melakukan koneksi".mysqli_connect_error());
return $perintah;
}
function Chart_Tampil_JK(){
$sql="SELECT SUM(IF(jenis_kelamin='L',1,0)) AS jumlah_pria, SUM(IF(jenis_kelamin='P',1,0)) AS jumlah_perempuan FROM tb_mahasiswa";
$perintah=query($sql);
return $perintah;
}
?>mahasiswa.php
File ini nantinya akan bertugas menampilkan data didalam grafik chart.js berdasarkan jenis kelamin, nanti hasil yang diharapkan adalah jumlah data per-jenis kelamin akan ditampilkan didalam grafik chart.js
<?php
//Memanggil file koneksi dan function
include('koneksi.mahasiswa.php');
include('function.mahasiswa.php');
?>
<html>
<head>
<title>Menampilkan Grafik Menggunakan Chart.js Berdasarkan Jenis Kelamin - ROOT93</title>
<style type="text/css">
body{
width: 550PX;
}
#chart-container {
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<?php
//panggil function data mahasiswa berdasarkan jenis kelamin
$tampil=Chart_Tampil_JK();
$tampilkan=mysqli_fetch_array($tampil);
?>
<div id=chart-container>
<canvas id="myPieChart" width="50" height="50"></canvas>
</div>
</body>
</html>
<script type="text/javascript">
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Laki laki","Perempuan"],
datasets: [{
label: '',
data: [<?php echo $tampilkan['jumlah_pria']; ?>, <?php echo $tampilkan['jumlah_perempuan']; ?>],
backgroundColor: ['#007bff', '#dc3545'],
}],
},
});
</script>
Demo
[ Download Source code ]
Ahmad Zaelani
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
Wah, blog ini ternyata lengkap juga ya pembahasan untuk ilmu pemrograman. Izin bookmark ya buat belajar-belajar pemrograman, mana tau bisa pintar seperti pemilik blog ini :)
ReplyDelete