Los reportes en tablas son difíciles de leer. En 2026, un buen dashboard usa gráficos interactivos para contar una historia.

Solución Rápida (Code Snippet)

Este ejemplo crea un gráfico de barras consumiendo datos reales de una API en PHP.

Backend (data.php)

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

// Obtenemos ventas por mes
$stmt = $pdo->query("SELECT mes, SUM(total) as total FROM ventas GROUP BY mes ORDER BY id ASC");
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Frontend (HTML + JS)

<div style="width: 600px;">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
async function renderChart() {
    const response = await fetch('data.php');
    const data = await response.json();

    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.map(row => row.mes),
            datasets: [{
                label: 'Ventas Mensuales ($)',
                data: data.map(row => row.total),
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgb(54, 162, 235)',
                borderWidth: 1
            }]
        }
    });
}
renderChart();
</script>

Cómo funciona

  1. Agregación SQL: Usamos SUM(total) y GROUP BY mes para que MySQL haga el trabajo pesado de sumar las ventas.
  2. Fetch API: Obtenemos los datos de forma asíncrona, permitiendo que la página cargue primero y el gráfico después.
  3. Mapeo de Datos: Chart.js necesita dos arrays: etiquetas (labels) y valores (data). Usamos .map() para extraerlos del JSON recibido.
  4. Canvas: Chart.js dibuja directamente sobre este elemento de HTML5, lo que lo hace muy eficiente y responsivo.

Personalización

Chart.js permite cambiar el tipo de gráfico con una sola palabra: bar, line, pie, doughnut o radar.

Enlaces Internos

Preguntas Frecuentes

¿Los gráficos son responsivos?

Sí, Chart.js ajusta el tamaño automáticamente si el contenedor del canvas es flexible (ej. usando clases de Bootstrap).

¿Puedo exportar el gráfico como imagen?

Sí, puedes usar el método toBase64Image() de la instancia del gráfico para permitir que el usuario lo descargue.