Skip to main content

​
Statistics Module

The Statistics module provides detailed business insights through four interactive Chart.js visualizations, KPI cards, and a product performance table.

​
Overview

Access comprehensive statistics at /estadisticas with:

KPI Dashboard

Four metric cards tracking key business indicators

Sales Trends

Monthly sales progression with line chart

User Demographics

Gender distribution with doughnut chart

Product Performance

Top selling products with horizontal bar chart

​
Route Configuration

The statistics page is defined in routes/web.php: 
Route::get('/estadisticas', fn() => view('estadisticas'))->name('estadisticas');
View file: resources/views/estadisticas.blade.php

​
Page Layout

The statistics page extends the main app layout: 
@extends('layouts.app')

@section('title', 'Estadísticas - Dashboard')
@section('nav_estadisticas', 'active')
@section('side_analisis', 'active')

@section('content')
    <!-- Statistics content -->
@endsection

​
Page Header

The header includes an export button for data extraction: 
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Estadísticas</h1>
    <button class="btn btn-sm btn-outline-secondary">Exportar</button>
</div>

​
KPI Metrics Cards

Four comprehensive metrics provide business overview:
1

Total Users Card

<div class="col-md-3">
    <div class="card text-white bg-primary mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <i class="fas fa-users"></i> Usuarios Totales
            </h5>
            <p class="card-text display-6">5,432</p>
            <small class="text-white-50">+12% este mes</small>
        </div>
    </div>
</div>
Displays: 5,432 total users with 12% monthly growth
2

Total Sales Card

<div class="col-md-3">
    <div class="card text-white bg-success mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <i class="fas fa-shopping-cart"></i> Ventas Totales
            </h5>
            <p class="card-text display-6">$45,890</p>
            <small class="text-white-50">+25% este mes</small>
        </div>
    </div>
</div>
Displays: $45,890 in total sales with 25% monthly growth
3

Growth Rate Card

<div class="col-md-3">
    <div class="card text-white bg-warning mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <i class="fas fa-chart-line"></i> Crecimiento
            </h5>
            <p class="card-text display-6">+18%</p>
            <small class="text-white-50">vs mes anterior</small>
        </div>
    </div>
</div>
Displays: 18% growth compared to previous month
4

Messages Card

<div class="col-md-3">
    <div class="card text-white bg-info mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <i class="fas fa-comment-dots"></i> Mensajes
            </h5>
            <p class="card-text display-6">234</p>
            <small class="text-white-50">Sin leer</small>
        </div>
    </div>
</div>
Displays: 234 unread messages

​
Chart Visualizations

The statistics module includes four distinct Chart.js visualizations:

​
1. Monthly Sales Chart (Line Chart)

Tracks sales progression over six months: 
<div class="col-md-6">
    <div class="card">
        <div class="card-header">
            <h5>Ventas Mensuales</h5>
        </div>
        <div class="card-body">
            <canvas id="ventasChart" height="200"></canvas>
        </div>
    </div>
</div>

​
Chart Configuration

new Chart(document.getElementById('ventasChart').getContext('2d'), {
    type: 'line',
    data: {
        labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio'],
        datasets: [{
            label: 'Ventas ($)',
            data: [5000, 7500, 6800, 9200, 11500, 14200],
            borderColor: 'rgb(75,192,192)',
            backgroundColor: 'rgba(75,192,192,0.1)',
            tension: 0.3,
            fill: true
        }]
    },
    options: {
        responsive: true
    }
});
MonthSales AmountGrowth
Enero$5,000Baseline
Febrero$7,500+50%
Marzo$6,800-9%
Abril$9,200+35%
Mayo$11,500+25%
Junio$14,200+23%

​
2. Gender Demographics Chart (Doughnut Chart)

Visualizes user distribution by gender: 
<div class="col-md-6">
    <div class="card">
        <div class="card-header">
            <h5>Género de Usuarios</h5>
        </div>
        <div class="card-body">
            <canvas id="generoChart" height="200"></canvas>
        </div>
    </div>
