#223 Charts

resources: http://railcsasts.com/episodes/205-unobtrusive-javascript isn't valid link, please fix it

The domain in the link seems to be a typo.

I'll have to check this one out :).

I like jqPlot. Nice plugin architecture which can easily be extended.
The forum response is also quite good: http://www.jqplot.com/

Great one as usual Ryan,

Thank you.

Just a small note about a problem with my firefox playing the video, and don't know if anyone else had that.
My firefox stops playing the video about 4 minutes before the end, just before displaying the console with all the different queries.
It's playing fine when I download it on my pc, and cannot remember having a similar problem with previous episodes.

Thanks again for the episodes Ryan.

Google chart api is pretty nice too
http://code.google.com/apis/charttools/index.html

i use xml/swf charts ( http://www.maani.us/xml_charts/ ) and it's good too (there is a plugin too for rails)

So I guess their aren't to many rails charts available eh? I guess it makes more sense that javascript handles this because of the animation involved but it would be nice to have a rails option where you can simply hook into jquery or something to spice it up.

i use Google Visualization to generate my charts, http://code.google.com/apis/visualization/documentation/gallery.html

Javascript API.

Very nice railscast.

Hi Ryan, thank you very much for the mention of lazy_high_charts

best regards

There went ColdFusion developers' last excuse (cfchart) to switch to Rails. :-)

@mikhailov, @Aaron, thanks, fixed!

@valley, cool, I haven't seen jqPlot before. It looks very nice. I'll add it to the links.

@Kosmas, if it always stops at 4 minutes then it sounds like a caching issue. The connection may have been dropped at that point and it continues to load from cache.

@Branden, there are a number of Rails plugins to hook into various charting libraries, but I find it often easier to interact directly with them.

i've used jqplot before and it's really easy to customize. and thanks Ryan for this other option. :D keep this up!

Hi Ryan!

Have you ever met FusionCharts Free http://www.fusioncharts.com/free/ ?

I like so much how javascript libraries coming to be nice DSL's.

Thank you for this cool railscast!

Thanks again Ryan for another great and informative railscast. Looking forward to playing around with the graphing libraries.

"Railscasts make Mondays worth looking forward to!"

Unfortunately just too late; I just finished a project in which this would have been very useful!

Not sure if its my setup: Ubuntu 9.10, but playing this with VLC 1.0.2 I keep getting glitches.

Apart from that, thanks Ryan, great railscast.

I will have to generate some charts in the near future. So: Thank you once more.
Since I also will have to generate PDFs from the charts and I would like to use PDFKit for it, I did a simple test. I converted examples from the mentioned libraries with wkhtmltopdf (on the commandline, no fancy rails stuff, no additional parameters).
It seems, that only Highcharts generates vector shapes. All others generate low-res images.
If someone else is interested. Here are the PDFs:
http://qooy.com/files/DBX1VHNU/chart-pdf.zip

Nice webcast, There is also another library that works nice with Ruby, http://teethgrinder.co.uk/open-flash-chart-2/
The site seems to be down, however.

I have a database table which is updated every 10sec, would love to see a dynamically updated page that keeps the graph information up to date.

@dtolj, I just noticed this in highchart's demo's:

http://www.highcharts.com/demo/?example=dynamic-update

Looks like the demo is just generating random points, but you may be able to tweak it for your needs.

At New Relic, we recently started using HighCharts to replace the Flash charts that have been in use for a while.

Everyone I've talked to about the new charts really loves them and they'll soon be the default in RPM.

The ability to toggle on and off a series of data is really sweet for complex charts, and since it's just JavaScript, they work really well on the iPhone and iPad, too.

Great screenscast!! However, I would really love to see how I can select a timeline (week, month, year, custom dates) ...
Maybe in another one. Thank you!

Hey Ryan - as always a great cast :D

Lately I was refactoring the google_visualr rails plugin - a ruby wrapper for the google visualization api.

a gem could come up soon - clone the code from http://github.com/msalzburg/google_visualr

Thanks for this Ryan! Seeing it is so easy, maybe i am going to put this in some projects of mine.

I think railscasts.com is so usefull for this, showing the people all different kind of tactics and solutions to fix problems.

Thanks a lot!

Thanks Ryan, highcharts is awesome! I have used it quite a bit in the last couple of months - in fact I made a plugin (its rough haha) but can be found here http://github.com/loudpixel/highcharts-rails.

Ryan,

FYI: Mike Nelson has implemented a Highcharts Prototype adapter.

http://github.com/mnelson/Prototype-Highcharts-Adapter/blob/master/highcharts-adapter.js

It is a nice recipes.

When i use Postgre as devlopment database ,Order.group("date(purchased_at)").select("purchased_at, sum(total_price) as total_price").first.total_price.to_f

will throw erro , i am just new user to Postgre, will someone help me ?

I used used this rails plugin

http://github.com/Bantik/seer

It's another wrapper for the Google Visualization API. Works great.

I've done a lot of charting for one of my projects:

* I need PDF reports, too. Javascript libraries are great for interactive in-the-page charts, but exporting them to a file and putting in a PDF isn't always the easiest.
* The google visualization API is okay, and you can grab the image from the URL and put it in a PDF.
* I like ChartDirector, easy to set up on a server, good ruby bindings and a responsive developer for questions.

Some JS libraries provide a .toPNG() function that could be used to grab the graph, so that's a possibility, but it might make more sense to use something that generates images, especially if you need crisp high-res images.

@Wes Garrison
What about generating PDF-Report from HTML views with PDFKit.
I did some "research":
http://railscasts.com/episodes/223-charts#comment_116765

Simply brilliant! Thanks for yet another very useful and enlightening Railscasts.

another source to add to your list is DHX:
http://www.dhtmlx.com

Nice screencast, it made me swap my charts in a current project from Seer to Highcharts.

Does anybody have an idea how to group the data by year|month|week instead of day?

Love the railscasts, watch them every week. I implemented highcharts over the past few days and wanted to let you (and anyone else interested) know of a snag that I hit with the "orders_chart_series" method. Where you group and select the orders table for the variable "orders_by_day", I had to change :group => "date(purchased_at)" to :group => "DATE(CONVERT_TZ(purchased_at, '+00:00', '#{Time.zone.formatted_offset}'))". Same thing with the :select value. Without this, the records were falling in all utc dates.

FYI, this was all on rails 2.3.8, so maybe rails three does this automatically before executing the mysql statement.

One last thing I wanted to tell you about the time zone issue I was having. This isn't a major issue, but if you want your highcharts' dates to line up properly, you should do this for the pointStart variable.

pointStart: <%= (3.weeks.ago.beginning_of_day + Time.zone.utc_offset).to_i * 1000 %>

Please let me know if these suggestions are incorrect. Thanks!

Hate to clog up your comments thread, but there is a small mistake in the code I just posted, the Time.zone methods need to include the .now so it accounts for daylight savings. So, in the previous two posts, always use:

Time.zone.now.formatted_offset & Time.zone.now.utc_offset

hey Ryan! - Great as always - THANK YOU!

Is there any way you are aware of to show multiple graphs in a view and be able to print to pdf?

Maybe it doesnt exist?!

Thanks again! ak.

I'm a bit stuck converting the AREL methods back to Rails 2.3.8. I get the named_scopes bit, but I'm struggling with the self.total_on(date) and orders_chart_series methods. Can someone help by showing how this example can be converted for use in a Rails 2.3.8 project?

I was surprised at the chart engine choice for this podcast.

From my experience, FusionCharts Free is a much better product and unlkie Highcharts you can freely use it for Corporate projects (external and internal). They also have a full sample Rails app you can download to see how things work with a Rails app.

http://www.fusioncharts.com/free/

Keep up the good work - I really appreciate these podcasts. I've learned a lot.

Thank you for making ruby so accessible for us.

This is a request for more screen casts for plotting / graphing. In particular I am looking to make a dashboard that has about 50 graph objects; each graph object has multiple plots.

What this does is make the application extremely slow. Any suggestions / packages / examples will be appreciated.

I made a sample Highchart app for a freelance test job. Its here http://github.com/senthilnambi/Parrikh of anyone is interested.

The charts are reproduced via ajax whenever a new todo is added.

Hope this helps out someone.

I had to change the select condition to get this to work correctly.

I changed it to:

select("date(purchased_at) as purchased_at, sum(total_price) as total_price")

I started using Highcharts as a direct result of seeing this screen cast. Thanks for alerting me to it!

I'd like to add something after having used Highcharts for a while:
Highcharts expects the data to be in json format, so the "to_json" function is key when passing data to HighCharts. Calling "inspect", which is the technique used in the screencast, is only going to work on arrays.

If you're using Rails 3 and have tried implementing the helper method in this screencast and it's throwing what seems like an endless loop and crashing your server, replace:

orders.where(:purchased_at => start_time.beginning_of_day..Time.zone.now.end_of_day).

in the helper with:

orders.where(:purchased_at => start_time.to_date..Date.today).

seemed to work for me.

@gavin

thanx, now work PG

Hi Ryan, I was wondering if you could explain the

def self.total_on(date)
  where("date(purchased_at) = ?", date).sum(:total_price)
end

part (like the syntax of the where 'date(purchased_at) = ?', date especially). I get what it's doing and it sounds awesome from such a short line but I tried it in the rails console and it doesn't seem to work for me...

Hi Ryan,
thanks for this! you talked about how if you don't embed the javascript in the html.erb file (ie have an external js with the graph info instead), you would need to do something else (ajaxy i'm guessing?) could you describe how to do this or point me in the right direction? I'm really new to the js and ajax scene :)

