Day 2 – Visualizing Sales Trends with Charts in Laravel #SalesForecastAI #LaravelCharts #SalesTrend #PredictiveAnalytics

Now that we have sample sales data, let’s visualize it to spot trends over time. We’ll use Chart.js with Laravel to draw a daily sales line chart, setting the stage for AI forecasting.

Table of Contents

📦 Step 1: Install Laravel Chart.js wrapper (optional)

You can install a wrapper like consoletvs/charts:

composer require consoletvs/charts

Then publish the config:

php artisan vendor:publish --tag=charts_config

But if you prefer, you can use raw Chart.js via Blade.

🖼 Step 2: Create a SalesController

php artisan make:controller SalesController

In routes/web.php:

Route::get('/sales', [SalesController::class, 'index'])->name('sales.index');

📊 Step 3: Prepare the chart data

In SalesController.php:

use App\Models\Sale;
use Illuminate\Support\Facades\DB;

public function index()
{
    $sales = Sale::select(
        DB::raw('DATE(sale_date) as date'),
        DB::raw('SUM(amount) as total')
    )
    ->groupBy('date')
    ->orderBy('date')
    ->get();

    $labels = $sales->pluck('date')->map(fn($d) => date('d M', strtotime($d)));
    $totals = $sales->pluck('total');

    return view('sales.index', compact('labels', 'totals'));
}

🖌 Step 4: Create the Blade view

In resources/views/sales/index.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Sales Trend</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2>Daily Sales Trend</h2>

    <canvas id="salesChart" height="100"></canvas>

    <script>
        const ctx = document.getElementById('salesChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($labels),
                datasets: [{
                    label: 'Daily Sales (RM)',
                    data: @json($totals),
                    borderColor: 'rgba(75, 192, 192, 1)',
                    tension: 0.3,
                    fill: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    </script>
</body>
</html>

✅ Example Output

You’ll now see a line chart showing the daily sales for the last year, with hover values and proper date labels.

✅ Up next (Day 3): we’ll export the cleaned time series data to CSV, ready for feeding into the prediction model.

Post Views: 41