Module 8: Reporting & Analytics | Bakery Management System Course

Visualizing Success

Our application now stores a wealth of data about sales, products, and customers. However, raw data in tables can be difficult to interpret. A reporting dashboard with charts and graphs makes it easy to understand business performance at a glance.

In this module, we will create a dedicated analytics page. We'll write PHP scripts to process and aggregate our data, and then use a powerful JavaScript library, Chart.js, to create beautiful, interactive charts to display it.

Step 1: The Dashboard Layout

First, create the main page for our dashboard, `reports.php`, in the `admin/` folder. This page will contain canvas elements, which are HTML elements that Chart.js will use to draw the charts.

admin/reports.php

<?php
session_start();
// ... (Authentication check) ...
?>
<h2>Business Analytics Dashboard</h2>

<!-- Canvases for our charts -->
<div style="width: 75%; margin: auto;">
    <h3>Sales Over Time</h3>
    <canvas id="salesChart"></canvas>
</div>

<div style="width: 50%; margin: 50px auto;">
    <h3>Best-Selling Products</h3>
    <canvas id="topProductsChart"></canvas>
</div>

<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Include jQuery for AJAX -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Custom script to create the charts -->
<script src="../assets/js/reports.js"></script>

Step 2: Creating the Backend Data Endpoints

Our JavaScript needs a source for its data. We'll create a PHP file that queries the database and outputs the data in JSON format, which is perfect for JavaScript to understand. Create `get_sales_data.php` in a new `api/` folder.

api/get_sales_data.php

<?php
header('Content-Type: application/json');
require_once '../includes/db.php';

// Example: Get total sales per day
$sql = "SELECT DATE(order_date) as date, SUM(total_amount) as total 
        FROM orders 
        WHERE status = 'completed'
        GROUP BY DATE(order_date) 
        ORDER BY date ASC";

$result = $conn->query($sql);

$data = ['labels' => [], 'values' => []];
while ($row = $result->fetch_assoc()) {
    $data['labels'][] = $row['date'];
    $data['values'][] = (float)$row['total'];
}

echo json_encode($data);
?>

Step 3: Rendering Charts with Chart.js

Finally, we write the JavaScript to fetch data from our API and render the charts. This code will make an AJAX call to our PHP script, and once it receives the JSON data, it will initialize the charts. Create `reports.js` in the `assets/js/` folder.

assets/js/reports.js

$(document).ready(function() {
    // AJAX call to get sales data
    $.ajax({
        url: '../api/get_sales_data.php',
        method: 'GET',
        success: function(data) {
            const ctx = document.getElementById('salesChart').getContext('2d');
            const salesChart = new Chart(ctx, {
                type: 'line', // Line chart for trends
                data: {
                    labels: data.labels, // Dates from our API
                    datasets: [{
                        label: 'Total Sales ($)',
                        data: data.values, // Sales totals from our API
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    });

    // You would create a similar AJAX call and Chart instance for top products
    // using a different API endpoint (e.g., get_top_products.php).
});