Membuat Grafik Batang dengan PHP Berdasarkan Data Dari Database

ullprasetio April 09, 2020
Membuat Grafik Berdasarkan Data Dari Database - Hai, berjumpa lagi, pada artikel kali ini kita akan membuat grafik yang biasa digunakan di aplikasi web yang datanya diambil dari database.

Disini kita akan menggunakan PHP dan library chart.js untuk menampilkan datanya. Sebagaimana yang kita ketahui ada beberapa jenis grafik / diagram diantaranya adalah diagram batang, garis dan lingkaran.

Disini kita hanya akan membuat grafik / diagram batang saja.

Sebagai contoh, saya sudah membuat database dengan nama "ex" dan didalamnya terdapat tabel dengan nama "tb_jurusan". Berikut adalah struktur tabel "tb_jurusan":

struktur tabel tb_jurusan untuk grafik pada aplikasi web
Struktur table tb_jurusan

Dan sudah menambahkan beberapa data didalamnya:

Data dalam tb_jurusan untuk ditampilkan pada grafik
Data pada tb_jurusan

Lalu, buat file baru dengan nama index.php

index.php

<?php
$con = mysqli_connect('localhost', 'root', '', 'ex');
?>

<!DOCTYPE html>
<html>
<head>
 <title>Chart.js</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
 <div style="width: 600px; height: 250px; margin-bottom: 100px;">
  <canvas id="bar-chart" width="800" height="450"></canvas>
 </div>
 
 <script type="text/javascript">
  // Bar chart
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
        labels: ["RPL", "MM", "TKR", "AP"],
        datasets: [
          {
            label: "Jumlah siswa",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"],
            data: [

            <?php

            $query = mysqli_query($con, "SELECT * FROM tb_jurusan WHERE nama_jurusan = 'RPL'");
            $jumlah = $query->fetch_assoc();

            echo $jumlah['jumlah_anak'];

            ?>

            ,

            <?php

            $query = mysqli_query($con, "SELECT * FROM tb_jurusan WHERE nama_jurusan = 'MM'");
            $jumlah = $query->fetch_assoc();

            echo $jumlah['jumlah_anak'];

            ?>

            ,

            <?php

            $query = mysqli_query($con, "SELECT * FROM tb_jurusan WHERE nama_jurusan = 'TKRO'");
            $jumlah = $query->fetch_assoc();

            echo $jumlah['jumlah_anak'];

            ?>

            ,

            <?php

            $query = mysqli_query($con, "SELECT * FROM tb_jurusan WHERE nama_jurusan = 'AP'");
            $jumlah = $query->fetch_assoc();

            echo $jumlah['jumlah_anak'];

            ?>

            ,0]
          }
        ]
      },
      options: {
        legend: { display: false },
        title: {
          display: true,
          text: 'Peserta didik tahun pelajaran 2019/2020'
        }
      }
  });
 </script>

Dan hasilnya akan seperti gambar berikut.

Output data yang diambil dari database
Output data dari database


Berikut penjelasan untuk kode yang tadi kita buat.

$con = mysqli_connect('localhost', 'root', '', 'ex');

Kode diatas digunakan untuk koneksi ke database, ubah tulisan ex jika nama database kalian berbeda.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

Script diatas adalah untuk memanggil library chart.js, jadi kalian harus tersambung ke internet untuk bisa menampilkan grafiknya.

<?php

            $query = mysqli_query($con, "SELECT * FROM tb_jurusan WHERE nama_jurusan = 'RPL'");
            $jumlah = $query->fetch_assoc();

            echo $jumlah['jumlah_anak'];

            ?>

Kode diatas adalah perintah untuk mengambil semua data dari tb_jurusan berdasarkan nama_jurusan RPL. Ubah kode ini jika kalian akan mengambil data yang berbeda sesuai query yang kalian gunakan.
Tags:

Posting Komentar

0 Komentar