</div>

​
Chart Configuration

new Chart(document.getElementById('generoChart').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: ['Hombres','Mujeres','Otros'],
        datasets: [{
            data: [55, 40, 5],
            backgroundColor: [
                'rgba(54,162,235,0.8)',
                'rgba(255,99,132,0.8)',
                'rgba(255,206,86,0.8)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

Hombres

55% - Blue

Mujeres

40% - Pink

Otros

5% - Yellow

​
3. Top Products Chart (Horizontal Bar Chart)

Displays best-selling products by units sold: 
<div class="col-md-6">
    <div class="card">
        <div class="card-header">
            <h5>Productos Más Vendidos</h5>
        </div>
        <div class="card-body">
            <canvas id="productosChart" height="200"></canvas>
        </div>
    </div>
</div>

​
Chart Configuration

new Chart(document.getElementById('productosChart').getContext('2d'), {
    type: 'bar',
    data: {
        labels: ['Laptop','Smartphone','Auriculares','Tablet','Cámara'],
        datasets: [{
            label: 'Unidades Vendidas',
            data: [156, 342, 89, 67, 45],
            backgroundColor: [
                'rgba(75,192,192,0.8)',
                'rgba(54,162,235,0.8)',
                'rgba(255,206,86,0.8)',
                'rgba(75,192,192,0.8)',
                'rgba(255,99,132,0.8)'
            ]
        }]
    },
    options: {
        responsive: true,
        indexAxis: 'y',  // Horizontal bars
        plugins: {
            legend: {
                display: false
            }
        }
    }
});
The indexAxis: 'y' option creates horizontal bars instead of vertical bars.

​
Product Performance Data

ProductUnits SoldColor
Smartphone342Blue
Laptop156Teal
Auriculares89Yellow
Tablet67Teal
Cámara45Pink

​
4. Revenue Distribution Chart (Pie Chart)

Breakdown of revenue by category: 
<div class="col-md-6">
    <div class="card">
        <div class="card-header">
            <h5>Distribución de Ingresos</h5>
        </div>
        <div class="card-body">
            <canvas id="ingresosChart" height="200"></canvas>
        </div>
    </div>
</div>

​
Chart Configuration

new Chart(document.getElementById('ingresosChart').getContext('2d'), {
    type: 'pie',
    data: {
        labels: ['Electrónica','Accesorios','Servicios','Otros'],
        datasets: [{
            data: [45, 25, 20, 10],
            backgroundColor: [
                'rgba(75,192,192,0.8)',
                'rgba(54,162,235,0.8)',
                'rgba(255,206,86,0.8)',
                'rgba(255,99,132,0.8)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

Electrónica

45% of total revenue

Accesorios

25% of total revenue

Servicios

20% of total revenue

Otros

10% of total revenue

​
Product Statistics Table

Detailed product performance metrics in a sortable table: 
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5>Estadísticas de Productos</h5>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Vendidas</th>
                            <th>Ingresos</th>
                            <th>Margen</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><i class="fas fa-cube"></i> Laptop Pro</td>
                            <td>156</td>
                            <td>$23,400</td>
                            <td>35%</td>
                            <td><span class="badge bg-success">Alto</span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-mobile-alt"></i> Smartphone X</td>
                            <td>342</td>
                            <td>$15,890</td>
                            <td>28%</td>
                            <td><span class="badge bg-success">Alto</span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-headphones"></i> Auriculares</td>
                            <td>89</td>
                            <td>$2,670</td>
                            <td>42%</td>
                            <td><span class="badge bg-warning">Medio</span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-tablet-alt"></i> Tablet Plus</td>
                            <td>67</td>
                            <td>$3,350</td>
                            <td>25%</td>
                            <td><span class="badge bg-warning">Medio</span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-camera"></i> Cámara Digital</td>
                            <td>45</td>
                            <td>$2,250</td>
                            <td>18%</td>
                            <td><span class="badge bg-danger">Bajo</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

​
Product Performance Summary

Laptop Pro
  • Units: 156
  • Revenue: $23,400
  • Margin: 35%
  • Status: Alto
Smartphone X
  • Units: 342 (highest)
  • Revenue: $15,890
  • Margin: 28%
  • Status: Alto

​
Complete Chart Scripts

All charts are initialized in the @section('scripts') block: 
@section('scripts')
<script>
// Monthly Sales Chart
new Chart(document.getElementById('ventasChart').getContext('2d'), {
    type: 'line',
    data: { 
        labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio'], 
        datasets: [{ 
            label: 'Ventas ($)', 
            data: [5000,7500,6800,9200,11500,14200], 
            borderColor: 'rgb(75,192,192)', 
            backgroundColor: 'rgba(75,192,192,0.1)', 
            tension: 0.3, 
            fill: true 
        }] 
    },
    options: { responsive: true }
});

// Gender Demographics Chart
new Chart(document.getElementById('generoChart').getContext('2d'), {
    type: 'doughnut',
    data: { 
        labels: ['Hombres','Mujeres','Otros'], 
        datasets: [{ 
            data: [55,40,5], 
            backgroundColor: [
                'rgba(54,162,235,0.8)',
                'rgba(255,99,132,0.8)',
                'rgba(255,206,86,0.8)'
            ] 
        }] 
    },
    options: { 
        responsive: true, 
        plugins: { 
            legend: { position: 'bottom' } 
        } 
    }
});

// Top Products Chart
new Chart(document.getElementById('productosChart').getContext('2d'), {
    type: 'bar',
    data: { 
        labels: ['Laptop','Smartphone','Auriculares','Tablet','Cámara'], 
        datasets: [{ 
            label: 'Unidades Vendidas', 
            data: [156,342,89,67,45], 
            backgroundColor: [
                'rgba(75,192,192,0.8)',
                'rgba(54,162,235,0.8)',
                'rgba(255,206,86,0.8)',
                'rgba(75,192,192,0.8)',
                'rgba(255,99,132,0.8)'
            ] 
        }] 
    },
    options: { 
        responsive: true, 
        indexAxis: 'y', 
        plugins: { 
            legend: { display: false } 
        } 
    }
});

// Revenue Distribution Chart
new Chart(document.getElementById('ingresosChart').getContext('2d'), {
    type: 'pie',
    data: { 
        labels: ['Electrónica','Accesorios','Servicios','Otros'], 
        datasets: [{ 
            data: [45,25,20,10], 
            backgroundColor: [
                'rgba(75,192,192,0.8)',
                'rgba(54,162,235,0.8)',
                'rgba(255,206,86,0.8)',
                'rgba(255,99,132,0.8)'
            ] 
        }] 
    },
    options: { 
        responsive: true, 
        plugins: { 
            legend: { position: 'bottom' } 
        } 
    }
});
</script>
@endsection

​
Chart Types Overview

Line Chart

Best for: Time series data, trends over timeUsed for: Monthly sales progression

Doughnut Chart

Best for: Part-to-whole relationships with center holeUsed for: Gender demographics

Bar Chart

Best for: Comparing quantities across categoriesUsed for: Product sales comparison (horizontal)

Pie Chart

Best for: Showing proportions of a wholeUsed for: Revenue distribution by category

​
Customization Guide

1

Update Chart Data

Modify the data arrays in each chart configuration:
data: [5000, 7500, 6800, 9200, 11500, 14200]  // Replace with your data
2

Change Colors

Update the backgroundColor and borderColor properties:
backgroundColor: 'rgba(255,99,132,0.8)'  // New color
3

Adjust Chart Options

Customize chart behavior in the options object:
options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: { position: 'top' }
    }
}
Ensure Chart.js is loaded before initializing charts. Include the library in your layout:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

​
Next Steps

Analytics Module

Explore traffic analysis and conversion tracking

Dashboard Overview

Return to main dashboard documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us