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:

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

See the gist on github.

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.

See the gist on github.

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:

See the gist on github.

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.