Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP

Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP - Hallo sahabat Teman Koding, Pada Artikel yang anda baca kali ini dengan judul Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP
link : Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP

Baca juga


Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP

Tutorial kali ini kami dapat belajar mengakibatkan sebuah grafik Pie dengan plugin Chart.js dan PHP Mysql. Pie Chart merupakan sebuah grafik untuk menyajikan information di dalam wujud lingkaran, kami juga mampu menyajikan information di dalam wujud donat(doughnut chart).  


Cara Buat Grafik Persentase (%) Pie 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 membuat dan insert information kedalam tabel produk, sesudah itu kami dapat membuat sebuah json information memanfaatkan PHP. Simpan kode dibawah ini bersama 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 di dalam bentuk json jika di buka melalui browser seperti gambar di bawah ini. 
Membuat Grafik Pie Persentase  dengan Chart.js dan PHP

Download Plugin Chart.jsJquery 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>

Kode lengkapnya seperti dibawah ini, simpan dengan nama file index.php.

<!DOCTYPE html>
<html>
<head>
 <title>temankoding.site</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>temankoding.site</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.


Demikianlah Artikel Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP

Sekianlah artikel Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP dengan alamat link http://www.temankoding.site/2021/02/cara-buat-grafik-persentase-pie-dengan.html

Tidak ada komentar untuk "Cara Buat Grafik Persentase (%) ] Pie dengan Chart.js dan PHP"