Tienes en tu mano un montón de datos que tienes que transmitir a los visitantes de tu web de forma clara y concisa. Antes que nada, debes organizar esos datos para que sean entendibles por todo el mundo de algún modo, ¿verdad? Ahí es donde entran en juego los gráficos. En el diseño web, los gráficos son la mejor herramienta para la visualización de datos. Son fáciles de leer y de interpretar, y para los desarrolladores, sencillos de implementar.
Pero vamos a elevar esto a un nivel superior: vamos a añadir animaciones e interactividad en las tablas, para que los lectores no solo aprendan algo nuevo con el gráfico, sino que también puedan jugar con ellas. En realidad, es más sencillo de lo que parece, gracias a una serie de librerías de JS que hay por la red. Vamos a chequear estas librerías...
Chart JS
Chart.js es una librería sin dependencias para construir gráficos de 6 tipos distintos: gráficos lineales, gráficos de barras, gráficos radiales, gráficos circulares y gráficos de sectores. La librería está modulada para que no cargues los gráficos que no vas a utilizar. Es compatible con diseños responsives y puedes cambiar fácilmente variables como el color o las animaciones para personalizar aún más la interfaz gráfica.
Chartist JS
Chartist JS es una gran librería para crear gráficos responsive que hagan uso de SVG. Además de su gran capacidad de respuesta, Chartist te otorga flexibilidad mediante una clara separación de sus dos principales componentes: el estilo con css y el control con JS. Para hacer más fácil la personalización, se incluyen los archivos SASS. Lo bueno de esta librería es que existen un sinfín de opciones para animar los gráficos utilizando la API de animación de Chartist, SMIL, que te proporciona opciones de animación adicionales.
C3 JS
C3 JS es una librería para crear gráficos basados en D3 JS. Reúne el código necesario para crear gráficos con D3 JS, por lo que puedes saltarte la implementación de D3, y solo introducir los datos necesarios. C3 viene con una gran variedad de APIs que puedes utilizar para controlar tus gráficos de forma fácil. Para personalizar los gráficos, establece tus propios estilos personalizados a las clases de CSS dadas. Echa un vistazo a esta página para ver como funciona la librería.
Flot
Flot es un plugin de jQuery para crear gráficos con elementos interactivos tales como puntos en las gráficas interactivos, paneos, zooms y mucho más. Flot viene con una gran variedad de opciones que puedes añadir en las gráficas que insertes en tu sitio web. He aquí unos cuantos plugins que puedes utilizar sin problema alguno. Las gráficas funcionarán perfectamente en aquellos navegadores que soporten canvas de HTML.
Echart
Echart es una sorprendente librería de China que soporta distintos tipos de gráficos, puede procesar un gran número de datos (pudiendo trazar hasta 200.000 puntos en un gráfico cartesiano), cuenta con escalado, capacidad de extraer, integrar e intercambiar datos entre gráficos, que permite una total integración de gráficos en los que poder cambiar el tipo de un modo muy, pero que muy sencillo.
Peity
Peity te permite añadir mini gráficos en tu página web. Es un pequeño plugin de jQuery que transforma un elemento en un mini gráfico lineal, de barras, sectorial o circular SVG. Solo necesitas crear un elemento y darle un valor como 1/5, para después realizar una llamada a peity('pie') en dicho elemento para crear un mini gráfico de sectores. Por ejemplo, para crear un gráfico sectorial en el que 1/5 se remarque, puedes añadir este código:
<span class="donut">1/5</span>
Puedes personalizar el color del gráfico, el radio, el ancho y el alto, pero por defecto se muestra en un tamaño pequeño.
DC JS
DC JS es muy similar a C3 JS in términos de motor utilizado. Ambos utilizan la librería D3 para renderizar gráficos en SVG. DC JS está creada para ayudarte a visualizar datos en navegadores y dispositivos móviles. Ya que aprovecha el D3 JS, te permite agregar funciones de interacción en tus gráficos. DC JS es una librería de gran alcance, para crear gráficos desde el más simple, hasta el más complejo.
Google Chart
Puedes crear gráficos interactivos y herramientas para datos utilizando la API Google Visualization de Google Chart. Para utilizarlo, inserta simplemente el javascript en tu página web para cargar las librerías de Google Chart que necesites. Después, lista los datos que desees trazar y personalízalo mediante las opciones que hay para ello. Por último crea un objeto de gráfico con un id, y en el layout, crea un div con ese id para mostrar el gráfico.
NVD3
NVD3 es un conjunto de gráficos reutilizables y componentes que están desarrolladas con D3 JS. Esta librería es por tanto una “plantilla” que te ayudará a construir gráficos de forma sencilla. Echa un vistazo a los gráficos de ejemplo construidos con NVD3 aquí.