Cara Membuat Grafik dari Php dan Database MySQL dengan Chart Js

Share:

Cara Membuat Grafik dari Database MySQL dengan Chart Js. Assalamualaikum, halo semuanya kembali lagi di sahretech. Kali ini mimin akan memberikan tutorial cara mengolah data dari database menjadi grafik yang mudah dibaca. Penasaran ? Ikuti tutorialnya berikut ini.

Chart atau grafik adalah salah satu fitur yang biasa ada di aplikasi laporan, pasalnya dengan adanya grafik pembacaan data menjadi lebih mudah dipahami. Bagi kamu sang programmer, tidak lengkap rasanya jika tidak memahami cara membuat grafik di php. Dan untungnya saat ini ada library javascript yang cukup membantu para developer untuk membuat aplikasi yang dibangun menjadi lebih interaktif yaitu chart js





Chart Js adalah library javascript yang memanfaatkan element canvas untuk membuat grafik yang akan ditampilkan di web. Kalian bisa mengunjungi situsnya di chartjs.org. Ada banyak pilihan chart atau bagan yang bisa kalian gunakan, itu semua tergantung kebutuhan kalian. Berikut beberapa daftar bagannya.

list chart - sahretech
Daftar ChartJs yang bisa dimanfaatkan

Pada tutorial kali ini kita akan menggunakan vertical bar chart untuk pengolahan data sederhana. Intinya agar kalian mudah memahaminya, dan bagi yang ingin tau lebih lanjut bagaimana cara membuat grafik yang lebih kompleks kalian bisa membuka halaman dokumentasi chart js.

Cara Membuat Chart Js Perbandingan Jumlah Jenis Kelamin

Intro : Pada tutorial kali ini kita akan mengolah data mahasiswa, dimana kita akan menampilkan perbandingan jumlah mahasiswa jenis kelamin laki-laki dan perempuan. Artinya kita membutuhkan 2 buah bar / batang yang merepresentasikan jumlah laki-laki dan jumlah perempuan. Ok kita langsung masuk :

  • 1. Buatlah sebuah database baru bernama latihan
  • 2. Buat sebuah tabel latihan seperti gambar di bawah ini dan jangan lupa disi dengan beberapa record data
tabel mahasiswa - sahretech
tabel mahasiswa


  • Atau biar cepat buatlah sebuah file baru bernama mahasiswa.sql. Isi file tersebut dengan script di bawah ini. 
  • Import mahasiswa.sql ke database latihan, caranya masuk ke database latihan > import > pilih file > klik go untuk melanjutkan.

-- phpMyAdmin SQL Dump
-- version 4.9.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 05 Apr 2020 pada 17.43
-- Versi server: 10.4.11-MariaDB
-- Versi PHP: 7.3.13

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `latihan`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `mahasiswa`
--

