Membuat Grafik Interaktif dengan PHP MySQL dan Chart.js di Laragon

July 25, 2025
oleh Edusoft Center

Daftar Isi

Pendahuluan
Persiapan Project
Struktur Project
Membuat Database dan Tabel MySQL
Menyambungkan PHP ke MySQL
Menampilkan Data Statistik
Membuat Grafik dengan Chart.js
Hasil Ahkir
Penutup

1. Pendahuluan

Kali ini kita akan belajar bagaimana cara membuat Diagram Statistik. Diagram statistik ini sangat berguna dalam berbagai aplikasi seperti sistem manajemen, laporan penjualan, atau monitoring kehadiran. Dalam artikel ini kita akan membangun sebuah dashboard dengan diagram, yang dapat menampilkan data dari database dalam bentuk grafik interaktif menggunakan Chart.js, PHP, dan MySQL di lokal server Laragon.

2. Persiapan Project

Yang akan kamu butuhkan:

Laragon (alternatif XAMPP, ringan dan cepat)
PHP versi 7+ atau 8+
MySQL (bawaan dari Laragon)
Chart.js (untuk membuat grafik)
Bootstrap (opsional, untuk mempercantik tampilan)

3. Struktur Project

NamaProject/
│
├── index.php
├── data.php
├── koneksi.php
├── /assets/
│ └── chart.min.js

4. Membuat Data dan Tabel MySQL

Buat database dan tabel ini di phpMyAdmin Laragon atau bisa juga lewat CMD MySQL

Buka File Explorer –> Folder laragon mu –> bin –> mysql –>mysql-8.0.30-winx64 –> bin –> Ketikan CMD pada path –> lalu tekan enter

CREATE DATABASE IF NOT EXISTS db_statistik;
USE db_statistik;

CREATE TABLE siswa (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama VARCHAR(100),
    jurusan VARCHAR(50)
);

INSERT INTO siswa (nama, jurusan) VALUES
('Ali', 'RPL'),
('Budi', 'RPL'),
('Citra', 'TKJ'),
('Dina', 'TKJ'),
('Eka', 'RPL'),
('Fajar', 'MM'),
('Gita', 'TKJ'),
('Hani', 'MM'),
('Ivan', 'TKJ'),
('Joko', 'MM');

Dimana nanti format data tabel yang kalian buat akan seperti ini :

+---------+--------------+------+-----+---------+----------------+
| Field   | Type         | Null | Key | Default | Extra          |
+---------+--------------+------+-----+---------+----------------+
| id      | int          | NO   | PRI | NULL    | auto_increment |
| nama    | varchar(100) | YES  |     | NULL    |                |
| jurusan | varchar(50)  | YES  |     | NULL    |                |
+---------+--------------+------+-----+---------+----------------+

5. Menyambungkan PHP ke MySQL

Masukkan kode berikut ke dalam file koneksi.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "db_statistik";

$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
    die("Koneksi gagal: " . $conn->connect_error);
}
?>

6. Menampilkan Data Statistik

Masukkan kode ini ke dalam file data.php

<?php
include 'koneksi.php';

$query = "SELECT jurusan, COUNT(*) as jumlah FROM siswa GROUP BY jurusan";
$result = $conn->query($query);

$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

echo json_encode($data);
?>

7. Membuat grafik dengan chart.js

Masukkan kode berikut ke dalam file index.php kalian

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Dashboard Statistik Siswa</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .chart-container { width: 600px; margin: auto; }
        h2 { text-align: center; }
    </style>
</head>
<body>

<h2>Statistik Siswa per Jurusan</h2>
<div class="chart-container">
    <canvas id="barChart"></canvas>
</div>

<br>

<div class="chart-container">
    <canvas id="pieChart"></canvas>
</div>

<script>
    
fetch('data.php')
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.jurusan);
        const values = data.map(item => item.jumlah);

        const barCtx = document.getElementById('barChart').getContext('2d');
        const pieCtx = document.getElementById('pieChart').getContext('2d');

      

        new Chart(pieCtx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Jumlah Siswa',
                    data: values,
                    backgroundColor: [
                        '#ff6384',
                        '#36a2eb',
                        '#ffcd56',
                        '#4bc0c0',
                        '#9966ff'
                    ]
                }]
            }
        });
    });
</script>
</body>
</html>

Kemudian, unduh Chart.js dari https://www.chartjs.org/download/ dan taruh di /assets/chart.min.js

Atau bisa juga Unduh langsung dari CDNJS (lebih cepat dan stabil)

