Membuat Grafik Lingkaran (Pie Chart) Denga Chartjs + PHP + MySQL

Diartikel sebelumnya saya sudah membahas membuat grafik berbasis web dengan Chart.JS, membuat grafik batang dengan PHP + MySql dan membuat grafik garis dengan PHP + MySql, dan di artikel ini saya akan membahas membuat grafik lingkaran dengan Chart.JS yang sumber datanya berasal dari database MySQL dengan menggunakan PHP (untuk bahasa pemrograman lain tinggal manyesuaikan saja).

Tools yang digunakan

  • PHP
  • MySQL / MariaDB
  • Chart.JS

Buat tabel

CREATE TABLE smartphone (
  ID INT NOT NULL AUTO_INCREMENT,
  Merk VARCHAR(45) NOT NULL,
  Penjualan INT NOT NULL,
  PRIMARY KEY ('ID'));

Insert Data

INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Samsung', '100');
INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Apple', '89');
INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Sony', '67');
INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Motorola', '72');
INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Oppo', '88');
INSERT INTO `smartphone` (`Merk`, `Penjualan`) VALUES ('Xiaomi', '80');

Load data

Berikutnya buat file PHP untuk menampilkan datanya dalam bentuk chart. Misal kita kasi nama filenya index.php :


<?php
$koneksi     = mysqli_connect("localhost", "root", "xxxxxx", "latihan");
$penjualan      = mysqli_query($koneksi, "SELECT Penjualan FROM smartphone order by ID asc");
$merek = mysqli_query($koneksi, "SELECT Merk FROM smartphone order by ID asc");
 ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo Grafik Lingkaran</title>
    <script src="js/Chart.js"></script>
    <style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
    </style>
  </head>
  <body>

    <div class="container">
            <canvas id="demobar" width="100" height="100"></canvas>
    </div>

      	<script  type="text/javascript">

    	  var ctx = document.getElementById("demobar").getContext("2d");
    	  var data = {
    	            labels: [<?php while ($p = mysqli_fetch_array($merek)) { echo '"' . $p['Merk'] . '",';}?>],
    	            datasets: [
    	            {
    	              label: "Penjualan Smartphone",
    	              data: [<?php while ($p = mysqli_fetch_array($penjualan)) { echo '"' . $p['Penjualan'] . '",';}?>],
                    backgroundColor: [
                      "rgba(59, 100, 222, 1)",
                      "rgba(203, 222, 225, 0.9)",
                      "rgba(102, 50, 179, 1)",
                      "rgba(201, 29, 29, 1)",
                      "rgba(81, 230, 153, 1)",
                      "rgba(246, 34, 19, 1)"]
    	            }
    	            ]
    	            };

    	  var myBarChart = new Chart(ctx, {
    	            type: 'pie',
    	            data: data,
    	            options: {
                    responsive: true
    	          }
    	        });
    	</script>

  </body>
</html>

Berikut hasilnya:

Grafik Batang

Download Project : DemoChartPie.zip