En este post te mostraré cómo crear gráficas en la web (gráficas de barras, de línea, circulares) usando el lenguaje PHP y la librería chart.js.
Estrictamente hablando, no vamos a usar el lenguaje en sí para crear la gráfica, sino que vamos a usar PHP para pasar los valores a JavaScript y luego dejar que éste último renderice la gráfica usando Chart.js
De hecho esto es como una combinación entre el post de cómo pasar variables de PHP a JavaScript y el tutorial de Chart.js.
Lado del servidor
Primero veamos el lado del servidor. Vamos a necesitar las etiquetas y los valores. Para este caso supondremos que vamos a mostrar las ventas de 4 meses del año, así que necesitamos cuatro etiquetas y cuatro valores.
Obviamente estos valores pueden venir de cualquier medio de almacenamiento como puede ser una base de datos, aquí lo coloco así por simplicidad.
<?php
// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
$datosVentas = [5000, 1500, 8000, 5102];
?>Lo que haremos a continuación será imprimir esos valores en el script que genera la gráfica, pasando una variable desde PHP a JavaScript.
Gráfica con PHP, Chart.js y JavaScript
Pasemos al ejemplo completo. En este caso todo el código debe estar en el mismo archivo para que las cosas funcionen. Recuerda que aquí no voy a tocar con detalle la generación de gráficas ni el paso de variables, pues eso ya está en los enlaces que te dejé al inicio del post.
El código completo queda así:
<!DOCTYPE html>
<html lang="es">
<?php
// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
$datosVentas = [5000, 1500, 8000, 5102];
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráficas con chart.js y PHP | By Parzibyte</title>
<!-- Importar chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<h1>Gráfica creada con PHP</h1>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
<canvas id="grafica"></canvas>
<script type="text/javascript">
// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
// Pasaamos las etiquetas desde PHP
const etiquetas = <?php echo json_encode($etiquetas) ?>;
// Podemos tener varios conjuntos de datos. Comencemos con uno
const datosVentas2020 = {
label: "Ventas por mes",
// Pasar los datos igualmente desde PHP
data: <?php echo json_encode($datosVentas) ?>,
backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
borderWidth: 1, // Ancho del borde
};
new Chart($grafica, {
type: 'line', // Tipo de gráfica
data: {
labels: etiquetas,
datasets: [
datosVentas2020,
// Aquí más datos...
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
},
}
});
</script>
</body>
</html>Estamos haciendo una gráfica como cualquier otra, pero ahora estamos pasando las variables desde PHP en la línea 25 y 30. Así que básicamente estamos creando una gráfica con PHP.
Conclusión
Si bien deben existir librerías para la creación de gráficas en el lado del servidor, recomiendo hacerlo del lado del cliente, ya que le quitamos bastante carga al servidor.
Igualmente este ejemplo es un poco sucio en cuanto al código, pues estamos mezclando los lenguajes. Lo ideal sería usar AJAX.
Como sea, te dejo con más tutoriales sobre PHP. Por cierto, si quieres generar otro tipo de gráficas mira este post en donde muestro más ejemplos y adapta el código para pasar las variables de PHP.
super, funciona de maravilla