Menampilkan Data Persen di Dalam Chart.js

Data yang berada di dalam sebuah grafik yang dibuat menggunakan chart.js bisa ditampilkan dalam hitungan persen. Dalam tutorial sebelumnya dibahas tentang bagaimana menampilkan sebuah data menggunakan php dan chartjs berdasarkan jenis kelamin, di dalam tutorial tersebut kita hanya menampilkan jumlah data per-jenis kelamin saja, tidak menampilkannya dalam hitungan persen. Untuk dapat menampilkannya dalam hitungan persen Anda perlu mengikuti langkah – langkah berikut ini :

Baca dulu tutorial sebelumnya : Membuat Grafik Berdasarkan Jenis Kelamin Menggunakan Chart.js

Cara Menampilkan Data Persen di Dalam Chart.js Menggunakan PHP

Data yang akan ditampilkan di dalam chart.js merupakan jenis grafik pie chart lingkaran, dimana nantinya, nilai persen yang ada di dalam grafik tersebut diambil dari perhitungan yang dilakukan oleh php. Perhitungan akan dilakukan dengan cara menjumlahkan data keseluruhan baik perempuan atau laki – laki, selanjutnya jumlah data tersebut akan menjadi pembagi nilai dari masing – masing data (laki laki dan perempuan) dikalikan 100

Rumus : Jumlah per-jenis kelamin/jumlah keseluruhan * 100 = hasil

Mahasiswa.function.php
Tambhkan baris function baru untuk melakukan perhitungan pada file mahasiswa.function.php sebelumnya.

function Jumlah_data($nilai_1, $nilai_2){
 return($nilai_1+$nilai_2);
}
function Nilai_Persen($nilai_1, $nilai_2){
 return(($nilai_1/$nilai_2)*100).'%';
}

Mahasiswa.php
Selanjutnya panggil kedua function sebelumnya untuk melakukan perhitungan dan mencari berapa nilai persen per-jenis kelamin yang ada. Nilai – nilai perhitungan bisa disimpan di dalam variabel, yang kemudian variabel hasil perhitungan tersebut dipanggil di dalam label javascript untuk ditampilkan didalam chart.js, data persen akan tampil di dalam label dan di dalam grafik pie chart dalam bentuk tooltips

<?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: 400PX;
 }
 #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
 
 $tampil=Chart_Tampil_JK();
 $tampilkan=mysqli_fetch_array($tampil);
 $jumlah_data=Jumlah_data($tampilkan['jumlah_pria'], $tampilkan['jumlah_perempuan']);
 $jumlah_pria=Nilai_Persen($tampilkan['jumlah_pria'], $jumlah_data);
 $jumlah_perempuan=Nilai_Persen($tampilkan['jumlah_perempuan'], $jumlah_data);
 ?>
<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:<?php echo $jumlah_pria; ?>","Perempuan:<?php echo $jumlah_perempuan; ?>"],
    datasets: [{
    label: '',
      data: [<?php echo $tampilkan['jumlah_pria']; ?>, <?php echo $tampilkan['jumlah_perempuan']; ?>],
      backgroundColor: ['#007bff', '#dc3545'],
    }],
  },
});
</script>

Video tutorial menampilkan nilai persen didalam chart.js

[ 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

Menampilkan Data Persen di Dalam Chart.js

1 Response to "Menampilkan Data Persen di Dalam Chart.js"