Bootstrap Mysql PHP Tutoriales

Dashboard Interactivo de Ventas con PHP, MySQL, Chart.js y Bootstrap 5

Obed Alvarado 6 min de lectura
Compartir

En este tutorial aprenderás a crear un dashboard interactivo de ventas que te permitirá visualizar y filtrar datos de forma dinámica, utilizando PHP, MySQL, Chart.js y Bootstrap 5.

Mediante este proyecto, transformarás datos de ventas en gráficos claros y atractivos que se actualizan al instante sin recargar la página. Además, implementarás filtros de fecha para analizar períodos específicos, facilitando la identificación de tendencias y oportunidades de mejora en tu negocio.

Este tutorial está diseñado para que desarrolladores principiantes  puedan seguirlo fácilmente, ofreciendo código listo para usar y explicaciones prácticas que te ayudarán a construir herramientas de análisis de datos de forma profesional.

En el desarrollo de este tutorial utilizaremos:

  • PHP y MySQL para la gestión y consulta de datos.
  • Chart.js para la representación gráfica.
  • Bootstrap 5 para un diseño moderno y profesional.
  • jQuery y AJAX para la comunicación asíncrona entre el cliente y el servidor, permitiendo filtrar datos sin recargar la página.

Requisitos Previos

  • Conocimientos básicos de PHP, MySQL y JavaScript.
  • Servidor web local (por ejemplo, XAMPP o WAMP) configurado para ejecutar PHP y MySQL.
  • Editor de código.

1. Configuración de la Base de Datos

Primero, crea la base de datos y la tabla para almacenar la información de ventas. Ejecuta la siguiente consulta en tu herramienta de administración (como phpMyAdmin):

CREATE DATABASE dashboard_db;
USE dashboard_db;


CREATE TABLE ventas (
    id INT AUTO_INCREMENT PRIMARY KEY,
    producto VARCHAR(100),
    cantidad INT,
    total DECIMAL(10,2),
    fecha DATE
);

Insertar Datos de Prueba (2025)

Agrega 10 productos de prueba con fechas del año 2025

INSERT INTO ventas (producto, cantidad, total, fecha) VALUES
('Producto 1', 10, 100.00, '2025-01-15'),
('Producto 2', 5, 50.00, '2025-02-10'),
('Producto 3', 8, 80.00, '2025-03-20'),
('Producto 4', 12, 120.00, '2025-04-05'),
('Producto 5', 6, 60.00, '2025-05-18'),
('Producto 6', 9, 90.00, '2025-06-25'),
('Producto 7', 7, 70.00, '2025-07-30'),
('Producto 8', 11, 110.00, '2025-08-12'),
('Producto 9', 4, 40.00, '2025-09-08'),
('Producto 10', 15, 150.00, '2025-10-20');

2. Conexión a la Base de Datos con PHP

Crea un archivo llamado conexion.php que será usado para conectar PHP con MySQL:

<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "dashboard_db";


$con = new mysqli($host, $user, $password, $dbname);


if ($con->connect_error) {
    die("Conexión fallida: " . $con->connect_error);
}
?>

3. API para Obtener Datos Filtrados (get_data.php)

Este archivo se encargará de consultar la tabla ventas y devolver los resultados en formato JSON. Se incluyen filtros de fecha usando parámetros GET.

Crea el archivo get_data.php:

<?php
include "conexion.php";


// Obtener las fechas desde los parámetros GET, o usar valores por defecto (inicio y fin del mes actual)
$fecha_inicio = $_GET['fecha_inicio'] ?? date('Y-m-01');
$fecha_fin = $_GET['fecha_fin'] ?? date('Y-m-t');


// Consulta para agrupar las ventas por producto dentro del rango de fechas
$sql = "SELECT producto, SUM(cantidad) as total_vendido FROM ventas 
        WHERE fecha BETWEEN '$fecha_inicio' AND '$fecha_fin'
        GROUP BY producto";


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


if (!$result) {
    die("Error en la consulta SQL: " . $con->error);
}


$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}


echo json_encode($data);
?>

4. Creando la Página del Dashboard (index.php)

Esta es la interfaz principal donde se mostrará el gráfico, se aplicarán los filtros y se dará retroalimentación si no existen datos. La página utiliza Bootstrap 5 para el diseño, Chart.js para el gráfico y jQuery para realizar las peticiones AJAX.

Crea el archivo index.php:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Ventas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        canvas { max-height: 400px; display: none; }
        .mensaje { display: none; text-align: center; font-size: 18px; color: gray; padding: 20px; }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center mb-4"> Dashboard de Ventas</h2>


        <div class="row mb-4">
            <div class="col-md-4">
                <label class="form-label">Desde:</label>
                <input type="date" id="fecha_inicio" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label">Hasta:</label>
                <input type="date" id="fecha_fin" class="form-control">
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button class="btn btn-primary w-100" onclick="cargarDatos()"> Filtrar</button>
            </div>
        </div>


        <div class="card p-4">
            <p id="mensajeSinDatos" class="mensaje">⚠️ No hay datos disponibles para este período.</p>
            <canvas id="graficoVentas"></canvas>
        </div>
    </div>


    <script>
        let chart;


        function cargarDatos() {
            let fecha_inicio = document.getElementById('fecha_inicio').value || "<?= date('Y-m-01') ?>";
            let fecha_fin = document.getElementById('fecha_fin').value || "<?= date('Y-m-t') ?>";


            $.getJSON(`get_data.php?fecha_inicio=${fecha_inicio}&fecha_fin=${fecha_fin}`, function (data) {
                let productos = data.map(item => item.producto);
                let cantidades = data.map(item => item.total_vendido);


                let canvas = document.getElementById('graficoVentas');
                let mensaje = document.getElementById('mensajeSinDatos');


                if (chart) chart.destroy();


                if (productos.length === 0) {
                    canvas.style.display = "none";
                    mensaje.style.display = "block";
                } else {
                    canvas.style.display = "block";
                    mensaje.style.display = "none";


                    let ctx = canvas.getContext('2d');
                    chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: productos,
                            datasets: [{
                                label: 'Cantidad Vendida',
                                data: cantidades,
                                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 2
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: { y: { beginAtZero: true } }
                        }
                    });
                }
            });
        }


        document.addEventListener("DOMContentLoaded", cargarDatos);
    </script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Con este tutorial has aprendido a crear un dashboard interactivo que integra PHP, MySQL, Chart.js y Bootstrap 5. Además, agregamos filtros de fecha y un mensaje amigable para cuando no se encuentren datos, mejorando la experiencia de usuario.

 

Obed Alvarado

Sobre el autor

Artículo redactado por Obed Alvarado. Comparto experiencias prácticas sobre PHP, MySQL, aplicaciones web, instalación en hosting y herramientas para negocios.

También te puede interesar

Comentarios