AJAX, PHP y Chart.js para crear gráficas en la web

Gráficas con chart.js, AJAX y PHP

Dejar un comentario / javascript, php, web / Por

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.

AJAX, PHP y Chart.js para crear gráficas en la web
AJAX, PHP y Chart.js para crear gráficas en la web

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:

  1. En nuestro servidor mostrar los datos de la gráfica como JSON.
  2. Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta.
  3. 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:

Datos para gráfica codificados como JSON desde PHP
Datos para gráfica codificados como JSON desde PHP

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *