Membuat Grafik Dinamis di PHP dengan MySQL Part 2

Halo Sahabat programmer kembali lagi saya akan membagikan artikel mengenai cara membuat grafik dinamis di PHP dengan MySQL. Tutorial ini merupakan seri lanjutan dari artikel sebelumnya tentang membuat chart di PHP. Pada tutorial kali ini berbeda dengan pada part 1. yang mana pada part kedua ini saya akan membuat grafik dinamis dengan menggunakan perbandingan data. Oleh sebab itu jika kalian belum pernah membuat chart di PHP sebaiknya baca dulu pada artikel yang saya beri link diatas.

Grafik akan menampilkan dua variabel data. Misalnya Menampilkan data jumlah mahasiswa per jurusan pada tahun 2019 dan 2020. atau grafik berdasarkan versi A atau B.

Kita akan melanjutkan pada contoh kasus, sebelumnya kita menampilkan grafik data mahasiswa berdasarkan jurusannya. namun kita akan membuat grafik dengan menampilkan perbandingan dari dua buah tabel mahasiswa. Ikuti langkah-langkahnya dibawah ini:

Membuat Database

Buatlah sebuah database baru dengan nama akademik.

 create database akademik; 

Selanjutnya kita buat tabel mahasiswa1

create table mahasiswa1 (
    nik char(10) not null primary key,
    nama varchar(50) not null,
    jk char(1),
    tanggal_lhr date,
    jurusan char(2),
    umur int
    );

Buat kembali tabel mahasiswa2

create table mahasiswa2 (
    nik char(10) not null primary key,
    nama varchar(50) not null,
    jk char(1),
    tanggal_lhr date,
    jurusan char(2),
    umur int
    );

Sekarang kita input beberapa contoh data mahasiswa kedalam masing-masing tabel tersebut

Insert pada tabel mahasiswa1

INSERT INTO mahasiswa1
VALUES ('135410156','Ahmad Riko','1','1995-02-23','TI',22),
('135610157','Dahlan Iskan','1','1998-03-26','SI',20),
('135410189','Wawan Setiawan','1','1993-02-13','TI',23),
('135310156','Safitri Ayu','2','1995-09-01','TK',22),
('135310150','Rian Hidayat','1','1997-08-05','TK',20),
('135510920','Dani Hermawan','1','1996-05-05','SI',23),
('135518322','Nita Daniyatun','2','1994-09-05','TI',23),
('135518900','Mili Wilian','2','1995-10-08','SI',22),
('135510190','Marshel Saraun','1','1993-10-23','MI',23),
('135510191','Nacha Saraun','2','1995-01-13','MI',20),
('135558944','Bayu Mandalika','1','1997-01-15','SI',19),
('158984545','Juan Burnama','1','1993-01-20','SI',24),
('158549583','Candra Sidauruk','1','1994-10-22','TK',23),
('136349343','Kory Ubi','2','1992-10-29','MI',25),
('147343998','Chika Lestari','2','1996-11-12','MI',21);

Insert pada tabel mahasiwa2

INSERT INTO mahasiswa2
VALUES ('125410187','Marlina','2','1997-02-13','TI',21),
('135610133','Badran','1','1998-03-27','SI',22),
('135610098','Dwi Handayani','1','1993-03-13','SI',23),
('135410198','Efendi','1','1995-09-02','TI',21),
('135610120','Naomi Saputra','2','1996-08-01','SI',20),
('135310940','Randi Supra','1','1996-05-07','TK',22),
('135518321','Siti Fatonah','2','1994-10-03','SI',21),
('135410151','Eko Safrudin','1','1995-10-09','TI',22),
('135510100','Melinda','2','1995-10-13','MI',23),
('135510184','Aprilio','1','1995-01-09','MI',21),
('135458924','Juanda Marlin','1','1997-01-19','TI',21),
('158984895','Jeko Putra','1','1993-01-20','TK',21),
('158549509','Roland','1','1994-10-21','TK',23),
('136349334','Fajriana','2','1992-10-21','TK',20),
('147342938','Badrun','1','1996-09-123','TI',21);

Jalankan semua query diatas, jika tidak ada yang error maka data pada kedua tabel berhasil kita tambahkan.

Untuk mengambil nilai agregat dari masing-msing tabel kita gunakan perintah SQL count dengan membuat group data berdasarkan jurusan. Bukan hanya jurusan, kalian bisa juga meng-grouping berdasarkan jenis kelamin ataupun umur, namun pada tutorial ini saya mengelompokan data mahasiswa berdasarkan jurusan. Berikut ini adalah query SQL-nya.

Mengelompokan Data pada Tabel mahasiswa1

SELECT jurusan,COUNT(*) as 'total' FROM mahasiswa1 GROUP BY jurusan

Mengelompokan Data pada Tabel mahasiswa2

SELECT jurusan,COUNT(*) as 'total' FROM mahasiswa2 GROUP BY jurusan

