Estas son las mejores bibliotecas de gráficos de JavaScript para 2019

Primero, una breve historia:

Dado que la recopilación y el uso de datos continúan aumentando exponencialmente, la necesidad de visualizar estos datos se vuelve más importante. Los desarrolladores buscan consolidar millones de registros de bases de datos en hermosos gráficos y paneles de control que los humanos puedan interpretar de forma rápida e intuitiva.

La tecnología de visualización de datos ha seguido mejorando durante la última década y muchas bibliotecas de gráficos avanzadas están ahora disponibles para los consumidores. A principios de la década de 2000, la generación de gráficos estaba dominada por gráficos de mapas de bits de imágenes del lado del servidor. Los complementos como Flash y Silverlight ofrecían una experiencia de creación de gráficos más interactiva pero con un alto costo en la velocidad de descarga, la duración de la batería y los recursos del sistema.

Con la explosión del uso de dispositivos móviles y tabletas, los complementos ya no eran compatibles con las principales plataformas y los desarrolladores tuvieron que cambiar a tecnologías abiertas del lado del cliente que pudieran ejecutarse en todas partes. Al mismo tiempo, el advenimiento de pantallas de muy alta resolución y el zoom más común a través de gestos táctiles llevaron a los gráficos vectoriales independientes de la resolución a un primer plano.

Ingrese a la era actual de visualización de datos dominada por JavaScript y SVG (Scalable Vector Graphics). Los gráficos ahora se ejecutan en todos los navegadores, sin complementos especiales, admiten interactividad y animaciones y se ven nítidos incluso en los dispositivos de mayor resolución. Al revisar más de 50 bibliotecas de visualización, estos 9 productos se destacaron:

D3.js

D3.js es una biblioteca de JavaScript de gráficos muy extensa y potente. Le permite vincular datos arbitrarios a un modelo de objetos de documento (DOM) y luego aplicar transformaciones basadas en datos al documento.

D3 va mucho más allá de las bibliotecas de gráficos típicas, incluidos muchos otros módulos técnicos más pequeños, como ejes, colores, jerarquías, contornos, suavizado, polígonos y más. Todo esto lo convierte en una curva de aprendizaje empinada.

Intentar crear un gráfico simple puede resultar complicado. Todos los elementos, incluidos los ejes y otros elementos del gráfico, deben definirse explícitamente. Muchas muestras muestran cómo se puede usar CSS para diseñar elementos de gráficos. No se aplican funciones basadas en gráficos automáticamente. Si desea meterse en la maleza y usar la creatividad para controlar completamente cada elemento, es la mejor opción. Trabajar contra reloj para cumplir con los requisitos del proyecto de visualización de datos puede que no sea la mejor opción para empezar desde cero.

D3.js puede ser un componente básico para una biblioteca de gráficos. Los desarrolladores han utilizado D3 para facilitar el uso de soluciones de gráficos que lo consumen, como NVD3.

D3.js es de código abierto y de uso gratuito.

JSCharting

La biblioteca de gráficos JSCharting admite una gran cantidad de tipos de gráficos, incluidos mapas, gantt, stock y otros que a menudo requieren bibliotecas independientes para su uso. Incluye mapas integrados de todos los países del mundo y una biblioteca de iconos SVG. Un conjunto de micrográficos independientes se puede representar en cualquier etiqueta de gráfico o en cualquier elemento div de una página. También se incluyen controles de interfaz de usuario (UiItems) que permiten gráficos interactivos más ricos. Controlar datos o variables de visualización en tiempo real es fácil y los gráficos se pueden exportar a formatos SVG, PNG, PDF y JPG.

La galería se divide en muestras de características y tipos de gráficos. El estilo de los gráficos está pulido y produce algunos gráficos de aspecto limpio. Las imágenes generales brindan una experiencia de gráficos limpia y profesional.

Las muestras incluidas utilizan un objeto de configuración para personalizar gráficos. La configuración para crear y controlar tipos de gráficos es muy simple de usar. Se necesitan pocas configuraciones de propiedad para especificar tipos de gráficos más complejos y JSCharting tiene valores predeterminados fuertes y dinámicos, lo que significa que intenta elegir la mejor configuración para los escenarios automáticamente.

