Biblioteca de gráficos de JavaScript

¿Alguien recomendaría una biblioteca de gráficos de JavaScript en particular, específicamente una que no use flash en absoluto?

Hay un número creciente de soluciones de código abierto y comerciales para gráficos de JavaScript puro que no requieren Flash. En esta respuesta solo presentaré las opciones de código abierto.

Hay 2 clases principales de soluciones JavaScript para gráficos que no requieren Flash:

• Basado en lienzo, renderizado en IE usando ExplorerCanvas que a su vez se basa en VML
• SVG en navegadores basados ​​en estándares, representados como VML en IE

Hay ventajas y desventajas de ambos enfoques, pero para una biblioteca de gráficos, recomendaría el siguiente porque está bien integrado con DOM, lo que permite manipular elementos de gráficos con el DOM y, lo más importante, configurar eventos DOM. Por el contrario, las bibliotecas de gráficos de Canvas deben reinventar la rueda DOM para gestionar eventos. Entonces, a menos que tenga la intención de construir gráficos estáticos sin manejo de eventos, las soluciones SVG / VML deberían ser mejores.

Para las soluciones SVG / VML hay muchas opciones, que incluyen:

• Dojox de gráficos , buena si se utiliza el kit de herramientas Dojo ya
• Soluciones basadas en Rafael

Raphael es una biblioteca gráfica de código abierto muy activa, bien mantenida y madura con muy buena compatibilidad entre navegadores, incluidos IE 6 a 8, Firefox, Opera, Safari, Chrome y Konqueror. Raphael no depende de ningún marco de JavaScript y, por lo tanto, se puede usar con Prototype, jQuery, Dojo, Mootools, etc.

Hay varias bibliotecas de gráficos basadas en Raphael, que incluyen (entre otras):

• gRaphael , una extensión de la biblioteca gráfica Raphael
• Ico , con una API intuitiva basada en una sola llamada de función para crear gráficos complejos

Divulgación: soy el desarrollador de uno de los tenedores Ico en github .

Si está utilizando jQuery, he encontrado que flot es muy bueno; pruebe los ejemplos para ver si se ajustan a sus necesidades, pero he descubierto que hacen la mayor parte de lo que necesito para mi proyecto actual.

Además, ExtJS 4.0 ha introducido un gran conjunto de gráficos, muy poderoso, y está diseñado para trabajar con datos en vivo.

¡Visite http://www.highcharts.com !

Highcharts es una biblioteca de gráficos escrita en JavaScript puro, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web o aplicación web. Highcharts actualmente admite los tipos de gráfico de línea, spline, área, spline de áreas, columna, barra, pastel y dispersión.

Tal vez no sea exactamente lo que está buscando, pero
la API Chart de Google es bastante genial y fácil de usar.

Hay otra biblioteca de JavaScript basada en SVG. Se llama Protovis y proviene de Stanford Visualization Group

También permite hacer agradables gráficos interactivos y visualizaciones.

http://vis.stanford.edu/protovis/ex/

Aunque es solo para navegadores web modernos

ACTUALIZACIÓN: El equipo de protovis se mudó a otra biblioteca llamada d3.js (Documentos controlados por datos) ya que dijeron:

"El equipo de Protovis ahora está desarrollando una nueva biblioteca de visualización, D3.js, con soporte mejorado para animación e interacción. D3 se basa en muchos de los conceptos de Protovis"

La nueva biblioteca ahora se puede encontrar en:

http://mbostock.github.com/d3/

ACTUALIZACIÓN 2:

"Rickshaw" es un kit de herramientas de JavaScript para crear gráficos interactivos de series temporales. Basado en d3.js que simplifica mucho el trabajo con d3.js, aunque es un poco menos potente.

http://code.shutterstock.com/rickshaw/

Recientemente estaba buscando una biblioteca de gráficos de JavaScript y evalué un montón antes de finalmente establecerme en jqplot que se ajustaba muy bien a mis requisitos. Como mencionó la respuesta de Jean Vincent, realmente está eligiendo entre una solución basada en lienzo y una basada en svg.

En mi opinión, los principales pros y contras fueron los siguientes. Las soluciones basadas en SVG como Raphael (y ramificaciones) son excelentes si desea construir gráficos altamente dinámicos / interactivos. O bien, si los requisitos de los gráficos están muy fuera de la norma (por ejemplo, si desea crear algún tipo de gráfico híbrido o se le ocurrió una nueva visualización que nadie más ha pensado aún). La desventaja es la curva de aprendizaje y la cantidad de código que tendrá que escribir. No golpeará gráficos en unos minutos, prepárese para invertir un tiempo de aprendizaje real y luego escribir una buena cantidad de código para producir un gráfico relativamente simple.

Si sus requisitos de gráficos son razonablemente estándar, por ejemplo, si desea algunos gráficos de líneas o barras o quizás un gráfico circular o dos, con interactividad limitada, entonces vale la pena buscar soluciones basadas en lienzo. Apenas habrá una curva de aprendizaje, podrá obtener gráficos básicos en unos minutos, no necesitará escribir mucho código, unas pocas líneas de javascript / jquery básico serán todo lo que necesita. Por supuesto, solo podrá producir los tipos específicos de gráficos que admite la biblioteca, generalmente limitados a varios tipos de líneas, barras y pasteles. Las opciones de interactividad serán extremadamente limitadas, es decir, inexistentes para muchas de las bibliotecas existentes, aunque algunos efectos de desplazamiento limitado son posibles con las mejores.

