Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP - Mari Belajar Coding

05 Desember 2019

Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP

maribelajarcoding       ,   
Membuat Grafik Pie Persentase dengan Chart.js dan PHP

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
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.
Membuat Grafik Pie Persentase dengan Chart.js dan PHP

 Download Plugin Chart.js, Jquery dan framework Bootstrap, kemudian ekstrak hasil download tadi seperti gambar dibawah ini.
Membuat Grafik Pie Persentase dengan Chart.js dan PHP

 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.

<!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 Posts

Load comments