En los últimos años, especialmente gracias al auge del big data —campo vinculado al manejo de enormes volúmenes de datos—, creció la necesidad de contar con herramientas pertinentes para representar información histórica o estadística en la Web. Por eso, a la hora de mostrar un gráfico —de barras, de torta, radial, etc.— en nuestro sitio web, ya no sirve la tradicional opción de generarlo con una herramienta externa (como Excel), obtener una captura de pantalla e insertarla en la página. Una simple imagen no se puede agrandar ni reducir sin que pierda definición, ni es fácilmente indexable para motores de búsqueda, ni cuenta con características interactivas, ni resulta sencilla de manipular para el usuario que quiera acceder a o modificar esos datos.

Esas características siempre son deseables cuando publicamos gráficos en la Web, y para obtenerlas, podemos utilizar varias bibliotecas escritas en JavaScript, como las que recomendamos a continuación.

Chart.js

Una de las opciones más populares. Funciona sobre el elemento <canvas> de HTML5, que permite dibujar figuras a través de JavaScript; y, como la etiqueta no es soportada por Internet Explorer 7 y 8, incluye polyfills para salvar esta falencia. Ofrece seis tipos de gráficos diferentes, todos responsivos e interactivos (al tocar un sector del gráfico o pasar el mouse por encima se genera un tooltip con más información; también podemos definir eventos según nuestras propias necesidades).

Chartist.js

Potente biblioteca basada en SVG, un formato de imagen escalable y flexible. Ofrece una buena variedad de tipos de gráficos, con características de interactividad y animación, que podemos personalizar a través de Sass, un preprocesador de CSS. Incluso podemos aplicarles media queries si necesitamos adaptarlos a múltiples dispositivos. Un detalle interesante es que no requiere de bibliotecas externas (como jQuery) para funcionar, ahorrando recursos. Como aspecto negativo, varias características no son soportadas por Internet Explorer.

Google Charts

La opción de Google está basada en HTML5 y SVG, aunque puede reemplazar este lenguaje de gráficos con VML (una tecnología obsoleta) para versiones antiguas de Internet Explorer. Esto garantiza una buena compatibilidad para la mayoría de las plataformas. Hay una enorme cantidad de gráficos para elegir (incluso basados en mapas), todos ellos animados e interactivos. En comparación con otras herramientas similares, es muy fácil de utilizar, incluso para personas sin conocimientos de desarrollo. Los gráficos se pueden exportar a imágenes en PNG e incluso a otras aplicaciones.

D3.js

A diferencia de las herramientas ya mencionadas, D3.js no es una simple herramienta para generar gráficos: es una biblioteca para manipular elementos del DOM a partir de conjuntos de datos. La mayoría de las bibliotecas generan gráficos con una estructura predefinida, listos para usar, a partir de los datos que ingresamos. D3.js, sin embargo, nos permite elegir y manipular los elementos que consideremos más adecuados para representar nuestros datos, así sea una tabla, una imagen en SVG o un elemento <div>. Esto garantiza una enorme libertad y control sobre el resultado final, aunque también convierte a esta herramienta en la más complicada de la lista. Una buena opción para cuando se tienen grandes volúmenes de datos y/o las demás herramientas no pueden brindarnos el diseño visual que queremos.