Mostrando datos visuales en Ruby on Rails

Captura de pantalla a continuación, lee datos de alguna base de datos. Creo que puedo leer los datos de la base de datos con un tutorial de RubyOnRails que estoy siguiendo, pero entonces, ¿cómo puedo representar esos datos en una forma bonita que ellos quieran así? ¿imagen debajo?

¿Con qué herramientas, marcos, etc. debería familiarizarme muy rápido para poder representar los datos de esta manera?

Ya que estoy enfocado en Rails, sería genial si lo que sugieres esté en algo que se integre bien con Rails también …

introduzca la descripción de la imagen aquí

Captura de pantalla 2: para este “Pienso” de alguna manera puedo usar “Google Charts” pero aún así es bueno tener tus sugerencias también.

introduzca la descripción de la imagen aquí

Para hacer gráficos utilizas javascript. Hay muchas bibliotecas por ahí.

Esos pequeños cuadros en la primera imagen se llaman líneas de brillo. Se pueden hacer con este plugin jquery.

jQuery Sparklines

Y esta herramienta javascript pura.

sparklines.js

Para otras gráficas, creo que la mejor gratis es la biblioteca d3 y especialmente la biblioteca nvd3 que se construye sobre la biblioteca d3.

También hay algunas soluciones con Raphaël, la biblioteca de JavaScript . Uno es gRaphaël . Personalmente no me gusta este, pero eche un vistazo.

Las bibliotecas de gráficos a menudo usan SVG (gráficos vectoriales escalables. Vaya aquí para obtener información sobre SVG y CSS) para mostrar los gráficos. Y usted alimenta los datos de Rails a través de JSON.

Los Rails pueden representar JSON desde los controladores y puede usar jbuilder “Jbuilder le brinda un DSL simple para declarar estructuras JSON que superan el masaje de estructuras hash gigantes”.

Por lo general, termino con una clase personalizada en el directorio lib, ya que, por lo general, los gráficos requieren muchas consultas complejas y el manejo de los datos de la base de datos antes de que pueda enviarlos al gráfico.

Deberías ver estos ferrocarriles. railscasts # 223 railscasts # 223revised

El primero usa highcharts (no gratis) y el último usa morris.js . Morris es bastante simple, pero en algunas persecuciones es suficiente. El último es el mejor, pero creo que tienes que obtener una suscripción para verlo.

¡Hay mucho que aprender aquí, y eso es divertido!