Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah membuat chart grafik berbentuk batang atau bar chart, tutorial kali ini kita akan belajar membuat sebuah grafik Pie dengan plugin Chart.js dan PHP Mysql. Pie Chart merupakan sebuah grafik untuk menyajikan data dalam bentuk lingkaran, kita juga dapat menyajikan data dalam bentuk donat(doughnut chart).
Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP
Pertama-tama buat database terlebih dahulu. Dalam tutorial ini kita akan menggunakan database penjualan dengan satu tabel produk.
CREATE DATABASE `penjualan`;
USE `penjualan`;
CREATE TABLE `produk` (
`IdProduk` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`NamaProduk` varchar(255),
`JmlItem` int(11)
);
Selanjutnya insert data ke dalam tabel produk.
INSERT INTO `produk` VALUES ('1', 'Elpiji 3 Kg', '187');
INSERT INTO `produk` VALUES ('2', 'Bright Gas 5.5 Kg', '105');
INSERT INTO `produk` VALUES ('3', 'Bright Gas 12 Kg', '24');
INSERT INTO `produk` VALUES ('4', 'Elpiji 12 Kg', '78');
INSERT INTO `produk` VALUES ('5', 'Ease Gas 9 Kg', '49');
Setelah database selesai di buat dan insert data kedalam tabel produk, selanjutnya kita akan membuat sebuah json data menggunakan PHP. Simpan kode dibawah ini dengan nama file data-produk.php.
<?php
header('Content-Type: application/json; charset=utf8');
//koneksi kedatabase penjualan
$server = "localhost";
$user = "root";
$pass = "";
$dbname = "penjualan";
$koneksi = mysqli_connect($server,$user,$pass,$dbname);
//query tabel produk
$sql="SELECT * FROM produk";
$query=mysqli_query($koneksi, $sql) or die(mysqli_error($koneksi));
$array=array();
while($data=mysqli_fetch_assoc($query)) $array[]=$data;
//mengubah data array menjadi format json
echo json_encode($array);
?>
Tampilan data-produk.php dalam bentuk json jika di jalankan melalui browser seperti gambar di bawah ini.
Download Plugin Chart.js, Jquery dan framework Bootstrap, kemudian ekstrak hasil download tadi seperti gambar dibawah ini.
Untuk request data produk, kita bisa menggunakan fungsi getJSON, seperti dibawah ini.
Download Plugin Chart.js, Jquery dan framework Bootstrap, kemudian ekstrak hasil download tadi seperti gambar dibawah ini.
Untuk request data produk, kita bisa menggunakan fungsi getJSON, seperti dibawah ini.
$.getJSON( "http://localhost:/chart-pie/data-produk.php", function( data ) {
});
Parsing data Json untuk menampilkan data produk ke dalam tabel html dan membuat array untuk label serta data chart.js
var TabelData="";
$(data).each(function(i){
TabelData +="<tr><td>"+data[i].NamaProduk+"</td><td>"+data[i].JmlItem+"</td></tr>";
});
//tampilkan di tabel id DataTabelProduk
$("#DatatTabelProduk").html(TabelData);
//array untuk chart label dan chart data
var isi_labels = [];
var isi_data=[];
var TotalJml = 0;
//menghitung total jumlah item
data.forEach(function (obj) {
TotalJml += Number(obj["JmlItem"]);
});
//push ke dalam array isi label dan isi data
var JmlItem = 0;
$(data).each(function(i){
isi_labels.push(data[i].NamaProduk);
//jml item dalam persentase
isi_data.push(((data[i].JmlItem/TotalJml) * 100).toFixed(2));
});
Konfigurasi Chart.js
//deklarasi chartjs untuk membuat grafik 2d di id mychart
var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx, {
//chart akan ditampilkan sebagai pie chart
type: 'pie',
data: {
//membuat label chart
labels: isi_labels,
datasets: [{
label: 'Data Produk',
//isi chart
data: isi_data,
//membuat warna pada chart
backgroundColor: [
'rgb(26, 214, 13)',
'rgb(235, 52, 110)',
'rgb(52, 82, 235)',
'rgb(138, 4, 113)',
'rgb(214, 134, 13)'
],
//borderWidth: 0, //this will hide border
}]
},
options: {
//konfigurasi tooltip
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var labels = data.labels[tooltipItem.index];
var currentValue = dataset.data[tooltipItem.index];
return labels+": "+currentValue+" %";
}
}
}
}
});
Untuk menampilkan data produk kedalam tabel dan chartjs nya, kita perlu membuat sebuah tabel dan canvas seperti kode dibawah ini.
<div class="row">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading"><b>Data Produk</b></div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Produk</th>
<th>Jml Item</th>
</tr>
</thead>
<tbody id="DatatTabelProduk">
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading"><b>Grafik Data</b></div>
<div class="panel-body">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
Baca juga Membuat Grafik Grouping dengan Chartjs PHP dan Mysql
Kode lengkapnya seperti dibawah ini, simpan dengan nama file index.php.
Kode lengkapnya seperti dibawah ini, simpan dengan nama file index.php.
<!DOCTYPE html>
<html>
<head>
<title>maribelajarcoding.com</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Chartjs/Chart.min.css">
<script type="text/javascript" src="JQuery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="Chartjs/Chart.min.js"> </script>
</head>
<body>
<div class="container">
<div class="page-header" align=" center">
<h2 >Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP</h2>
<h4>maribelajarcoding.com</h4>
</div>
<div class="row">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading"><b>Data Produk</b></div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Produk</th>
<th>Jml Item</th>
</tr>
</thead>
<tbody id="DatatTabelProduk">
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading"><b>Grafik Data</b></div>
<div class="panel-body">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
$.getJSON( "http://localhost:/chart-pie/data-produk.php", function( data ) {
var TabelData="";
$(data).each(function(i){
TabelData +="<tr><td>"+data[i].NamaProduk+"</td><td>"+data[i].JmlItem+"</td></tr>";
});
//tampilkan di tabel id DataTabelProduk
$("#DatatTabelProduk").html(TabelData);
//array untuk chart label dan chart data
var isi_labels = [];
var isi_data=[];
var TotalJml = 0;
//menghitung total jumlah item
data.forEach(function (obj) {
TotalJml += Number(obj["JmlItem"]);
});
//push ke dalam array isi label dan isi data
var JmlItem = 0;
$(data).each(function(i){
isi_labels.push(data[i].NamaProduk);
//jml item dalam persentase
isi_data.push(((data[i].JmlItem/TotalJml) * 100).toFixed(2));
});
//deklarasi chartjs untuk membuat grafik 2d di id mychart
var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx, {
//chart akan ditampilkan sebagai pie chart
type: 'pie',
data: {
//membuat label chart
labels: isi_labels,
datasets: [{
label: 'Data Produk',
//isi chart
data: isi_data,
//membuat warna pada chart
backgroundColor: [
'rgb(26, 214, 13)',
'rgb(235, 52, 110)',
'rgb(52, 82, 235)',
'rgb(138, 4, 113)',
'rgb(214, 134, 13)'
],
//borderWidth: 0, //this will hide border
}]
},
options: {
//konfigurasi tooltip
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var labels = data.labels[tooltipItem.index];
var currentValue = dataset.data[tooltipItem.index];
return labels+": "+currentValue+" %";
}
}
}
}
});
});
</script>
</body>
</html>
Tutorial membuat grafik Pie persentase dengan chart.js dan PHP telah selesai,sekian semoga bermanfaat.
Related search
Membuat grafik pie dengan PHP
Show percentages on Pie/Doughnut chart.js
Related search
Membuat grafik pie dengan PHP
Show percentages on Pie/Doughnut chart.js