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):
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!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.