CREATE TABLE `mahasiswa` (
  `idmahasiswa` int(11) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jk` enum('laki-laki','perempuan') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data untuk tabel `mahasiswa`
--

INSERT INTO `mahasiswa` (`idmahasiswa`, `nama`, `jk`) VALUES
(1, 'nabil putra', 'laki-laki'),
(2, 'nabilah putri', 'perempuan'),
(3, 'bill gates', 'laki-laki'),
(4, 'neymar', 'laki-laki'),
(5, 'kevin', 'laki-laki'),
(6, 'fitri', 'perempuan'),
(7, 'eko cahyono', 'laki-laki'),
(8, 'Dwi cahyani', 'perempuan'),
(9, 'raden', 'laki-laki'),
(10, 'silvia', 'perempuan'),
(11, 'chen', 'laki-laki');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
  ADD PRIMARY KEY (`idmahasiswa`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `mahasiswa`
--
ALTER TABLE `mahasiswa`
  MODIFY `idmahasiswa` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;



  • 4. Setelah semua data berhasil diimport langkah selanjutnya adalah membuat folder baru bernama latihangrafik dan lalu buatlah file baru bernama index.php di dalamnya. Lalu ikuti scriptnya seperti di bawah ini.

<?php
//melakukan koneksi ke database
// host = localhost, user = root, password = '', database = latihan
$koneksi        = mysqli_connect("localhost", "root", "", "latihan");

//ambil data mahasiswa dimana jenis kelamin adalah laki-laki
$lakilaki       = mysqli_query($koneksi, "SELECT jk FROM mahasiswa WHERE jk = 'laki-laki' ");

//ambil data mahasiswa dimana jenis kelamin adalah perempuan
$perempuan      = mysqli_query($koneksi, "SELECT jk FROM mahasiswa WHERE jk = 'perempuan' ");
?>
<html>
    <head>
        <title>Belajar Chart</title>

        <!-- import library chart menggunakan cdn -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
        <style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <canvas id="myChart" ></canvas>
        </div>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                // tipe chart
                type: 'bar',
                data: {

                    //karena hanya menggunakan 2 batang
                    //maka buat dua lebel, yaitu lebel laki-laki dan perempuan
                    labels: ['Laki-laki', 'Perempuan'],

                    //dataset adalah data yang akan ditampilkan
                    datasets: [{
                            label: 'jumlah mahasiswa',

                            //karena hanya menggunakan 2 batang/bar
                            //maka 2 sql yang dibutuhkan
                            //hitung jumlah mahasiswa laki-laki dan jumlah mahasiswa perempuan
                            data: [
                                <?php echo mysqli_num_rows($lakilaki); ?>,
                                <?php echo mysqli_num_rows($perempuan);?>,
                            ],

                            //atur background barchartnya
                            //karena cuma dua, maka 2 saja yang diatur
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)'
                            ],

                            //atur border barchartnya
                            //karena cuma dua, maka 2 saja yang diatur
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)'
                            ],
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    }
                }
            });
        </script>
    </body>
</html>


  • 5. Jalankan di browser kalian, maka hasilnya akan tampak seperti gambar di bawah ini. grafik laki-laki ditunjukkan dengan warna merah cerah dan grafik perempuan ditunjukkan dengan warna biru jika dikalkulasi keduanya maka jumlahnya sama dengan yang ada di database
chart mahasiswa - sahretech
Hasil chart dengan data mahasiswa


Penjelasan script di atas :
  • Line 4 : Menambahkan koneksi ke database
  • Line 5 : Mengambil data hanya mahasiswa laki-laki
  • Line 5 : Mengambil data hanya mahasiswa perempuan
  • Line 38 : Memberi label untuk masing-masing bar chart
  • Line 48 : Menghitung total data mahasiswa laki-laki
  • Line 49 : Menghitung total data mahasiswa perempuan
  • Line 55 - 56 : Memberi background color untuk setiap bar chart
  • Line 62 - 63 : Memberi border color untuk setiap bar chart

Penjelasan script di atas sekaligus menjadi parameter yang harus di isi dalam menggunakan bar chartjs. Jika kita simulasikan ke data lain, yaitu menghitung jumlah mahasiswa berdasarkan jurusan maka kita perlu
  • menambahkan koneksi ke database, dan mengambil data mahasiswa per jurusan
  • menambahkan label jurusan sebanyak jurusan yang ada, misalkan ada 5 jurusan maka buat lima label
  • pada dataset tambahkan label 'jurusan'
  • pada dataset tambahkan 5 data jurusan yang telah dicount/dihitung
  • tambahkan background dan border color sesuai jumlah jurusan

saya rasa tutorial singkat ini sangat mudah unutk dipahami asalkan kalian semua sudah mengerti dasar-dasar CRUD pada aplikasi berbasis php dan untuk chartnya sendiri kalian hanya mengubah beberapa parameter atau kodingan saja.

Baca artikel tutorial pemrograman seru lainnya :


Cukup sekian tutorial Cara Membuat grafik dari Php dan Database MySQL dengan ChartJs. Semoga tutorial ini dapat membantu kalian semua. Kurang lebihnya saya mohon maaf, apabila ada kritik, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding dan sampai jumpa di tutorial selanjutnya :) 



4 comments:

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi