HEX

File: //var/www/w230/html/election/admin/dashboard.php
<?php
include('../config/connect.php');
session_start();
if (!isset($_SESSION['admin'])) {
    header("Location: login.php");
    exit;
}

$sql = "SELECT candidates.name, COUNT(votes.id) AS total 
        FROM candidates LEFT JOIN votes ON candidates.id = votes.candidate_id 
        GROUP BY candidates.id ORDER BY candidates.number ASC";

$data = mysqli_query($conn, $sql);
$labels = [];
$totals = [];

$total_votes = 0;
while ($row = mysqli_fetch_assoc($data)) {
    $labels[] = $row['name'];
    $totals[] = $row['total'];
    $total_votes += $row['total'];
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>แดชบอร์ดเลือกตั้ง</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
        body {
            font-family: 'Prompt', sans-serif;
            background: linear-gradient(to right, #f8ffae, #43c6ac);
            padding-top: 50px;
        }
        </style>
</head>
<body class="bg-white">
<nav class="navbar navbar-light bg-light justify-content-between px-3">
  <span class="navbar-brand">แดชบอร์ดระบบเลือกตั้ง</span>
  <a href="logout.php" class="btn btn-outline-danger">ออกจากโปรแกรม</a>
</nav>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>แดชบอร์ดผลการเลือกตั้ง</h3>
        <a href="candidate_list.php" class="btn btn-secondary">จัดการผู้สมัคร</a>
    </div>

    <div class="row">
        <div class="col-md-6">
            <canvas id="barChart"></canvas>
        </div>
        <div class="col-md-6">
            <div style="max-width: 400px; margin: auto;">
            <canvas id="pieChart" width="250" height="250"></canvas>
            </div>
            <!--<canvas id="pieChart"></canvas>-->
        </div>
    </div>
</div>

<script>
    const labels = <?= json_encode($labels) ?>;
    const data = <?= json_encode($totals) ?>;
    const total = <?= $total_votes ?>;

    new Chart(document.getElementById('barChart'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'จำนวนคะแนน',
                data: data,
                backgroundColor: 'rgba(54, 162, 235, 0.7)'
            }]
        }
    });

    new Chart(document.getElementById('pieChart'), {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
            }]
        }
    });
</script>
</body>
</html>