📊 Introducción
Chart.js es una librería JavaScript poderosa y liviana para mostrar gráficas interactivas. En este tutorial te enseñaré cómo integrarla con PHP para mostrar gráficas dinámicas alimentadas desde MySQL. Ideal para sistemas de ventas, reportes, o cualquier visualización de datos.
🛠️ Requisitos:
- PHP 7+
- MySQL (con datos)
- Conocimientos básicos de HTML y JS
- Servidor local (XAMPP, WAMP) o hosting con soporte PHP
🗃️ 1. Base de Datos MySQL
Supongamos que tenemos una tabla de ventas como esta:
CREATE TABLE ventas (
id INT AUTO_INCREMENT PRIMARY KEY,
producto VARCHAR(50),
cantidad INT
);
INSERT INTO ventas (producto, cantidad) VALUES
('Producto A', 120),
('Producto B', 90),
('Producto C', 150),
('Producto D', 80);
🔌 2. Conexión PHP a la Base de Datos
// conexion.php
$conexion = new mysqli("localhost", "root", "", "mi_base_datos");
if ($conexion->connect_error) {
die("Conexión fallida: " . $conexion->connect_error);
}
📤 3. Consultar datos y convertirlos en JSON
// datos.php
include("conexion.php");
$sql = "SELECT producto, cantidad FROM ventas";
$resultado = $conexion->query($sql);
$data = [];
while ($fila = $resultado->fetch_assoc()) {
$data[] = $fila;
}
echo json_encode($data);
📈 4. Mostrar gráfica con Chart.js
<!DOCTYPE html>
<html>
<head>
<title>Gráfica de Ventas</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>Gráfica de Ventas por Producto</h2>
<canvas id="grafico"></canvas>
<script>
fetch('datos.php')
.then(response => response.json())
.then(data => {
const productos = data.map(d => d.producto);
const cantidades = data.map(d => d.cantidad);
new Chart(document.getElementById("grafico"), {
type: 'bar',
data: {
labels: productos,
datasets: [{
label: 'Cantidad vendida',
data: cantidades,
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>
📌 Conclusión
Con solo unos pocos archivos y líneas de código, puedes mostrar gráficas interactivas en tu proyecto PHP. Puedes adaptar este ejemplo para estadísticas de usuarios, ingresos, stock, y mucho más.