Fui con JQplot, que es una solución basada en lienzo, ya que realmente solo necesitaba algunos tipos estándar de gráficos. De mi investigación y jugando con las diversas opciones, encontré que era razonablemente completo (si solo buscas los gráficos estándar) y extremadamente fácil de usar, por lo que lo recomendaría si tus requisitos son similares.

Para resumir, gráficos simples y deseados ahora, luego vaya con JQplot. Complejo / diferente y no presionado por el tiempo, entonces ve con Rafael y sus amigos.

jqPlot es genial. Si sus requisitos son bastante "normales" y solo desea dibujar algunos gráficos, probablemente esté abrumado por la cantidad de opciones de gráficos js. Asumiendo que no quieres hacer horas de investigación, solo ve con jqPlot, ya que probablemente sea tu mejor opción. Cubre bien la mayoría de los casos de uso para la mayoría de las personas. Algunas de las alternativas están especializadas en cierto tipo de gráfico o construidas con un determinado caso de uso en mente.

Como algún tipo de respuesta tardía, intente d3.js
http://mbostock.github.com/d3/

Es la continuación de protovis.
La gran diferencia de flot está en la cantidad de funciones admitidas.
Aunque flot puede ser más simple, d3.js es definitivamente más poderoso.

Flotr es otra biblioteca de gráficos Javascript pura basada en Prototype e inspirada en Flot

Prueba PlotKit

Recomiendo gRaphaël para gráficos de JavaScript puro junto con la biblioteca de gráficos vectoriales de JavaScript puro en la que se basa ( Raphaël ).

Actualmente, gRaphaël es compatible con Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+.

• un marco: http://www.simile-widgets.org/

un básico: http://www.filamentgroup.com/examples/charting_v2/index_2.php

guapo: http://www.highcharts.com/

Otro es RGraph: tablas Javascript y biblioteca de gráficos:

http://www.rgraph.net

Basado en lienzo, por lo que es rápido y hay aproximadamente 20 tipos de gráficos diferentes. ¡Es gratis para uso no comercial también!

Mi favorito (flot) ya ha sido mencionado.

Pero asegúrese de investigar Ortho . Es excelente para diagramas de árboles y líneas de tiempo.

Hay mucha actividad en la biblioteca de gráficos de dojo, y lo que es genial, lo estoy usando dentro de una aplicación de AIR sin problemas también, ¡genial! Ver por ejemplo allí http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Consulte la API de visualización de Google , que es una especie de generalización de la API de gráficos más simple

http://code.google.com/apis/visualization/documentation/gallery.html

Tiene opciones interactivas muy interesantes que incluyen mapas, indicadores y gráficos.

Acabamos de comprar una licencia de TechOctave Charts Suite para nuestro nuevo inicio. Los recomiendo mucho. La licencia es simple. ¡Los gráficos se ven geniales! Fue fácil comenzar y tiene una API poderosa para cuando la necesitamos. Me sorprendió lo limpio y extensible que es el código. Muy contento con nuestra elección.

Pruebe la línea de tiempo de similitud del MIT que podría convertirse en un gráfico: http://simile.mit.edu/timeline/

o el último, http://code.google.com/p/gchart/

No es una biblioteca de Javascript, pero puede ser una alternativa adecuada: consulte los Gráficos de Google donde puede generar gráficos pasando datos de cadena de consulta a su servicio web.

Echa un vistazo a Bluff . Es un puerto JavaScript de la biblioteca de gráficos Gruff para Ruby.

Protochart es todo lo que necesitas

Sencha adquirió Raphael y ahora sus gráficos son javascript puro a partir de la versión 4. Emprise y HighCharts mencionados anteriormente son mis dos favoritos.

http://www.sencha.com/

Para los gráficos más inusuales: http://thejit.org/

Puedo recomendar ArcadiaCharts . Una nueva biblioteca de gráficos profesionales para JavaScript y GWT. Se ejecuta en todos los navegadores sin complementos. Fácil y rápido de usar: crea gráficos de gran apariencia con solo unas pocas líneas de código. Gratis para uso no comercial.

Fusion Chart tiene una nueva biblioteca javascript / jquery que parece prometedora.

En caso de que lo que necesite sea solo un gráfico de barras. Publiqué un código que he estado usando en un proyecto antiguo. Alguien me dijo que la implementación de VML no funciona en las versiones recientes de IE, pero el SVG debería funcionar bien. Podría volver al proyecto y lanzar algunos renderizadores del lado del servidor que ya tengo y tal vez la capa de representación WebGL. Hay un enlace: http://blog.conquex.com/?p=64

Probablemente no sea lo que está buscando el OP, pero dado que esta pregunta se ha convertido en una lista de opciones de la biblioteca de gráficos JS: jQuery Sparklines es realmente genial.

Echa un vistazo a ZingChart HTML5 Canvas, SVG, VML y Flash Charts . Biblioteca muy potente y compatible. Estoy en el equipo de Zing: cuéntanos en twitter @zingchart o envía cualquier pregunta a [email protected].