En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.

Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.

Importando chart.js

Primero debemos importar el script de chart.js a nuestro proyecto. Hay varias maneras usando NPM, etcétera. Yo te mostraré la forma más simple. Coloca un script que cargue la siguiente URL:

https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js

Así:

See the gist on github.

Igualmente puedes ver la guía oficial.

Explicación de conceptos

Antes de pasar al código te mostraré los conceptos básicos de lo que es cada cosa, con mis propias palabras.

• Labels: son las etiquetas de nuestros datos. Por cada valor, debe haber una etiqueta. Es decir, si nuestro arreglo de labels es de 4 elementos, nuestro arreglo de datos debe ser de 4 elementos.
• Dataset: es un conjunto de datos. Dentro de este conjunto agregamos la data o datos, que son un arreglo de números.
• Datasets: esta librería acepta varios datasets en una gráfica. Ya te expliqué anteriormente lo que es un dataset.

Para simplificar, si queremos mostrar las ventas de un año por mes, tomando solo los primeros cuatro meses (enero, febrero, marzo y abril) nuestras labels serían:

See the gist on github.

Y tendríamos el siguiente dataset en donde además de la data, especificamos el color y otros aspectos:

See the gist on github.

Fíjate también en que cada dataset tiene una etiqueta para diferenciar los datos. Si más tarde agregamos otro dataset, probablemente sería “Ventas por mes del 2021” y así se podrían diferenciar.

En este tutorial de chart.js te mostraré ejemplos de gráficas de barras (bar), línea (line) y pie. También te enseñaré a trabajar con más de un dataset y a modificar la medida con CSS.

Por cierto, todas las gráficas viven dentro de un canvas. Así que vamos a definir un elemento canvas en nuestro HTML para luego pasarle ese elemento DOM (recuperado con querySelector) al método Chart.

Nuestra primera gráfica con chart.js – tutorial

Comencemos viendo una gráfica de líneas. Primero tenemos el diseño HTML, este diseño puede ser una página web completa o la más básica, lo que importa es tener un elemento canvas.

See the gist on github.

Estoy importando la librería en la línea 8, definiendo el canvas en la línea 15 e importando el script que creará la gráfica en la línea 16. Ahora pasemos a ver el script:

See the gist on github.

Todo comienza definiendo el elemento del DOM en donde vamos a dibujar la gráfica creada con chart.js, después definimos las etiquetas y el conjunto de datos o dataset. Los comentarios explican lo que hace cada cosa.

Después creamos una nueva instancia de Chart pasándole dos cosas: el elemento del DOM en donde se va a dibujar la gráfica, y las características de la misma. El resultado es el que se observa en la imagen que acompaña al título.

Por cierto, las opciones de begintAtZero son para que el eje de Y a la izquierda comience en 0, y no en el valor más bajo del conjunto de datos. A mí me gusta ese estilo, si quieres puedes cambiarlo o borrar ese ajuste.

Puedes ver la demostración aquí.

Gráfica de barras

La gráfica de líneas y de barras son muy parecidas, de hecho podemos usar el mismo código y solo cambiar el tipo de gráfica. El código entonces quedaría así:

See the gist on github.

Lo único que está cambiando es el tipo de line a bar, en la línea 14. La demostración está aquí.

Usando dos conjuntos de datos

Como te mencioné anteriormente, se puede tener más de un conjunto de datos. En este caso los usos son varios, pero uno de ellos puede ser comparar dos datasets, por ejemplo, las ventas de dos años. Veamos el ejemplo entonces:

See the gist on github.

Fíjate en que hay dos datasets y cada uno de ellos difiere en los datos, etiqueta y color. Pero la cantidad de datos siempre coincide con las etiquetas de la gráfica. Podemos agregar infinitos datasets. La demostración la puedes ver aquí.

Doble conjunto de datos pero con gráfica de barras

Entre la gráfica de barras y de línea, a nivel de programación y uso con chart.js, no hay mucha diferencia.

El ejemplo anterior puede ser usado para esta demostración simplemente cambiando el tipo de gráfica, y los dos conjuntos de datos se van a mostrar a su manera.

See the gist on github.

Lo que cambia ahora es que la comparativa se hace por cada label, y no en general como en el caso de la gráfica de tipo line. La demostración está aquí.

Usando más conjuntos de datos con chart.js

En caso de que dos datasets no hayan sido suficientes, aquí te dejo otro ejemplo en donde comparamos muchos más datasets.

See the gist on github.

En este caso es de tipo line, pero podría ser de tipo bar sin problemas. De este modo puedes agregar infinitos conjuntos de datos siempre y cuando sean visibles y agradables a la vista del usuario.

La demostración la encuentras aquí.

Gráfica circular

Hasta ahora te he mostrado cómo crear gráficas de línea y de barras usando chart.js, es momento de ver las gráficas de pastel, de tarta, circulares, de 360 grados o como las llames.

Para este tipo de gráficos se usa casi lo mismo, pero ahora las etiquetas van a ser una porción del gráfico circular, y los conjuntos de datos no van a llevar etiqueta.

Existen dos variantes para esta gráfica, la de pie que es la de pastel y la dougnhut que sería la gráfica de dona, puedes cambiarlo si quieres.

See the gist on github.

Por cierto, ahora ya no usamos un solo color, sino un arreglo de colores en donde cada uno de ellos corresponde a una porción de la gráfica.

Puedes ver la demostración en este enlace.

Cambiando tamaño del canvas con chart.js

El canvas en donde se dibuja la gráfica puede ser personalizado en cuanto a su tamaño. Acepta todos los estilos que el elemento, así que por ejemplo podríamos cambiar el ancho máximo de una gráfica usando CSS.

Entonces tenemos un elemento de canvas en nuestro HTML, importamos el estilo CSS:

See the gist on github.

Después simplemente definimos un estilo, en este caso estoy indicando el max-width:

See the gist on github.

Y de ese modo cambiamos el ancho de la gráfica. Aquí puedes ver los resultados.

Conclusión

Esta maravillosa librería permite crear bastantes modelos de gráficas en la web usando JavaScript. Lo que expliqué aquí apenas demuestra un poco del potencial de esta librería; si quieres adentrarte más puedes leer la documentación oficial.

En mi blog tengo otras entradas relacionadas, por ejemplo, si quieres refrescar la gráfica, primero debes limpiarla. También la he implementado en varios proyectos como:

• Sublime POS 3 – Sistema de ventas gratuito
• Acortador de enlaces en PHP
• Medición de temperatura con PHP

Espero traer más tutoriales sobre esta librería en el futuro. Se me ocurre mostrar cómo hacerlo desde PHP usando AJAX o imprimiendo los datos directamente desde el servidor.

Mientras tanto te dejo con el código completo de los ejemplos, todas las demostraciones y más tutoriales de JavaScript.