You are on page 1of 2

8 libreras de javascript para crear grficos

interactivos
Chart JS
Chart.js es una librera sin dependencias para construir grficos de 6 tipos distintos: grficos
lineales, grficos de barras, grficos radiales, grficos circulares y grficos de sectores. La
librera est modulada para que no cargues los grficos que no vas a utilizar. Es compatible
con diseos responsives y puedes cambiar fcilmente variables como el color o las
animaciones para personalizar an ms la interfaz grfica.

Chartist JS
Chartist JS es una gran librera para crear grficos responsive que hagan uso de SVG.
Adems de su gran capacidad de respuesta, Chartist te otorga flexibilidad mediante una clara
separacin de sus dos principales componentes: el estilo con css y el control con JS. Para
hacer ms fcil la personalizacin, se incluyen los archivos SASS. Lo bueno de esta librera es
que existen un sinfn de opciones para animar los grficos utilizando la API de animacin de
Chartist, SMIL, que te proporciona opciones de animacin adicionales.

C3 JS
C3 JS es una librera para crear grficos basados en D3 JS. Rene el cdigo necesario para
crear grficos con D3 JS, por lo que puedes saltarte la implementacin de D3, y solo introducir
los datos necesarios. C3 viene con una gran variedad de APIs que puedes utilizar para
controlar tus grficos de forma fcil. Para personalizar los grficos, establece tus propios
estilos personalizados a las clases de CSS dadas. Echa un vistazo a esta pgina para ver
como funciona la librera.

Flot
Flot es un plugin de jQuery para crear grficos con elementos interactivos tales como puntos
en las grficas interactivos, paneos, zooms y mucho ms. Flot viene con una gran variedad de
opciones que puedes aadir en las grficas que insertes en tu sitio web. He aqu unos cuantos
plugins que puedes utilizar sin problema alguno. Las grficas funcionarn perfectamente en
aquellos navegadores que soporten canvas de HTML.

Echart
Echart es una sorprendente librera de China que soporta distintos tipos de grficos, puede
procesar un gran nmero de datos (pudiendo trazar hasta 200.000 puntos en un grfico
cartesiano), cuenta con escalado, capacidad de extraer, integrar e intercambiar datos entre
grficos, que permite una total integracin de grficos en los que poder cambiar el tipo de un
modo muy, pero que muy sencillo.

Peity
Peity te permite aadir mini grficos en tu pgina web. Es un pequeo plugin de jQuery que
transforma un elemento en un mini grfico lineal, de barras, sectorial o circular SVG. Solo
necesitas crear un elemento y darle un valor como 1/5, para despus realizar una llamada a
peity('pie') en dicho elemento para crear un mini grfico de sectores. Por ejemplo, para crear
un grfico sectorial en el que 1/5 se remarque, puedes aadir este cdigo:

<span class="donut">1/5</span>

Puedes personalizar el color del grfico, el radio, el ancho y el alto, pero por defecto se
muestra en un tamao pequeo.

DC JS
DC JS es muy similar a C3 JS in trminos de motor utilizado. Ambos utilizan la librera D3 para
renderizar grficos en SVG. DC JS est creada para ayudarte a visualizar datos en
navegadores y dispositivos mviles. Ya que aprovecha el D3 JS, te permite agregar funciones
de interaccin en tus grficos. DC JS es una librera de gran alcance, para crear grficos
desde el ms simple, hasta el ms complejo.

Google Chart
Puedes crear grficos interactivos y herramientas para datos utilizando la API Google
Visualization de Google Chart. Para utilizarlo, inserta simplemente el javascript en tu pgina
web para cargar las libreras de Google Chart que necesites. Despus, lista los datos que
desees trazar y personalzalo mediante las opciones que hay para ello. Por ltimo crea un
objeto de grfico con un id, y en el layout, crea un div con ese id para mostrar el grfico.

You might also like