#223 Charts & Graphs (revised)

What would you recommend for charts in both html and a generated pdf? Ever tried one of these libs with v8 on the server?

Great episode another option is: Google Charts

Any thoughts about jqPlot?

Morris.js looks super simple to setup and use.
My line charts required logarithmic Y-axis. So I had to settle on the Google Visualization API with the Visualr Gem. However, over time, I found it somewhat rigid. Therefore, I had to go to HighCharts which can do just about everything that I need to do. As Ryan points out, it is a commercial product though.

index_by works a lot better after a group by query compard to group_by.

Found nvd3 which seems pretty nice.
Quite interesting should also be Dimensional Charting Javascript Library.

Should Time.zone.now be in a lambda?

You can also use g Raphael which is the library Raphael provides for drawing charts

first of all, thanks... that's just what i've needed now.
But does anybody know why the video content is different from the Show Notes or even the Source Code?

Edit: Sry, didn't see the Notes.

I use amCharts. It has some pretty advanced charting features for those needing them. It is a commercial product but well maintained and totally worth it. Available in Flash and Javascript versions.

Google chart is also a good tool to display live data.

Considering that Morris is Javascript (and thus doesn't generate graphs server-side), it seems disappointingly complicated to use in the sort of situations demonstrated in this episode.

Specifically, since the data to be graphed is already present in the markup, it would be nice if Morris could be instructed to create the chart directly from that tabular data as represented by the markup itself. This would reduce duplication by not having specific Rails code for generating Morris-specific data, as well as removing clutter from the rendered markup which can make it more cumbersome to do certain debugging tasks, and which is only useful to Javascript anyway (and not, e.g. screen readers).

The above could imply a situation in which all of the data is present in the markup--as opposed to say, the latest data only, with the chart perhaps a representation of a longer time-frame--but as it is, Morris still would need all of that data to be present in the markup anyway (albeit in a data attribute). This could be solved nicely via AJAX, and perhaps fetching sampled data (if the data set is large), but such a request could still respond with a document fragment containing tabular markup, and thus still removing any need for separate chart-rendering code (but possibly adding a small amount of complexity for specifying things like sample resolution). This would also be a reasonable approach when only the chart itself is meant to be shown.

It's (sadly) out of date, but there was a good Javascript library that could in fact take data directly from the markup, and used the canvas to render its output: Bluff, isn't visually polished enough by today's standards, but is a good example of such functionality in action, and really and truly is easy to use.

I'm getting 'Graph Placeholder not found' despite the div id being on the page. Any ideas?

I am getting the 'Graph Placeholder not found' aswell, which breaks most of the JS on my site, can we get a solution on this please?

Hi i can't make the charts appearing using twitter bootstrap, is there any aditional task to do to?
Thanks

I'm having issues with it too, running under bootstrap I get an error in the javascript console: "undefined is not an object (evaluating _ref.length)"

I'm using it with the test data, not even a dynamic dataset.

I just figured this out under the javascript debugger, for some reason the coffee script version does not set the xkeys or xkeys options, using plain old javascript works even under bootstrap.

Anybody having trouble getting the data attribute working on rails 3.0.1?

I have added morris and raphael inside vendor/javascripts and did call in application.js also. In my orders.js.coffee i put
jQuery ->
Morris.Line
element: 'annual'
data: [
{y: '2012', a: 100}
{y: '2011', a: 75}
{y: '2010', a: 50}
{y: '2009', a: 75}
{y: '2008', a: 50}
{y: '2007', a: 75}
{y: '2006', a: 100}
]
xkey: 'y'
ykeys: ['a']
labels: ['Series A']
for testing purpose and did add in index. But chart did not appears.

hey,

i released a gem for morris.js so you don't need to add the assets manually.

You can find it over at Github (https://github.com/beanieboi/morrisjs-rails)

So dumping orders array into data-attribute exposes all the attributes stored in db to Morris. What would be the best way to inject virtual attributes to the objects in array handed over to javascript side?

Thanks Ryan :-)

Hi guys,

I am new to rails. How do I make this example show the data by hour?

My database has two relevant columns: "data_time" and "values". I have a few values per hour, so, I wanted to plot them all. I was able to group by hour changing:

group("date(data_time)")

to:

group("strftime('%Y-%m-%d %H', data_time)")

But the graph still shows only per day. I suspect it has something to do with:

(start.to_date..Date.today).map do |date|

but I can't figure out what it is!

I adapted Ryan's example to the code below, which works just fine on SQLite. However, on PostgreSQL (Heroku), I get the error

PGError: ERROR: column "users.created_at" must appear in the GROUP BY clause or be used in an aggregate function

Any ideas on making this work in PostgreSQL?

Here's the relevant code:

users = where(created_at: start.beginning_of_day..Time.zone.now)
users = users.group('date(created_at)')
users = users.select('created_at, count(*) as count')
users.each_with_object({}) do |user, counts|
        counts[user.created_at.to_date] = user.count
end

I follow everything exactly, but when I try to display the graph with the fake information, nothing displays. What could possibly be going wrong?

I am using Morris chart. How do i reverse the values on the Y axis.

I am tracking ranks hence lower the better.

http://www.siterankhistory.com

I can't get the demo started. The console gives me this error Uncaught TypeError: Cannot call method 'match' of undefined.

I have created a stackoverflow thread as well to see if anyone else stumbled across this.

http://stackoverflow.com/questions/16267904/issue-getting-started-with-morris

I'm rather new to rails and javascript/coffee
could some1 please explain to me the logic behind this line:

data: $('statistics_chart').data('statistics')

what is the magic so to speak, behind the scenes?

Is there an easy way to populate my database with the test data shown in the screencast?

Thanks in advance!

How do you group count by month?

I can get the sample data working in my Rails app (3.2.14), but when I try with real data, the chart doesn't show up. It appears my JSON string has an extra level of nesting in it, where it's {model_name: {properties}}, you can see my code and an example in my Gist. Any help is greatly appreciated!

It's worth noticing that the code presented in the video causes unexpected timezone issues.
As timestamps are stored in UTC when you use SQL's date() function you'll get the date in UTC which can be different. E.g (consider -0300 the local zone) 2013-12-01 01:00 -0300 -> (stored as) 2013-11-30 22:00 UTC => (after date()) 2013-11-30 when you'd expect 2013-12-01.

Rails makes conversions itself when fetching a timestamp column but since you're grouping in SQL Rails cannot do anything about it.

I'm still searching about this and if I find a optimal solution I'll post here.

I guess here is a missing try

Can you please check the problem that I have on stackoverflow, in two days nobody was able to help me, I'm I don't know what to do anymore.

http://stackoverflow.com/questions/19856714/display-in-a-graph-just-unique-values-for-a-column/19857667?noredirect=1#comment29536506_19857667

Thank you

I get ERROR! THERE somebody can help me?
ExecJS::RuntimeError in Host_informations#index

Showing /Users/liucc/omm/app/views/layouts/application.html.erb where line #37 raised:

SyntaxError: unexpected TERMINATOR
(in /Users/liucc/omm/app/assets/javascripts/host_informations.js.coffee)

host_informations.js.coffee:
jQuery ->
Morris.Line
element: 'annual'
data: [
{y: '2012', a: 100}
{y: '2011', a: 75}
{y: '2010', a: 50}
{y: '2009', a: 75}
{y: '2008', a: 50}
{y: '2007', a: 75}
{y: '2006', a: 100}
]
xkey: 'y'
ykeys: ['a']
labels: ['Series a']

How would you create the graph grouped by 2 variables month and employee (for instance)?

Vote belongs_to :employee
Employee has_many :votes

Vote.chart_data

def self.chart_data(1.year.ago)
 total_count = count_by_month(start)
 start = start.to_date.beginning_of_month
 today = Date.today.beginning_of_month
 range = (start..today).select {|d| d.day == 1}
  range.map do |month|
  {
   created_at: month,
   total_enquiries: total_count[month] || 0
  }
 end
end

def self.count_by_month(start)
 enquiries = unscoped.where(created_at: start.beginning_of_day..Time.zone.now)
 enquiries = enquiries.group("date_trunc('month', created_at)")
 enquiries = enquiries.select("date_trunc('month', created_at) as created_at, count(*) as count")
 enquiries.each_with_object({}) do |enquiry, counts|
  counts[enquiry.created_at.to_date] = enquiry.count
 end
end

The morris graph expects this type of data for multiple lines

Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});

very nice service, i keep using this service, thanks.

I had an issue with the content_tag escaping the json ?

so ended up using

<%= content_tag :div, "" , id: "Orders" , data: { orders: raw(@orders.to_json) } %>

V