Hello,

I like your RailsCasts series.. :) I am using Ancesry for tree structure in my data. I want to draw
structurel organizatin chart.. How can i do that?

Regards.

To use highcharts with Rails 3.1.rc4, I've just done the following:

1 - Upgrade to jquery-1.6.1, highcharts 2.1.6

2 - Move highcharts and jquery into vendor/assets/javascripts

3 - Change the call to javascript inside the corresponding views to:

<%= javascript_include_tag "jquery-1.6.1.min.js", "highcharts", "js/modules/exporting.js" %>

Hi ryan,

First: thanks so much for this cast, it was great and really informative!

Second: say I want to group my orders by week instead of per day. I am not very savvy with how this works in a helper method, could you give an example?

In the AsciiCasts version there's a typo

data: <%= orders_chart_series(orders, 3.weeks.ago) %>

should say

data: <%= orders_chart_series(order, 3.weeks.ago) %>

Just stumbled across this awesome tutorial. Combined this with my ActiveAdmin dashboard for some nice results. :)

Great cast...I'm new to rails so this has been a big help!

I've had one issue -- in my model, I have some dates (by design) that do not have an entry. But the array seems to create a date key with 0 value for every day in the time period. I only want to graph days that have table entries - ex: 10 days out of the 3 weeks.

Currently the highcharts will graphs the no entry days as $0...this might be okay for this specific sale app, but not useful for other apps.

Any ideas?

Similar to @migane's post, how can we implement highcharts in Rails 3.2?

Como posso implementar utilizando coffeescript?
Por favor mostre exemplos do novo rails 3.2.X mais Highcharts
Estamos curiosos para saber como funciona na nova versão do rails.

Obrigado.

How do I implement using coffeescript?
Please show examples of the new rails 3.2.X more Highcharts
We are curious to know how the new version of rails.

Thank you.

can you please explain a little more this theme, or make other episode with charts for differents logged in users??

Thanks for this Ryan.
I have a problem, every chart that I want to draw will be in "Line charts".
even when I put
chart: {
renderTo: 'container1',
type: 'bar'
},
it will in "Line charts" not in 'bar'.

thanks a lot

how can i pass array in xAxis..

in view file
<% percentage_array = [1,2,3,4] %>
<%= hidden_field_tag('percentage_array', percentage_array) %>

and in javascript
xAxis: {
title:{text: "%age of student"},
categories: "#{percentage_array}",

   },

it does not work.All values of array shows only for first interval of chart. please help.

Chart is not shown in pdf file generated by pdfkit gem..... anyone who solve this problem??

thanks.