library javascript ajax google-app-engine web-applications graph

library - javascript interactive graph



Graphing JavaScript Library (10)

Estoy creando una aplicación web en Google App Engine por diversión y me gustaría incluir gráficos para que los usuarios puedan ver algunas estadísticas. ¿Hay bibliotecas de JavaScript gratuitas (ya sea en cerveza o habla) que puedan tomar una mesa o hacer alguna llamada AJAX y mostrar un gráfico?




Noté que algunas personas mencionaron Flot pero nadie mencionó a Flotr . También en Google Code http://code.google.com/p/flotr/ .

Consulte un ejemplo de JSON, complete con el código para hacerlo, aquí mismo .

¡Requiere la librería Javascript de Prototype.js y funciona en todos los navegadores modernos!




Aquí está mi lista personal con comentarios:

  • Flot: + preajustes hermosos + muy fácil de usar (el más difícil fue convertir fechas de fecha ISO a fechas de Javascript, lo cual no es nada difícil) + usa jQuery - no hace gráficos circulares, - parece un poco abandonado pero podría ser mal acerca de eso
  • Flotr: ++ gráficos aún más bonitos que Flot + -usivos Prototype (con los que nunca he trabajado), tampoco gráficos circulares
  • YUI: + gráficos circulares! + soporte y fuerte equipo y comunidad: utiliza Flash, ugh, no maneja los ejes de tiempo tan bien como Flot.
  • API de Google charts (no una biblioteca JS): + soporte y comunidad + bonita, también -realmente tediosa construcción de las URL REST para cualquier gráfico más complejo -no soporte automático de fecha / hora

En pocas palabras, para pequeños gráficos simples usaría la API de gráficos de Google, pero para mi proyecto actual (una herramienta interna de informes) probablemente sea Flot, aunque si fuera un código orientado al cliente, probablemente cualquiera de los dos vería más lejos o probar Flotr / Prototype.


Existe la API de visualización de Google ,

Te permite crear gráficos / tablas fáciles (algunos de ellos son incluso interactivos) prácticamente cualquier cosa en javascript

google.load("visualization", "1", {packages:["areachart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn(''string'', ''Year''); data.addColumn(''number'', ''Sales''); data.addColumn(''number'', ''Expenses''); data.addRows(2); data.setValue(0, 0, ''2004''); data.setValue(0, 1, 1000); data.setValue(0, 2, 400); data.setValue(1, 0, ''2005''); data.setValue(1, 1, 1170); data.setValue(1, 2, 460); var chart = new google.visualization.AreaChart(document.getElementById(''chart_div'')); chart.draw(data, {width: 400, height: 240, legend: ''bottom'', title: ''Company Performance''}); }

aquí hay algunos ejemplos de la galería de google de visualizaciones actualmente disponibles.

http://code.google.com/apis/visualization/documentation/gallery/images/icon-areachart.png http://code.google.com/apis/visualization/documentation/gallery/images/icon-areachart.png http://code.google.com/apis/visualization/documentation/gallery/images/icon-barchart.png texto alternativo http://code.google.com/apis/visualization/documentation/gallery/images/icon-gauge .png alt text http://code.google.com/apis/visualization/documentation/gallery/images/icon-piechart.png


Highcharts se ve realmente impresionante. Está basado en jQuery o Mootools.



Flot puede crear gráficos realmente agradables. Es una biblioteca de JavaScript en lugar de un servicio como Google Charts. Sin embargo, requiere jQuery.