Librerias Javascript para generar gráficas y diagramas
Uno de los requisitos más habituales de las aplicaciones es mostrar datos en forma de diagramas o gráficas. Gráficas de barras, de líneas, de tarta y diagramas en los que se presentan esquemas de forma visual. Con todas las tecnologías Javascript disponibles en los navegadores en HTML5, como canvas o SVG, es posible crear gráficas completamente personalizables y con una estética cuidada.
Por supuesto, los datos los podemos tener en las bases de datos y lo normal es acceder a ellos mediante la programación del lado del servidor, pero la mejor solución para representarlos en una página web es por medio de programación del lado del cliente. En este post vamos a ver algunas de las librerías más importantes open source para crear gráficas y diagramas con Javascript, centrándonos en las más potentes y conocidas.
Chart.JS
Comenzamos por Chart.js, no porque sea la más potente, sino porque combina la sencillez con una adecuada cantidad de funcionalidades. Chart.js trabaja con el elemento canvas y permite gráficas de todo tipo, barras, líneas, de tarta, de dispersión, radar, etc. No solo eso, además permite animación y se puede extender mediante plugins.
D3.js
Esta es la librería más completa para realizar todo tipo de gráficos en Javascript. Combina el poder del elemento canvas con el de SVG, junto con la manipulación del DOM, para crear la mayor gama de diagramas que nos podamos imaginar. Su objetivo va más allá de las gráficas para mostrar datos estadísticos habituales, pudiendo generar diagramas de la más variada forma. Si lo que necesitas es una sencilla herramienta para crear gráficas quizás sea una librería demasiado compleja, ya que requiere un estudio profundo para sacarle el partido.
C3.js
Aquí tenemos una alternativa de uso de la librería D3, pero con una interfaz más elemental para los programadores. C3 hace mucho más fácil la generación de gráficas habituales para el trabajo estadístico y la visualización de datos, como las gráficas de líneas, áreas, barras, puntos, etc. Por debajo usa el motor de D3 por lo que sus posibilidades también son grandes y potentes.
MetricsGraphics.js
Esta es otra alternativa de librería de gráficos estadísticos, basada en D3. Sigue la filosofía de C3, ofreciendo una interfaz de programación más sencilla y trabajando por debajo con la potente D3. Es interesante para considerar, porque los gráficos tienen otro aspecto que la mencionada en el punto anterior y quizás los podamos preferir.
Chartist
Si lo que estamos buscando es un sistema de generación de gráficas optimizado, en lo que respecta al tamaño de la librería, para mantener nuestro Javascript ligero, una buena opción es Chartist. Su peso es de 10KB (comprimido con Gzip), lo que lo hace una alternativa muy adecuada para descarga en aplicaciones de desarrolladores que se preocupan por el tamaño de su sitio web.
Conclusión
Entre estas alternativas de librerías para generación de gráficos en Javascript encontrarás posibilidades para todos los gustos. Por supuesto que en el ecosistema Javascript hay muchas otras posibilidades, pero aquí tienes las principales, de código abierto y con diversos enfoques y alcances.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.