Salin dan tempelkan tag <script> ini langsung ke dalam file index.php kamu, tanpa perlu unduh file .js secara manual

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Letakkan sebelum </head> atau tepat sebelum <script> JavaScript kamu seperti ini :

9. Hasil Akhir

Grafik batang dan pie akan menampilkan jumlah siswa per jurusan.
Data bersumber langsung dari database MySQL.
Bisa kamu sesuaikan untuk statistik lainnya seperti presensi, aktivitas, nilai, dll.

Contoh Hasil Dashboard yang menggunakan statistik data juga :

Kalau kamu ingin membuat tampilan dashboard seperti itu, kamu bisa masukkan kode ini untuk mengganti kode index.php kamu

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Statistik Siswa</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .dashboard-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #4a5568;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #718096;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .chart-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .chart-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
        }

        .chart-container {
            position: relative;
            height: 400px;
        }

        .additional-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .detail-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .detail-card h3 {
            color: #2d3748;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .detail-list {
            list-style: none;
        }

        .detail-list li {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
            color: #4a5568;
        }

        .detail-list li:last-child {
            border-bottom: none;
        }

        .percentage {
            font-weight: 600;
            color: #667eea;
        }

        @media (max-width: 768px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .chart-container {
                height: 300px;
            }
        }

        .refresh-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.2s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="header">
            <h1>📊 Dashboard Statistik Siswa</h1>
            <p>Analisis Data Siswa per Jurusan - Tahun Ajaran 2024/2025</p>
            <br>
            <button class="refresh-btn" onclick="refreshData()">🔄 Refresh Data</button>
        </div>

        <div class="stats-grid" id="statsGrid">
            <!-- Stats cards will be populated by JavaScript -->
        </div>

        <div class="charts-grid">
            <div class="chart-card">
                <h3 class="chart-title">📊 Distribusi Siswa per Jurusan (Bar Chart)</h3>
                <div class="chart-container">
                    <canvas id="barChart"></canvas>
                </div>
            </div>

            <div class="chart-card">
                <h3 class="chart-title">🥧 Persentase Siswa per Jurusan (Pie Chart)</h3>
                <div class="chart-container">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
        </div>

        <div class="additional-stats">
            <div class="detail-card">
                <h3>📈 Detail Statistik</h3>
                <ul class="detail-list" id="detailStats">
                    <!-- Detail stats will be populated by JavaScript -->
                </ul>
            </div>

            <div class="detail-card">
                <h3>🎯 Ringkasan</h3>
                <ul class="detail-list" id="summary">
                    <!-- Summary will be populated by JavaScript -->
                </ul>
            </div>
        </div>
    </div>

    <script>
        // Data dummy untuk demonstrasi
        const studentData = [
            { jurusan: 'Teknik Informatika', jumlah: 245 },
            { jurusan: 'Sistem Informasi', jumlah: 198 },
            { jurusan: 'Teknik Elektro', jumlah: 167 },
            { jurusan: 'Manajemen', jumlah: 223 },
            { jurusan: 'Akuntansi', jumlah: 189 },
            { jurusan: 'Teknik Mesin', jumlah: 134 },
            { jurusan: 'Psikologi', jumlah: 156 }
        ];

        let barChart, pieChart;

        // Fungsi untuk membuat stats cards
        function createStatsCards(data) {
            const total = data.reduce((sum, item) => sum + item.jumlah, 0);
            const maxJurusan = data.reduce((max, item) => item.jumlah > max.jumlah ? item : max);
            const avgStudents = Math.round(total / data.length);

            const statsGrid = document.getElementById('statsGrid');
            statsGrid.innerHTML = `
                <div class="stat-card">
                    <div class="stat-number">${total}</div>
                    <div class="stat-label">Total Siswa</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${data.length}</div>
                    <div class="stat-label">Jumlah Jurusan</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${avgStudents}</div>
                    <div class="stat-label">Rata-rata per Jurusan</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${maxJurusan.jumlah}</div>
                    <div class="stat-label">Jurusan Terbanyak</div>
                </div>
            `;
        }

        // Fungsi untuk membuat detail stats
        function createDetailStats(data) {
            const total = data.reduce((sum, item) => sum + item.jumlah, 0);
            const detailStats = document.getElementById('detailStats');
            
            detailStats.innerHTML = data.map(item => `
                <li>
                    <span>${item.jurusan}</span>
                    <span class="percentage">${((item.jumlah / total) * 100).toFixed(1)}%</span>
                </li>
            `).join('');

            // Summary
            const sortedData = [...data].sort((a, b) => b.jumlah - a.jumlah);
            const summary = document.getElementById('summary');
            summary.innerHTML = `
                <li>
                    <span>Jurusan Terpopuler</span>
                    <span class="percentage">${sortedData[0].jurusan}</span>
                </li>
                <li>
                    <span>Jurusan Terkecil</span>
                    <span class="percentage">${sortedData[sortedData.length - 1].jurusan}</span>
                </li>
                <li>
                    <span>Selisih Terbesar</span>
                    <span class="percentage">${sortedData[0].jumlah - sortedData[sortedData.length - 1].jumlah} siswa</span>
                </li>
                <li>
                    <span>Status</span>
                    <span class="percentage">Aktif</span>
                </li>
            `;
        }

        // Fungsi untuk membuat charts
        function createCharts(data) {
            const labels = data.map(item => item.jurusan);
            const values = data.map(item => item.jumlah);
            
            const colors = [
                '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                '#9966FF', '#FF9F40', '#FF6B6B', '#4ECDC4'
            ];

            // Destroy existing charts if they exist
            if (barChart) barChart.destroy();
            if (pieChart) pieChart.destroy();

            // Bar Chart
            const barCtx = document.getElementById('barChart').getContext('2d');
            barChart = new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Jumlah Siswa',
                        data: values,
                        backgroundColor: colors.slice(0, data.length).map(color => color + '80'),
                        borderColor: colors.slice(0, data.length),
                        borderWidth: 2,
                        borderRadius: 8,
                        borderSkipped: false,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            titleColor: 'white',
                            bodyColor: 'white',
                            borderColor: 'rgba(255,255,255,0.3)',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#666',
                                maxRotation: 45
                            }
                        }
                    },
                    animation: {
                        duration: 1500,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // Pie Chart
            const pieCtx = document.getElementById('pieChart').getContext('2d');
            pieChart = new Chart(pieCtx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Jumlah Siswa',
                        data: values,
                        backgroundColor: colors.slice(0, data.length),
                        borderColor: '#ffffff',
                        borderWidth: 3,
                        hoverOffset: 15
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                color: '#666',
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            titleColor: 'white',
                            bodyColor: 'white',
                            borderColor: 'rgba(255,255,255,0.3)',
                            borderWidth: 1,
                            callbacks: {
                                label: function(context) {
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((context.parsed / total) * 100).toFixed(1);
                                    return `${context.label}: ${context.parsed} siswa (${percentage}%)`;
                                }
                            }
                        }
                    },
                    cutout: '50%',
                    animation: {
                        duration: 1500,
                        easing: 'easeOutQuart'
                    }
                }
            });
        }

        // Fungsi untuk refresh data (simulasi)
        function refreshData() {
            // Simulasi loading
            const btn = document.querySelector('.refresh-btn');
            btn.innerHTML = '⏳ Loading...';
            btn.disabled = true;

            setTimeout(() => {
                // Simulasi perubahan data
                studentData.forEach(item => {
                    item.jumlah += Math.floor(Math.random() * 21) - 10; // +/- 10
                    if (item.jumlah < 50) item.jumlah = 50; // minimum 50
                });

                initDashboard();
                
                btn.innerHTML = '🔄 Refresh Data';
                btn.disabled = false;
            }, 1500);
        }

        // Fungsi untuk inisialisasi dashboard
        function initDashboard() {
            createStatsCards(studentData);
            createDetailStats(studentData);
            createCharts(studentData);
        }

        // Simulasi fetch data (menggantikan fetch ke data.php)
        function loadData() {
            // Dalam implementasi nyata, ganti dengan:
            // fetch('data.php')
            //     .then(response => response.json())
            //     .then(data => {
            //         initDashboard(data);
            //     })
            //     .catch(error => console.error('Error:', error));
            
            initDashboard();
        }

        // Load data saat halaman dimuat
        document.addEventListener('DOMContentLoaded', loadData);
    </script>
</body>
</html>

9. Penutup

Dengan mengikuti tutorial ini, kamu sudah berhasil membuat dashboard statistik sederhana dengan:

PHP dan MySQL untuk pengolahan data
Chart.js untuk visualisasi grafik
Bootstrap untuk tampilan yang lebih modern

Tutorial ini bisa dikembangkan untuk menampilkan data dinamis, filter tanggal, atau grafik interaktif lanjutan. Cocok juga untuk diterapkan dalam aplikasi sistem informasi sekolah, e-commerce, atau manajemen internal perusahaan.