| Server IP : 173.209.174.21 / Your IP : 216.73.216.89 Web Server : Apache/2.4.58 (Ubuntu) System : Linux wcfs-server 6.8.0-124-generic #124-Ubuntu SMP PREEMPT_DYNAMIC Tue May 26 13:00:45 UTC 2026 x86_64 User : nodor ( 1000) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/thelittlebigshow/vendor-reg/ |
Upload File : |
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Check if session is already started
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
include 'config.php'; // Include the configuration file
// Check if admin is logged in
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
header("Location: admin_login.php");
exit();
}
// Database connection using constants from config.php
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// Test database connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Initialize category counts
$categories = [
"Food & Beverages" => 0,
"Handmade Crafts" => 0,
"Candles" => 0,
"Clothing & Apparel" => 0,
"Art & Prints" => 0,
"Electronics" => 0,
"Jewelry" => 0,
"Books & Literature" => 0,
"Toys & Games" => 0,
"Furniture" => 0,
"Beauty & Personal Care" => 0,
"Sports Equipment" => 0,
"Home Goods & Decor" => 0,
"Pet Supplies" => 0,
"Other" => 0
];
// Fetch vendor categories and count them
$result = $conn->query("SELECT category FROM vendors");
if (!$result) {
die("Query failed: " . $conn->error);
}
while ($row = $result->fetch_assoc()) {
$category = $row['category'];
if (isset($categories[$category])) {
$categories[$category]++;
} else {
$categories["Other"]++;
}
}
$conn->close();
// Array of colors for each category
$colors = [
"Food & Beverages" => "rgba(255, 99, 132, 0.7)",
"Handmade Crafts" => "rgba(54, 162, 235, 0.7)",
"Clothing & Apparel" => "rgba(255, 206, 86, 0.7)",
"Art & Prints" => "rgba(75, 192, 192, 0.7)",
"Electronics" => "rgba(153, 102, 255, 0.7)",
"Jewelry" => "rgba(255, 159, 64, 0.7)",
"Books & Literature" => "rgba(255, 99, 132, 0.7)",
"Toys & Games" => "rgba(54, 162, 235, 0.7)",
"Furniture" => "rgba(255, 206, 86, 0.7)",
"Beauty & Personal Care" => "rgba(75, 192, 192, 0.7)",
"Sports Equipment" => "rgba(153, 102, 255, 0.7)",
"Home Goods & Decor" => "rgba(255, 159, 64, 0.7)",
"Pet Supplies" => "rgba(255, 99, 132, 0.7)",
"Other" => "rgba(201, 203, 207, 0.7)"
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vendor Product Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.chart-container {
width: 80%;
margin: auto;
}
.back-link {
display: inline-block;
background-color: #1E90FF;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
margin-bottom: 20px;
}
.back-link:hover {
background-color: #1C86EE;
}
.toggle-btn {
display: inline-block;
background-color: #28a745;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
margin-bottom: 20px;
margin-top: 10px;
}
.toggle-btn:hover {
background-color: #218838;
}
</style>
</head>
<body>
<!-- Back to Dashboard link -->
<a href="admin_dashboard.php" class="back-link">Back to Dashboard</a>
<!-- Toggle Link -->
<a href="javascript:void(0);" class="toggle-btn" onclick="toggleChartType()">Switch to Pie Chart</a>
<h2>Vendor Offerings by Category</h2>
<div class="chart-container">
<canvas id="vendorChart"></canvas>
</div>
<script>
let chartType = 'bar'; // Default chart type
const ctx = document.getElementById('vendorChart').getContext('2d');
let vendorChart = new Chart(ctx, {
type: chartType,
data: {
labels: <?php echo json_encode(array_keys($categories)); ?>,
datasets: [{
label: 'Number of Vendors',
data: <?php echo json_encode(array_values($categories)); ?>,
backgroundColor: <?php echo json_encode(array_values($colors)); ?>,
borderColor: <?php echo json_encode(array_values($colors)); ?>,
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1, // Whole numbers on y-axis
precision: 0 // Ensure whole numbers are displayed
}
}
}
}
});
function toggleChartType() {
chartType = (chartType === 'bar') ? 'pie' : 'bar'; // Toggle between 'bar' and 'pie'
vendorChart.destroy(); // Destroy the current chart instance
vendorChart = new Chart(ctx, {
type: chartType,
data: {
labels: <?php echo json_encode(array_keys($categories)); ?>,
datasets: [{
label: 'Number of Vendors',
data: <?php echo json_encode(array_values($categories)); ?>,
backgroundColor: <?php echo json_encode(array_values($colors)); ?>,
borderColor: <?php echo json_encode(array_values($colors)); ?>,
borderWidth: 1
}]
},
options: {
responsive: true,
scales: chartType === 'bar' ? {
y: {
beginAtZero: true,
ticks: {
stepSize: 1, // Whole numbers on y-axis
precision: 0 // Ensure whole numbers are displayed
}
}
} : {} // Pie chart does not require y-axis
}
});
// Update the toggle button text
document.querySelector('.toggle-btn').textContent = (chartType === 'bar') ? 'Switch to Pie Chart' : 'Switch to Bar Chart';
}
</script>
</body>
</html>