La documentación incluye muchos tutoriales y descripciones detalladas de las propiedades de la API. Muchas propiedades incluyen ejemplos de uso y enlaces de muestra.

JSCharting es gratuito para uso personal y no comercial y también ofrece opciones de licencia comercial que incluyen todos los tipos de gráficos y productos por una tarifa única.

Highcharts

Highcharts es una popular biblioteca de gráficos de JavaScript utilizada por muchas de las empresas más grandes del mundo. Los gráficos se generan usando SVG y se utilizan como respaldo a VML para la compatibilidad con versiones anteriores hasta IE6 / IE8. Los gráficos de demostración demuestran un conjunto de funciones bastante rico, pero no sorprenden visualmente. La documentación general incluye tutoriales para muchos temas relevantes y la documentación de la API es completa.

El gráfico utiliza opciones de configuración para crear gráficos y la API es fácil de usar.

Highcharts es gratuito para uso personal y no comercial. Se requiere una licencia comercial para otros usos y las acciones, mapas y diagramas de Gantt se licencian por separado.

amCharts

amCharts ha lanzado recientemente su versión 4 que agrega un potente motor de animación SVG que permite crear escenas parecidas a películas.

Los gráficos de demostración se ven muy bien. La mayoría de las demostraciones ofrecen varias paletas y una interfaz de usuario deslizante para ajustar las variables del gráfico en tiempo real. La documentación incluye muchos tutoriales y descripciones completas de las propiedades de la API.

La creación de un gráfico se siente ligeramente diferente del enfoque basado en la configuración y, en su lugar, utiliza una API más declarativa. Requiere un poco más de código para configurar gráficos, pero brinda una mejor experiencia de finalización de código.

amCharts ofrece una licencia gratuita con gráficos de marca y licencias pagas para otros usos.

Gráficos de Google

Los gráficos de Google son potentes y fáciles de usar.

Los gráficos de muestra se ven limpios y son agradables a la vista. La galería y la galería extendida muestran muchos tipos de gráficos, pero al presionar el menú de hamburguesas se muestran más tipos (como el calendario) que no se muestran en estas listas de la galería.

Cada tipo de gráfico tiene un tutorial dedicado con ejemplos en vivo. Los tutoriales incluyen código para las funciones relacionadas y listados de API. Esta es una experiencia agradable comenzar con una nueva biblioteca de gráficos.

Los gráficos se personalizan mediante el objeto de opciones de configuración. Los conjuntos de datos se completan mediante una clase DataTable que pueden consumir todos los gráficos. Cada tipo de gráfico tiene opciones únicas enumeradas en los tutoriales específicos del tipo. La denominación de las propiedades está estandarizada y muchas opciones funcionan en todos los tipos.

Los gráficos de Google son gratuitos, pero hay una advertencia. Es un servicio web y no se puede alojar localmente. En el pasado, Google ha retirado las API, por lo que si su uso es fundamental, es posible que desee elegir otra opción.

ZingChart

ZingChart ofrece muchos tipos de gráficos y se integra con marcos angulares, reactivos y otros. Tiene un sólido conjunto de funciones con muchas opciones de personalización.

Los gráficos de demostración muestran una variedad de temas de estilo, algunos de los cuales se ven mejor que otros, pero las opciones para diseñarlos según sea necesario están ahí. Las demostraciones no demuestran todos los tipos de gráficos disponibles.

La documentación incluye tutoriales para todos los tipos disponibles, una buena cantidad de funciones y una lista completa de API.

ZingChart usa opciones de configuración para personalizar gráficos. Las muestras incluyen muchas configuraciones de propiedades, como el estilo de fuente. Estos pueden obstaculizar la comprensión de los ajustes necesarios para un gráfico determinado.

ZingChart se puede utilizar de forma gratuita con la marca. Las licencias pagas están disponibles para uso sin marca.

FusionCharts

FusionCharts ha existido durante muchos años, comenzando como un complemento de gráficos basado en Flash. Es una biblioteca robusta de visualización de gráficos. Admite muchos formatos de datos, incluidos XML, JSON y JavaScript, funciona en navegadores modernos y es compatible con versiones anteriores de IE6. También se admiten muchos marcos de JavaScript y lenguajes de programación del lado del servidor.

