En este post sobre la creación de gráficas (de línea, barras, pastel, etcétera) usando la librería Chart.js te enseñaré cómo crear una gráfica con datos traídos con AJAX.
El lado del servidor estará escrito en PHP aunque estos datos pueden ser traídos desde cualquier API o endpoint. Así que básicamente lo que haremos es:
- En nuestro servidor mostrar los datos de la gráfica como JSON.
- Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta.
- Finalmente igualmente dentro del cliente crear la gráfica con Chart.js con los datos traídos con AJAX.
Esto que te muestro es un ejemplo, pero antes de leerlo te recomendaría ver el tutorial de Chart.js para ver más opciones de gráficas y entender los conceptos.
Lado del servidor con PHP
En este caso vamos a usar PHP para mostrar los datos y después dejar que los consuma JavaScript del lado del cliente. Recuerda, estos datos pueden venir de MySQL, PostgreSQL, etcétera. Yo los escribo por simplicidad.
Lo que vamos a necesitar serán etiquetas y valores, entonces queda así:
<?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];
// Ahora las imprimimos como JSON para pasarlas a AJAX, pero las agrupamos
$respuesta = [
"etiquetas" => $etiquetas,
"datos" => $datosVentas,
];
echo json_encode($respuesta);
Estamos agrupando los datos en un objeto, y después lo estamos imprimiendo como JSON, de modo que esté codificado. Al visitar la página simplemente veremos ese objeto serializado, fíjate en que tiene etiquetas y datos:
Ya tenemos la primer parte.
Diseño HTML
Pasemos a la parte del diseño de la web. En este caso simplemente tenemos la plantilla con el canvas en donde se va a dibujar la gráfica. Estamos importando también la librería de Chart.js y nuestro script que veremos más adelante.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráficas con chart.js y AJAX | 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" src="script.js"></script>
</body>
</html>Es todo lo que necesitamos por la parte de HTML.
Traer datos con AJAX y refrescar gráfica
Como último componente veamos el lado del cliente con JavaScript. Lo que haremos será usar fetch (eres libre de usar la librería de tu agrado) para consumir el archivo de PHP, traer los valores, decodificar como JSON y después crear la gráfica con los datos traídos:
/*
Encierro todo en una función asíncrona para poder usar async y await cómodamente
https://parzibyte.me/blog
*/
(async () => {
// Llamar a nuestra API. Puedes usar cualquier librería para la llamada, yo uso fetch, que viene nativamente en JS
const respuestaRaw = await fetch("./obtener_datos_ajax.php");
// Decodificar como JSON
const respuesta = await respuestaRaw.json();
// Ahora ya tenemos las etiquetas y datos dentro de "respuesta"
// Obtener una referencia al elemento canvas del DOM
const $grafica = document.querySelector("#grafica");
const etiquetas = respuesta.etiquetas; // <- Aquí estamos pasando el valor traído usando AJAX
// Podemos tener varios conjuntos de datos. Comencemos con uno
const datosVentas2020 = {
label: "Ventas por mes",
// Pasar los datos igualmente desde PHP
data: respuesta.datos, // <- Aquí estamos pasando el valor traído usando AJAX
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
}
}],
},
}
});
})();
De este modo tan pronto estén los datos vamos a crear una nueva instancia de Chart y crear la gráfica.
Poniendo todo junto
El código completo está en GitHub. Ahora puedes ver cómo usar Chart.js con PHP sin AJAX y el tutorial de Chart.js, además de más posts sobre PHP.
