Gráficos interactivos de JavaScript para sus proyectos web

Recientemente he estado mirando en gráficos de interfaz para mostrar a los visitantes, principalmente para el uso de nuestra zona próxima herramientas en Ozzu. Mis dos opciones eran o bien va a ser que un Flash basado gráfico como actualmente utilizamos para encuestas aquí, o un Javascript basado. Prefiero tener una solución de Javascript basado por varias razones, incluyendo que el gráfico a trabajar en el iPhone. Como debe saber, Flash no funciona en el iPhone o iPad.

Como Flash había basado gráficos, la mejor que he encontrado en mi opinión fue FusionCharts y parece ser una elección popular y han superado todas las otras opciones he mirado, tanto Flash y gráficos excepto por uno basado en Javascript:

JS Highcharts

Tan pronto como he visitado la Web estaba impresionado con el estilo de los gráficos, los efectos de animación suave y cuánto puede adaptar las listas según su propósito. Aquí es una captura de pantalla:



Tomar en numerosas demostraciones de highcharts aquí:

Galería de Highcharts Demo

Después de pasar por muchas de las demostraciones, lo único que puedo decir es wow. Parece increíble, sus navegadores compatibles y su sólo tan fría como un Flash basado gráfico. Esto es Javascript todos basado y trabaja fuera del marco de jQuery, o también puede utilizar herramientas de Moo o el marco de prototipo en su lugar. Estos gráficos interactivos de Javascript base puede utilizarse en aplicaciones web o sitio Web y soporta numerosos tipos gráficos incluyendo línea, spline, área, areaspline, columna, bar, circular y dispersión.

Funciona en todos los navegadores modernos como Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera y Safari. Puesto que este gráfico es Javascript todos basado y no utiliza Flash también funcionará en iPad y manzanas iPhone. Perfecto! En la mayoría de los navegadores Highcharts using SVG para representar gráficos, mientras utiliza VML de Internet Explorer. Internet Explorer no admite realmente los SVG hasta la versión 9, por lo que esto permite las listas trabajar en Internet Explorer 6, 7 y 8.

Destacar las características incluyen:

Libre para no comerciales
Código abierto - permite para su propio personales modificaciones y flexibilidad
Basada en tecnologías de explorador nativo (no software flash o propiedad requerido)
No PHP o ASP.NET
Puro Javascript y funciona con cualquiera de los siguientes marcos: jQuery, MooTools, o prototipo
Numerosos tipos de gráficos
Sintaxis de configuración sencilla
Dinámico - puede agregar, quitar o modificar el gráfico en tiempo real después de la creación del gráfico (muy bien)
Varios ejes - le permite comparar variables en diferentes escalas (es decir la temperatura frente a las lluvias)
Etiquetas de información sobre herramientas
Eje de fecha y hora - ya que muchos usuarios tienden a utilizar las fechas con gráficos, Highcarts es muy inteligente sobre valores de hora
Exportación e impresión - si habilita el módulo de exportación, los usuarios pueden exportar al formato PNG, JPG, PDF o SVG (también muy cool!)
Zoom
Externa de datos carga (muy bien)
Gráfico invertida o eje invertida
Rotación del texto para etiquetas

Cuando vaya a través de la Galería de demostración de Highcharts puede obtener ideas para todo tipo de usos diferentes que puede utilizar. Un ejemplo que me destaca es cómo podría mostrar sus visitas diarias de Google Analytics mediante AJAX para mostrar un gráfico mucho mejor (nunca me ha gustado gráficos de Google Analytics). Una captura de pantalla es a continuación:



Si echamos un vistazo al Highcharts opciones de referencia puede ver cómo puede personalizar esta biblioteca Javascript gráfico es. Incluye a todo tipo de grandes opciones que hace esto, en mi opinión, la mejor opción para lo que desea utilizar para los gráficos en el sitio Web. Highcharts sopla todas las otras soluciones de Javascript basado del agua y es incluso mejor que el Flash o simplemente como una buena base de gráficos que existen.

Es completamente interactivo, especialmente cuando se combina con AJAX. Echa un vistazo a esto:

http://www.highcharts.com/demo/dynamic-update

Que tenga datos aleatorios y se puede ver que el gráfico dinámicamente continúa actualizando. ¿Que es guay? Podría hacer fácilmente esta demo AJAX basado y capturar datos desde el servidor si desea.