La galería de gráficos incluye una gran cantidad de ejemplos y tienen una apariencia visual limpia.

La documentación incluye buenas descripciones de API y ejemplos de cada tipo de gráfico. Las propiedades de configuración están agrupadas por tareas y características del gráfico.

Los gráficos se crean utilizando opciones basadas en la configuración y son relativamente fáciles de usar. La lista de propiedades puede ser larga cuando se profundiza en la API. Todas las propiedades de configuración son superficiales, como {chartLeftMargin, showAlternateHGridColor}. Parece un intento de mejorar la finalización del código.

FusionCharts es gratuito para uso personal con la marca del gráfico. Las licencias pagas están disponibles para uso comercial y sin marca.

KOOLCHART

KoolChart es una biblioteca de gráficos JavaScript basada en lienzo HTML 5. También está disponible un producto de mapeo y cuadrícula.

Su nueva versión v5 incluye un conjunto de funciones más interactivas y un estilo actualizado. Las imágenes son limpias y modernas. El uso de lienzo ofrece un mejor rendimiento a expensas de estar basado en ráster.

Las muestras utilizan un XML basado en cadenas para aplicar opciones de gráficos, lo que parece menos práctico que otros enfoques. Estas opciones se parecen a HTML5 pero se establecen mediante una cadena de JavaScript.

La API está bien documentada con gráficos de ejemplo para cada propiedad. También está disponible un manual en PDF de 173 páginas.

Un período de prueba de dos meses está disponible para evaluación. Se requiere la licencia después de que expire el período de prueba.

Chart.js

Chart.js es una biblioteca de JavaScript de código abierto que admite 8 tipos de gráficos. Es una pequeña biblioteca js de solo 60kb. Los tipos incluyen gráficos de líneas, gráficos de barras, gráficos de áreas, radar, gráficos circulares, de burbujas, gráficos de dispersión y mixtos. También se admite una serie temporal. Utiliza el elemento de lienzo para la representación y responde al cambio de tamaño de la ventana para mantener la granularidad de la escala. Es compatible con versiones anteriores de IE9. Polyfills también está disponible para trabajar con IE7.

Las imágenes de muestra tienen un aspecto bastante moderno e incluyen animaciones iniciales cuando se dibuja por primera vez. Se anima sin problemas al agregar series o puntos de datos en tiempo real. Las opciones del gráfico se pueden modificar después y al llamar a una función update () se vuelve a dibujar el gráfico.

El código fuente de muestra no se muestra en la galería del sitio web, pero está disponible en el repositorio de GitHub. Las opciones de configuración se utilizan para crear y modificar gráficos. La API de opciones es limpia e intuitiva.

La documentación es completa e incluye tutoriales con API de propiedades y fragmentos de código.

Chart.js es una biblioteca de código abierto y de uso gratuito para uso personal y comercial, lo cual es una ventaja. El número limitado de tipos puede ser un problema para los requisitos de paneles más avanzados.

Conclusión

El ecosistema de bibliotecas de gráficos de JavaScript ha evolucionado considerablemente durante la última década. Hoy en día, existe una gran cantidad de productos de gráficos que cumplen con requisitos muy diversos y sirven a una amplia gama de proyectos a través de cientos de tipos de gráficos. La mayoría de las bibliotecas ofrecen una versión de prueba gratuita o de marca que le permite evaluar la eficacia del gráfico con sus propios datos, carga y complejidad del proyecto.

Es fácil para la mayoría de las bibliotecas de gráficos trabajar con visualizaciones estáticas y conjuntos de datos seleccionados simples. Sin embargo, es posible que los gráficos no siempre manejen las cosas sin problemas cuando se visualizan datos dinámicos del mundo real. Es posible que se requiera más trabajo para ajustar y organizar los elementos de modo que los gráficos se vean correctos y este ajuste manual puede romperse a medida que se visualizan nuevos datos dinámicos.

Para seleccionar la mejor solución de gráficos JS para sus necesidades únicas, le recomiendo probar sus propios datos con un par de las bibliotecas enumeradas anteriormente para garantizar un ajuste ideal para sus proyectos actuales y futuros.