Terlihat dari kedua query diatas kita telah berhasil mengelompokan data mahasiswa berdasarkan jurusan disertai dengan jumlahnya. Nantinya dengan query inilah akan kita gunakan untuk menyajikan perbandingan data pada grafik dinamis di PHP.

Mendownload Chart.js

Chart.js adalah chart yang bisa kita gunakan untuk membuat cart di PHP. Banyak keunggulan yang ditawarkan oleh plugin open source ini, diatantaranya; penggunaan yang mudah, telah support canvas html 5, dan bisa menampilkan berbagai macam jenis grafik.

Untuk menggunakan chart.js ada dua cara yang pertama kita bisa menggunakan metode CDN (Content Delivery Network) dimana kalian bisa langsung mengakses plugin tersebut pada URL berikut:

https://cdnjs.com/libraries/Chart.js

Namun sebaiknya kalian langsung mendownload dan menyimpannya kedalam driver komputer kalian, agar supaya bisa mengakses plugin tanpa harus koneksi internet.

Cara downloadnya sangat mudah, kunjungi pada link berikut:

Download Chart.js v2.8.0

Kalian akan masuk pada situs github.com, silahkan langsung scroll ke bagian bawah, terdapat 8 file pada bagian assets. Pilih Chart.js untuk mendownload.

Membuat Grafik Dinamis di PHP

Selanjutnya buatlah sebuah file PHP dengan nama index.php pada text editor yang kalian miliki, isi file nya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <script src="js/Chart.js"></script>
</head>
<body>
    <br>
    <h4>Cara Membuat Grafik (Chart) di PHP dengan Chart.js</h4>
    <canvas id="myChart"></canvas>
    <?php
    $kon = mysqli_connect("localhost","root","","akademik");
    //Query untuk menampilkan tabel mahasiswa1
        $nama_jurusan1= "";
        $jumlah1=null;

        $sql="select jurusan,COUNT(*) as 'total' from mahasiswa1 GROUP by jurusan";

    $hasil=mysqli_query($kon,$sql);

    while ($data = mysqli_fetch_array($hasil)) {
        $jur1=$data['jurusan'];
        $nama_jurusan1 .= "'$jur1'". ", ";

        $jum1=$data['total'];
        $jumlah1 .= "$jum1". ", ";
    }
    //Query untuk menampilkan tabel mahasiswa2
    $nama_jurusan2= "";
    $jumlah2=null;

    $sql="select jurusan,COUNT(*) as 'total' from mahasiswa2 GROUP by jurusan";

    $hasil=mysqli_query($kon,$sql);

    while ($data = mysqli_fetch_array($hasil)) {
        $jur2=$data['jurusan'];
        $nama_jurusan2 .= "'$jur2'". ", ";

        $jum2=$data['total'];
        $jumlah2 .= "$jum2". ", ";
    }
    ?>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: [<?php echo $nama_jurusan1; ?>],
            datasets: [{
                label:'Data Jurusan Mahasiswa 1',
                backgroundColor: ['rgb(255, 99, 132)', 'rgba(56, 86, 255, 0.87)', 'rgb(60, 179, 113)','rgb(175, 238, 239)'],
                borderColor: ['rgb(255, 99, 132)'],
                data: [<?php echo $jumlah1; ?>]
            },
                {
                    label:'Data Jurusan Mahasiswa 2',
                    backgroundColor: ['rgb(255, 99, 132)', 'rgba(56, 86, 255, 0.87)', 'rgb(60, 179, 113)','rgb(175, 238, 239)'],
                    borderColor: ['rgb(255, 99, 132)'],
                    data: [<?php echo $jumlah2; ?>]
                }
            ]
        },

        // Configuration options go here
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

</body>
</html>

Perhatikan pada bagian <head> saya meload plugin chart.js yang telah saya download sebelumnya dan saya simpan didalam folder js.

  <script src="js/Chart.js"></script>

Grafik akan ditampilkan melalui tag <canvas> dengan memanggil atribut id denga nilai myChart

 <canvas id="myChart"></canvas>

Jika kalian mengikuti sesuai langkah-langkah yang saya berikan diatas, ketika dijalankan pada localhost, hasilnya akan seperti pada gambar dibawah ini:

grafik (chart) dinamis di php dengan mysql

Jenis chart yang saya gunakan adalah bar chart, karena untuk menampilkan perbandingan data memang sangat cocok menggunakan jenis ini. Namun kalian juga bisa mengganti dengan jenis yang lain pada bagian ‘type‘ ganti nilai dari atribut tersebut dengan jenis lain misalnya; line, pie, radar, area, bubble dan lainnya.

Baca artikel lainnya : Cara membuat grafik di CodeIgniter

Demkian tutorial singkat mengenai cara membuat grafik dinamis di PHP dengan MySQL. Semoga bermanfaat buat teman-teman semua. Jangan lupa kirim komentar kalian dibawah postingan ini jika ada yang ingin ditanyakan. Sampai jumpa !