Screen shot below, reads data from some database – I think I can get my head around reading data from DB with some RubyOnRails tutorial I am following – but then how should I be able to represent that data in a pretty shape that they want like this picture below?
What tools, frameworks, etc. should I get myself familiar with very quick to be able to represent the data like this?
Since I am should focus on Rails, it would be great if what you suggest is in something that integrate well with Rails too…
Screen shot2: for this one I “think” somehow I can use “Google Charts” but still good to have your suggestions too.
To make charts you use javascript. There is a lot of libraries out there.
Those small charts in the first picture are called sparklelines. They can be made with this jquery plugin
jQuery Sparklines
And this pure javascript tool
sparklines.js
For other charts I think the best free one is the d3 library and spesially the nvd3 library witch is built on top of the d3 library.
There are also some solutions with the Raphaël—JavaScript Library.
One is gRaphaël.
I personally do not like this one, but have a look.
Charting libraries often use SVG’s (Scalable Vector Graphics. Go here to learn about SVG and CSS ) to display the charts. And you feed the data from Rails trough JSON.
Rails can render JSON from the controllers and you can use jbuilder “Jbuilder gives you a simple DSL for declaring JSON structures that beats massaging giant hash structures.”
I usually end up with a custom class in the lib directory, because charting usually requires a lot of complex queries and handling of data from the database before you can send it to the chart.
You should see these railscasts. railscasts#223 railscasts#223revised
The first uses highcharts (Not free) and the last use morris.js. Morris is rather simple, but in some chases sufficient.
The last one is the best, but I guess you have to get a subscription to see it.
There is a lot to learn here, and that is fun!