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í:

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.

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:

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. La demostración la encuentras en este enlace. 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 disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,020 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

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

A %d blogueros les gusta esto: