PullMonkey Blog

04 Feb

Open Flash Chart Plugin for Ruby on Rails

Update: Version 2 of Open Flash Chart is available. Examples for version 2 are here.

I just finished converting version 1.9.7 of Open Flash Chart over to ruby, for use with rails.

Check out what I can do now :) I can customize my tooltips:

Extra Tool Tips

width="500" height="300" id="ie_chart_20" align="middle"> type="application/x-shockwave-flash" pluginpage="http://ww.macromedia.com/go/getflashplayer" id="chart_20"/>

View Source Code

More examples can be found on my Open Flash Chart Projects page.

Don't forget to check out the original - http://teethgrinder.co.uk/open-flash-chart/.

108 Responses to “Open Flash Chart Plugin for Ruby on Rails”

  1. By Scott on Feb 4, 2008 | Reply

    Charlie<br/><br/>This is great stuff. I tried to install your latest changes, but when I use the plugin script I just see the older release (no Line class in open_flash_chart.rb). Will you be committing your changes to SVN soon?<br/><br/>Thanks,<br/>Scott

  2. By charlie on Feb 4, 2008 | Reply

    Scott - glad you like it. The changes should already be in SVN. I just checked - svn export http://svn.pullmonkey.com/plugins/trunk/open_flash_chart&lt;br/&gt;

  3. By charlie on Feb 4, 2008 | Reply

    Sorry, script/plugin install <same path above>. What was it that you tried? Did you get any errors saying that the plugin already exists? Try moving the old version out of the way then plugin install it.

  4. By ilikerice on Feb 4, 2008 | Reply

    Hi, I’m wondering if it is possible to graph a trend line with missing values. For example, if I want to plot the value of something every 10 minutes for 6 hours, but a few of the timepoints are missing. Thanks!

  5. By charlie on Feb 4, 2008 | Reply

    @ilikerice - I think I understand what you are asking, but I am not sure. You have null values and probably a line graph and you want the line graph to contain null data but not to drop down to 0. If I understand you correctly you will want to check out this graph - http://pullmonkey.com/projects/open_flash_chart/view_source_code/null_data&lt;br/&gt;You pretty much just put the string ‘null’ for your null data points and the swf object will pick it up. Note that there are points where data exists and no points where the data is null, but the line continues with the trend.

  6. By Slathered1 on Feb 4, 2008 | Reply

    Theres a bug in the pie gradient code.<br/>if !gradient<br/> @pie += ",#{!gradient}"<br/>end<br/><br/>should be<br/><br/>if !gradient<br/> @pie += ",#{gradient}"<br/>end<br/>or better yet, the method can just be defined as follows:<br/>def pie(alpha, line_color, style, gradient = true, border_size = false)<br/> @pie = "#{alpha},#{line_color},#{style},#{gradient}"<br/> @pie += ",#{border_size}" if border_size<br/>end

  7. By subaqua on Feb 4, 2008 | Reply

    I’m confused. The code in subversion is way different than the code in the 1.9.7 release available on source forge (the 1.9.7 zip file). This is fine but the code listed here does not appear to work with the plugin code available in the tarball from sourceforge.<br/><br/>This code does work with the subversion code.<br/><br/>Also, just a nit… Can you PLEASE remove all the tabs from the open_flash_chart.rb file ? Indentation in ruby is by convention supposed to be two normal spaces per indent level. If you give me commit access I’d be happy to clean it up for you :-)<br/><br/>Thanks for all your work, this stuff is awesome!<br/><br/><br/>

  8. By Slathered1 on Feb 4, 2008 | Reply

    Why delete valid comments? Your pie chart implementation has a bug in the gradient logic. I sent you the fix.

  9. By charlie on Feb 4, 2008 | Reply

    Slathered1 - I did not delete your comment that I can recall, sorry if I did. I still see the code fix. Are you sure I deleted it, can you tell me what it was about? I am going to look in to your suggestion either way.

  10. By charlie on Feb 4, 2008 | Reply

    subaqua - can you give me an example of what is different? I will gladly fix it. Also, you have to realize I am a step behind from the zip file release. I get the zip of 1.9.7 release and then update my code accordingly and update my repository and their sourceforge repository. That means that the zip you download from sourceforge is my 1.9.6 version. And yes there is a huge difference there. If you want to go through sourceforge you will have to get it from trunk, not download.

  11. By charlie on Feb 4, 2008 | Reply

    Slatherd1 - I mimic the 1.9.7 release so if I have a bug, then release 1.9.7 has a bug, can you explain to me what this is affecting exactly? Give an example where it fails. Then I will be able to fix it. Thank you.<br/>

  12. By charlie on Feb 4, 2008 | Reply

    subaqua - I am aware of the 2 space convention and follow it religiously. However, I use vi so everything looks good to me. I have it setup to convert tabs to 2 spaces. Anyway, this should do the trick - sed "s/^\t/ /" lib/open_flash_chart.rb, so now check it out.

  13. By Ben on Feb 4, 2008 | Reply

    Awesome work, keep it up!

  14. By subaqua on Feb 4, 2008 | Reply

    charlie: thanks! hopefully you can check it into SVN this way; otherwise my svn diff’s always show differences. I have been doing global search and replace each time before doing my diffs against your code. Having it at 2 spaces instead of using tabs will make the code look the same to everyone since not everyone uses vi, vim, emacs, textedit , etc .<br/><br/>You rock, thanks for the help.<br/>

  15. By subaqua on Feb 4, 2008 | Reply

    charlie: yes, I will give you an example. In your examples on this page, you use:<br/><br/>g = Graph.new<br/><br/>And in subversion, the plugin lib/open_flash_chart.rb starts out with ‘Class Graph …’ <br/><br/>If you get the 1.9.7 release tarball from sourceforge, the lib/open_flash_chart.rb starts out with:<br/><br/> class OpenFlashChart<br/><br/>and there is no "Graph" class. It appears to be a slightly older copy.<br/><br/>So my point was just that it looks like "1.9.7" examples on this page are actually only going to work with the subversion code and not the 1.9.7 code which is being made available on the source forge openflashchart web site.<br/><br/>Hope this helps. Take care.<br/>

  16. By subaqua on Feb 4, 2008 | Reply

    Charlie: never mind my last post as I’ve read your original response. I wasn’t aware that the pull-monkey directory in the sourceforge release was by design version n-1. LOL…. Good, I’m not going crazy :-)<br/><br/>

  17. By charlie on Feb 4, 2008 | Reply

    @subaqua - I will do my best to convert tabs to spaces. And, yes the official zip contains release n-1 :)

  18. By ghostrifle on Feb 4, 2008 | Reply

    Many thanx for this great plugin!<br/><br/>It was easy to use and works like a charme.<br/><br/>Keep up this great work!<br/><br/>Bye !

  19. By monk.e.boy on Feb 4, 2008 | Reply

    Nice :-)<br/><br/>You have 13 months - :-D like it<br/><br/>

  20. By charlie on Feb 4, 2008 | Reply

    Yup, 13 months is a good thing. More pay checks, more time, more everything. It is because I went from 0..12 for some reason. I think I will leave it :)

  21. By we7313 on Feb 4, 2008 | Reply

    I found some great tutorials on how to implement this in .net:<br/>http://www.prestigedevgroup.com/tutorials.aspx<br/><br/>Here’s an Ajax demo:<br/>http://www.prestigedevgroup.com/tutorials/openflashchart/Demo/<br/><br/>

  22. By aaron on Feb 4, 2008 | Reply

    just upgraded and am only seeing #tip# as a string instead of my setup label. have used your example code and still see the same behavior. below is my code:<br/><br/><br/><code><br/><br/>def create_swingweight_graph<br/> <br/> data_1 = Line.new(2, ‘#9933CC’)<br/> data_1.key(’Page Views’, 10)<br/><br/> data_2 = LineHollow.new(2,5,’#CC3399′)<br/> data_2.key("Downloads",10)<br/><br/> data_3 = LineHollow.new(2,4,’#80a033′)<br/> data_3.key("Bounces", 10)<br/><br/> (0..12).each do |i|<br/> data_1.add_data_tip(rand(5) + 14, "(Extra: #{i})")<br/> data_2.add_data_tip(rand(5) + 8, "(Extra: #{i})")<br/> data_3.add_data_tip(rand(6) + 1, "(Extra: #{i})")<br/> end<br/><br/> g = Graph.new<br/> g.title("Many Data lines and Extra tooltips", "{font-size: 20px; color: #736AFF}")<br/> g.data_sets << data_1<br/> g.data_sets << data_2<br/> g.data_sets << data_3<br/><br/> g.set_tool_tip(’#tip#’)<br/> g.set_x_labels(%w(Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec))<br/> g.set_x_label_style(10, ‘#000000′, 0, 2)<br/><br/> g.set_y_max(20)<br/> g.set_y_label_steps(4)<br/> g.set_y_legend("Open Flash Chart", 12, "#736AFF")<br/><br/> render :text => g.render<br/>end<br/><br/></code>

  23. By charlie on Feb 4, 2008 | Reply

    @aaron, I had some of the code wrong, try the code I up there now. Also, you may have better luck removing the plugin and reinstalling it.

  24. By moos3 on Feb 4, 2008 | Reply

    I’m new to the whole RoR thing, do you have a example of pulling the stats out of the database? for like charting number of users over a x amount of time?

  25. By charlie on Feb 4, 2008 | Reply

    All my examples are fairly static and non database driven. We can take the spoon sales graph as an example:
    def view
    @graph = open_flash_chart_object(500,250, ‘/projects/open_flash_chart/one’, false, ‘/projects/’)
    def one
    g = Graph.new
    g.title("Spoon Sales", ‘{font-size: 26px;}’)
    # we only want 2007 spoon sales
    spoon_sales = SpoonSale.find(:all, :conditions => "created_at <= ‘2007-12-31′ and created_at >= ‘2007-01-01′")
    spoon_sales_monthly_counts = []
    (0..11).each do |month|
    spoon_sales_monthly_counts << spoon_sales.select{|s| s.created_at.month == month + 1}.size
    render :text => g.render
    It has not been tested but the idea is there.
    Hope this helps.

  26. By Matt Zukowski on Feb 4, 2008 | Reply

    Nice! This is more or less exactly what I’ve been looking for. Well done.

  27. By Philip Hallstrom on Feb 4, 2008 | Reply

    Just downloaded your plugin (march 5) from your SVN repo and have a couple of patches. I can’t find your contact info so am going to describe them here:

    On line 819, width and height need to be width.to_s and height.to_s to avoid a "can’t convert Fixnum to String" bug.

    On line 200, "@inner_bg_color2" should be "@inner_bg_color_2"

    Let me know if there’s a better way to send this sort of stuff to you…

  28. By Joachim Fermstad on Feb 4, 2008 | Reply

    Have a changerequest based on using javascript menus together with OFC.
    The problem is that flash takes topmost z-index totally ignoring other objects z-index, which means that flash lies on top of the menu obscuring the view (and clicking it).
    The "fix" for this is to set the flash components window mode to transparent (not sure if there are any sideeffects for setting this parameter).

    In open_flash_chart.rb add the following lines:
    Line 821:
    out << ’so.addParam("wmode", "transparent");’
    Line 833:
    out << ‘<param name="wmode" value="transparent" />’

    Since I don’t know flash good enough to know the side effects for setting this parameter you might consider having this optional.

  29. By Philip Hallstrom on Feb 4, 2008 | Reply

    A patch to support adding nil data instead of having to write it as "null".


  30. By charlie on Feb 4, 2008 | Reply

    @Philip H. -
    Perfect, I have committed your changes. Thank you.

    @Joachim F. -
    I have also committed your changes, but took your suggestion of making it optional. As I have it now, you can turn on transparency like this (the default is false):
    @graph = open_flash_chart_object(500,250, ‘/projects/open_flash_chart/one’, false, ‘/’, true)
    Update your plugin and see if that works for you.

  31. By Joachim Fermstad on Feb 4, 2008 | Reply

    That solution should work. But it looks like mephisto ate part of the code (that should teach me to proofread my comments… ;) )
    Line 833 should ofcourse be:
    out param name=wmode value=transparent if set_wmode_transparent
    Add greater/less than, apostrophes, etc just as the other parameters on line 832-833
    Regards Joachim

  32. By Roni on Feb 4, 2008 | Reply


    I found a bug on the latest open_flash_chart.rb:

    Line 406:
    temp << ’so.addVariable("variable","true");’
    should be:
    temp << ’so.addVariable("variables","true");’

    Line 125:
    return "so.addVariable(’#{function},#{values}’);"
    should be:
    return "so.addVariable(’#{function}’,'#{values}’);"

    With this two fixes, the js output_type works beautifully! Thank you so much, Charlie!

  33. By charlie on Feb 4, 2008 | Reply

    @Joachim F. -
    Good catch, committed it for you, thanks.

    @Roni -
    Wow, good eye :) I never use that part of the code, thanks for providing the fix.

  34. By chap on Feb 4, 2008 | Reply

    Great Work!

    Where should I put the swobject.js file?
    Do I need to include it in my layout?

    (I ask because on a coworker’s computer (ie 7) it forces you to click on the flash file before it functions.)

  35. By reza on Feb 4, 2008 | Reply

    Hi, thanks for the plugin, it’s great. I’m using the pie chart but I’ve noticed that in your examples as well as on my page the labels for the chart as extremely small. I haven’t been able to figure out how to resize them. Is this a bug or am I not setting something correctly?


  36. By charlie on Feb 4, 2008 | Reply

    swobject.js should go in the RAILS_ROOT/public/javascripts directory, then you must set_js_path() to /javascripts and also set the output_type to "js". Sorry I do not have an example of this, I will work on one. For now, read more on Teethgrinder’s site.

    Thank you, I fixed my pie examples, see line 11 here - http://pullmonkey.com/projects/open_flash_chart/view_source_code/pie
    Hope that helps.

  37. By Mark Ashworth on Feb 4, 2008 | Reply

    Could you publish how the HTML object code looks like with the wmode setting because I am trying to do it straight in HTML but the background still shows.


  38. By charlie on Feb 4, 2008 | Reply

    @Mark A. -
    I put the generated HTML up here - http://codes.graphs.skizmo.com/transparent

    Hope that helps.

  39. By Brandon on Feb 4, 2008 | Reply

    I found a few bugs to allow the swfobject to work:

    line 402: temp << ‘<div id="my_chart’ + "#{@unique_id}" + ‘"></div>’
    change to
    temp << ‘<div id="’ + "#{@unique_id}" + ‘"></div>’

    line 504: temp << ’so.write(my_chart"’ + @unique_id + ‘");’
    change to
    temp << ’so.write("’ + @unique_id + ‘");’

    This gets the div to work for the object.

    Next, you need to include more member variables at methods for the graph type classes.
    I would add:
    @output_type to the Bar class (in initialize)
    I would also add:
    def set_output_type(type)
    @output_type = type

    These aren’t inherited from the graph class, and they are needed in the "js" output types. I only looked at the Bar class, but I presume the same is needed for the other graph types to be compatible with the swfobject. Thanks, and great work!

  40. By charlie on Feb 4, 2008 | Reply

    @Brandon -
    Thanks, I had a typo on line 504. my_chart" should have been "my_chart, where my_chart is on the inside of the quotes. Fixed it and updated the plugin.

    As far as the output_type, I think you are right, I have not had time to look at it yet.

    Thanks for your help.

  41. By Mark Ashworth on Feb 4, 2008 | Reply

    Hi Charlie,
    I tried the HTML code in FireFox and IE 7 and the chart background was not transparent. Is there also a setting in the data file that enables this?


  42. By Brandon on Feb 4, 2008 | Reply

    Charlie, I debated on removing "my_chart" or keeping it. I suppose if you keep it, one could manipulate the div…
    You definitely need the output_type in the chart "type" classes (bar,line,etc), otherwise the "values", "links", "tool_tips_set", and the specific settings will never get applied through the swfobject. It is the difference between generating the so.addVariable text and not generating it.

    If you want an example to post on your page on how to use the swfobject in rails, using this plugin, I would be more than happy to send you one.

  43. By charlie on Feb 4, 2008 | Reply

    @Brandon -
    Thanks, I would love an example to post. Send it to charlie at pullmonkey dot com. I will build in the output_type code this weekend. Thanks again.

    @Mark A. - I haven’t had a tremendous amount of time, but I will look into it this weekend and hopefully have an example posted for you next week. I will keep you updated.

  44. By Sean on Feb 4, 2008 | Reply

    I seem to be running into a problem when using "g.set_output_type(’js’)"

    the output I’m getting is:

    <div id="my_charta0eabb91775534ebcdb3a54dda9d8e08"></div>
    <script type="text/javascript" src="/r/javascripts/swfobject.js"></script>
    <script type="text/javascript">
    var so = new SWFObject("/r/open-flash-chart.swf", "ofc", "300", "150", "9", "#FFFFFF");
    so.addVariable(’title’,'+,{font-size: 4px;}’);

    which seems to be fine except for the:


    I’m not sure if I’m missing something but I thought you might have an idea.


  45. By charlie on Feb 4, 2008 | Reply

    @Sean - no you are not missing anything, this is a bug :( I will take a look at this over the next week. I think it probably has to do with what Brandon is talking about.

  46. By Sean on Feb 4, 2008 | Reply

    Charlie, thanks for the reply. Can’t wait to see it all going. :)

  47. By banana on Feb 4, 2008 | Reply

    Hi, I’d like to use graph with many data lines, but the example above is not working for me. When I tried pie chart, it worked great. The graph I want to use is here:

    But the sample code isn’t working for me. Although on the page is working, when I delete the "www" from url and go to:

    the graph is not working(it doesn’t render). This is what I’m getting. I’m confused. It’s the same code. On one page is working but on the other (the one without www) is not. So I’m a little bit confused. Can anybody help me?

  48. By banana on Feb 4, 2008 | Reply

    The graph works on the url without "www" and doesn’t wokr on the one with "www".

  49. By Augusto on Feb 4, 2008 | Reply

    Hello, I’m having problems trying to create a full month data chart, 2 line_hollow, 31 x_labels, and It doesn’t work, it stays loading T_T. The charts work perfectly with less data.

    Here is my data output:


    Any help would be very appreciated.

  50. By banana on Feb 4, 2008 | Reply

    Hello again. I finally fixed the problem. The problem was that although I reinstalled the plugin the file in /lib/open_flash_chart.rb stayed from the old version. So I simply copied it there form /vendor/plugins/open_flash…. and it worked :)

  51. By charlie on Feb 4, 2008 | Reply

    @banana - thanks for the notes, glad you got it working.

    @Augusto - I am going to reproduce your problem and I will get back to you.

  52. By james kyle on Feb 4, 2008 | Reply

    You, my good sir, rock.

  53. By charlie on Feb 4, 2008 | Reply

    @Brandon - Thanks for the example. I posted it <a href="http://pullmonkey.com/projects/open_flash_chart/brandons_example">here</a>.
    Also, there was a bug in the output_type code where I had @output_type instead of just the local variable output_type. I committed the changes for this. So the "per class" set_output_type() method is unnecessary now :) - Thankfully.

    @sean - your bug was related to the output_type fix. So get the latest plugin and you should be good, let me know.

    @Mark A. - I am still working on the transparency code, have you had a chance to dig into it?

    @Augusto - I had no problem getting your code to render, I posted the code that works for me on <a href="http://skizmo.com">skizmo.com</a> - <a href="http://codes.graphs.skizmo.com/augusto">here</a>.

    I think I got everyone’s questions answered, if I missed you, please comment and I will be sure to answer.


  54. By Bob Walsh on Feb 4, 2008 | Reply

    I admit it: I’m a rails newbie. I’m doing something wrong because I’ve yet been able to get a single chart working. Does anyone have a bare bones working project they can share so I can figure out what I am doing wrong? If so, please send it to bob.walsh@47hats.com. Thanks.

  55. By Horst on Feb 4, 2008 | Reply

    pwd /Users/hwend/Development/GraphSample

    ls -als
    24 -rw-r–r– 1 hwend hwend 8819 Apr 6 20:53 README
    8 -rw-r–r– 1 hwend hwend 307 Apr 6 20:53 Rakefile
    0 drwxr-xr-x 6 hwend hwend 204 Apr 6 20:53 app
    0 drwxr-xr-x 8 hwend hwend 272 Apr 6 20:53 config
    0 drwxr-xr-x 3 hwend hwend 102 Apr 6 21:06 db
    0 drwxr-xr-x 3 hwend hwend 102 Apr 6 20:53 doc
    0 drwxr-xr-x 3 hwend hwend 102 Apr 6 20:53 lib
    0 drwxr-xr-x 6 hwend hwend 204 Apr 6 20:53 log
    0 drwxr-xr-x 17 hwend hwend 578 Apr 6 21:14 public
    0 drwxr-xr-x 11 hwend hwend 374 Apr 6 20:53 script
    0 drwxr-xr-x 8 hwend hwend 272 Apr 6 20:53 test
    0 drwxr-xr-x 6 hwend hwend 204 Apr 6 20:53 tmp
    0 drwxr-xr-x 4 hwend hwend 136 Apr 6 21:00 vendor

    I appreciate any help what I am doing wrong here.


  56. By Horst on Feb 4, 2008 | Reply

    Sorry, my comment got cut off. Here the first part…

    I am a newbie and am trying to get the Spoon Sales sample to work.

    I installed the plugin and copied the open-flash-chart.swf file into the /public directory and the swfobject.js file into my /public/javascripts directory.

    My application root directory is /Users/hwend/Development/GraphSample

    My controller:
    class GraphController < ApplicationController

    def view
    @graph = open_flash_chart_object(500,250, ‘/public/open_flash_chart/one’, true, ‘/public/’)
    def one
    g = Graph.new
    g.title("Spoon Sales", ‘{font-size: 26px;}’)
    render :text => g.render


    My view:
    <title>Graph Example</title>
    <%= @graph %>

    The errors in the browser I get are:
    Resource interpreted as script but transferred with MIME type text/html.

    SyntaxError: Parse error
    http://localhost:3000/public/javascripts/swfobject.js (line 1)

    ReferenceError: Can’t find variable: SWFObject
    http://localhost:3000/graph/view (line 9)

    The terminal output shows the error:
    ActionController::RoutingError (No route matches "/public/javascripts/swfobject.js" with {:method=>:get}):

    I would appreciate any help what I am doing wrong here.


  57. By charlie on Feb 4, 2008 | Reply

    @Bob Walsh - Horst (see comment above this one) has a pretty good example going, start with that, post errors if you can.

    @Horst - you need to remove "public" from your code, "/" points to public, so "/public" in the url points to /public/public in your RAILS_ROOT. You want this:
    @graph = open_flash_chart_object(500,250, ‘/graph/one’, true, ‘/’)
    In my examples, "open_flash_chart" is the name of my controller and in your example it is "graph".
    Hope that makes sense. Let me know.

  58. By Horst on Feb 4, 2008 | Reply


    Thank you very much for your response. It is working like a charm now thanks to your help. I changed the call to @graph = open_flash_chart_object(500,250, ‘/graph/one’, true, ‘/’) and it did the trick.


  59. By Andrew on Feb 4, 2008 | Reply

    Hi, Is it possible that your svn repository is down?

    script/plugin install http://svn.pullmonkey.com/open_flash_chart
    Plugin not found: ["http://svn.pullmonkey.com/open_flash_chart"]

    http://svn.pullmonkey.com/open_flash_chart returns a 404 error..

  60. By Andrew on Feb 4, 2008 | Reply

    never mind! apparently the correct url is http://svn.pullmonkey.com/plugins/trunk/open_flash_chart

    Eager to try it out on ‘big’ datasets..

  61. By charlie on Feb 4, 2008 | Reply

    @Andrew - please let me know how it handles the "big" datasets. Also, did I post an incorrect plugin link somewhere?

  62. By Bob Walsh on Feb 4, 2008 | Reply


    created a new project as per you/Horst.

    with http://localhost:3000/graph/view

    I get absolutely nothing…my html <h2> is there, but no chart. Doing this on my Mac, in FF.

    I’d be more than happy to send you the project… Arrrgh!

  63. By charlie on Feb 4, 2008 | Reply

    @Bob Walsh - Sure, send me the project- charlie at pullmonkey dot com

  64. By charlie on Feb 4, 2008 | Reply

    @Bob Walsh - got your files and responded to your email, just wanted to share the findings for anyone that is having trouble.

    Aha — I see - you need to include the javascript file:
    Here is the diff:
    pullmonkey$ diff -u app/views/graph/view.html.erb.bob app/views/graph/view.html.erb
    — app/views/graph/view.html.erb.bob 2008-04-10 07:41:44.000000000 -0600
    +++ app/views/graph/view.html.erb 2008-04-10 07:41:49.000000000 -0600
    @@ -1,6 +1,7 @@
    <title>Graph Example test</title>
    +<%= javascript_include_tag :defaults, ’swfobject’ %>
    <h2>Where’s the Chart?</h2>

    So there are two ways that the graph can be produced.
    1) javascript call to SWFObject
    2) plain ol embeded object (if javascript is turned off — or — if you pass false to use_swfobject)

    Two reasons for the javascript, 1) faster 2) IE.
    In IE, the plain object will require the user to click the graph to activate.

    Hope that gets you on your way,


  65. By Bob Walsh on Feb 4, 2008 | Reply

    Thanks Charlie - that did the trick.

  66. By reza on Feb 4, 2008 | Reply

    hello again, thanks for the help with the font size. i’m trying to push the percentage sign (%) to be displayed as part of the name of a slice of pie. I get weirdness. should i be using some special escape characters?

  67. By charlie on Feb 4, 2008 | Reply

    @reza - I have not tried naming a slice with a percent sign, just labeling. It probably needs escaped, I will check into it today.

  68. By David Lowenfels on Feb 4, 2008 | Reply

    Hi, thanks for this very useful plugin!

    Two suggestions… use the plugin’s install.rb to copy the needed files (swfobject.js, which you neglect to mention in your README, and open-flash-chart-swf)

    Also, the ruby code could be more rubyish if:
    * toString was named to_s (no big deal)

    * the intializers call "yield if block_given?" and the subclassed initializers that call super, return self t the end. This allows the use of the magic pen pattern, like so: (also with snazzy RESTfulness)

    <code class="code">
    def burndown
    respond_to do |wants|
    wants.html {
    @graph = open_flash_chart_object( 800, 600, formatted_burndown_stories_path( :json ) )
    wants.json {
    data = %w[ 100 78 68.6 70 55 55 23 15 12 ].map(&:to_i)
    fit = LinearRegression.new(data).fit
    render :text => Graph.new{ |g|
    g.data_sets << LineHollow.new(2, 5, ‘#CC3399′) do |line|
    line.add( data )
    line.key(’Data’, 10)
    g.data_sets << Line.new(2, ‘#9933CC’) do |line|
    line.add( fit )
    line.key(’Fit’, 10)
    g.title "Burndown", ‘{font-size: 26px;}’
    g.set_x_labels %w[ M T W R F ]*2
    g.set_y_max [ data.max, fit.max ].max
    g.set_y_label_steps 10
    }, :layout => false

  69. By charlie on Feb 4, 2008 | Reply

    @David -
    Thanks for the pointers. The initial cut was just to get it from php to ruby, I have not done any refactoring or rubytization :( As for the swfobject.js - I have now added it to the site instructions and the README and I will do as you suggest with the install.rb. Thanks!

  70. By Ray on Feb 4, 2008 | Reply

    As we see from http://www.pullmonkey.com/open-flash-chart/, open flash
    chart don’t support stacked bar. Is there any way to work around with
    open flash chart or any other better idea about stacked bar using in


  71. By QQ on Feb 4, 2008 | Reply

    I want to add some chinese charactor at the y_lengend, but I failed to do that. Can you help me please thanks a lot.

  72. By charlie on Feb 4, 2008 | Reply
  73. By Erik Ordway on Feb 4, 2008 | Reply

    Odd problem. The graph only shows up the first time I start the rails app. After that it never shows up again even in other browsers. I can load the page with the graph once and then it will not load again even when I start up another browser application and load the page.

    Any thoughts. Current checkout as of the time of this message. Using either the current open flash chart distribution or the parts in the plugin.

  74. By Chris on Feb 4, 2008 | Reply

    @Erik -
    Had the same problem…turns out it is in the open_flash_chart.rb file. It is only including the swfobject.js source the first time it uses SWFObject. I moved the code doing the include…

    out << ‘<script type="text/javascript" src="’ + base + ‘javascripts/swfobject.js"></script>’

    … out of the conditional so it is always included, and that did the trick.

  75. By nerb on Feb 4, 2008 | Reply

    howdy, i can hardly wait to try this plugin.

    another thing i’m interested in, and was hoping to contact you via email but couldn’t find, is skizmo.com/

    how do you get skizmo to create subdomains, and how do you keep each site’s ‘look and feel’ seperate, in simplecms?

    can you email me to discuss?

  76. By Barnaba on Feb 4, 2008 | Reply

    Thanks Chris!

    I was really annoyed by restarting the server again and again. It also seems to work properly if you duplicate the "include"-Line into the else part where "open_flash_chart_seqno" is mentioned. What seems to be broken then is that the rest of the page doesnt render till you move your mouse out of the flash-area

  77. By Vladimir on Feb 4, 2008 | Reply

    Are you considering moving to github? so we can have all plugins in git

  78. By percy on Feb 4, 2008 | Reply

    I have a problem like Bob Walsh .The IE is blank ,but it has sourcefile.the sourcefile is following:
    <div id="flashcontent_3"></div>
    <script type="text/javascript">
    var so = new SWFObject("/open-flash-chart.swf", "chart_3","600","300", "9", "#FFFFFF");
    so.addVariable("data", "%2Fgraph%2Fy_right");
    so.addParam("allowScriptAccess", "sameDomain");
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    width="600" height="300" id="ie_chart_3" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="/open-flash-chart.swf?600&height=300&data=%2Fgraph%2Fy_right" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#FFFFFF" />
    <embed src="/open-flash-chart.swf?data=%2Fgraph%2Fy_right" quality="high" bgcolor="#FFFFFF" width="600" height="300" name="chart_3" align="middle" allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash" pluginpage="http://ww.macromedia.com/go/getflashplayer" id="chart_3"/>
    my controller is that:
    class GraphController < ApplicationController
    def view
    @graph = open_flash_chart_object(600,300, ‘/graph/y_right’, true, ‘/’)
    def y_right
    g = Graph.new
    g.title( ‘Users vs. Ram - 24h statistics’, ‘{color: #7E97A6; font-size: 20; text-align: center}’ )
    g.line_dot( 2, 4, ‘#818D9D’, ‘Max Users’, 10 )
    g.line_hollow( 2, 4, ‘#164166′, ‘Free Ram’, 10 )
    g.set_x_axis_color(’#818D9D’, ‘#F0F0F0′ )
    g.set_y_axis_color( ‘#818D9D’, ‘#ADB5C7′ )
    g.y_right_axis_color(’#164166′ )
    g.set_x_legend( ‘My IRC Server’, 12, ‘#164166′ )
    g.set_y_legend( ‘Max Users’, 12, ‘#164166′ )
    g.set_y_legend_right( ‘Free Ram (MB)’ ,12 , ‘#164166′ )
    tmp = []
    (0..25).to_a.each do |x|
    tmp << "#{x}:00"
    g.set_x_label_style(10, ‘#164166′, 0, 3, ‘#818D9D’ )

    render :text => g.render

  79. By charlie on Feb 4, 2008 | Reply

    @percy - Did you include the javascript file (swfobject.js)?
    Doesn’t look like it, add the line:
    <%= javascript_include_tag ’swfobject’ %>
    to your view html or your layout.

  80. By Dorian Mcfarland on Feb 4, 2008 | Reply

    I was wondering how easy it might be to add links to a scatter graph. I need each point on the graph to link to a comment somewhere else on the page. Has anyone managed something like that? I can’t quite tell from the lib whether it’s possible to add a link to any of the graph objects or just the line and bar.

    I tried adding one to the tooltip, but any code apart from ‘<br>’ seems to get rendered inline.

    Any hacking help much appreciated!

  81. By nick on Feb 4, 2008 | Reply

    any chance you have the transparent background of the graph as an option we can enable anywhere in there? trying to set the bg_colors to something like ‘transparent’ and no go on anything I can think of, is it possible? thanks,


  82. By Nick on Feb 4, 2008 | Reply

    Hi, wonderful site! I’m using a few of your graphs and everyone here is impressed. Just wanted to let you know theres a bug on your pie charts - the tooltips are displaying the wrong values. that’s all, keep up the good work!

  83. By charlie on Feb 4, 2008 | Reply

    @nick - transparency … well, it is supposed to be supported but nothing yet.

    @Nick (same as nick I bet) - Good catch, it is happening on Teeth Grinder’s (the guy who did the swf work) site - http://teethgrinder.co.uk/open-flash-chart/gallery-pie.php I will see what bug reports there are for that, and if none will add one. Thanks.

  84. By charlie on Feb 4, 2008 | Reply

    @Dorian - Hacking the plugin won’t help, it all comes down to the swf that teeth grinder put together. This functionality would have to start at his end. You just gotta ask him :)

  85. By Lieting Yu on Feb 4, 2008 | Reply

    Good work!

    I ran into a problem. The plugin works perfectly to produce the chart, however, when I click on the refresh button, the chart does not show up. IE complains that the SWFObject is not defined. By comparing the source, it seems when I click refresh, the page does not have the following line:

    <script type="text/javascript"

    I notice this is caused by the following code:

    if !$open_flash_chart_seqno
    $open_flash_chart_seqno = 1
    out << ‘<script type="text/javascript" src="’ + base + ‘javascripts/swfobject.js"></script>’
    $open_flash_chart_seqno += 1
    obj_id += "_#{$open_flash_chart_seqno}"
    div_name += "_#{$open_flash_chart_seqno}"

    So when $open_flash_chart_seqno > 1, the page does not link in the javascript url.

    Is there an easy way to fix this? Or I am doing something wrong?



  86. By charlie on Feb 4, 2008 | Reply

    @Lieting - You can fix this by including that javascript file in your layout by hand .. that is what I do. I would expect the ofc seqno to reset itself upon refreshing, but in your case I am not sure what is going on.

  87. By Ralph on Feb 4, 2008 | Reply

    Step by step tutorial for beginners! (from scratch)

    Download open flash chart package
    Navigate to an environment that supports ruby-on-rails

    start a project from scratch

    rails practice
    cd practice
    copy the ruby-ofc-library-pullmonkey into practice/vendor/plugins dir and rename the library as open_flash_chart
    Alternatively run: script/plugin install http://svn.pullmonkey.com/plugins/trunk/open_flash_chart/
    Move the open_flash_chart.swf file into your practice/public directory
    Move the swfobject.js file into your practice/public/javascripts directory
    rake db:create
    ruby script/generate migration Trial
    rake db:migrate

    Edit trial_controller in practice/app/controllers directory

    class TrialController < ApplicationController
    def view
    @graph = open_flash_chart_object(500,250, ‘/trial/bar_chart’, false, ‘/’)
    def bar_chart
    bar = BarOutline.new(50, ‘#9933CC’, ‘#8010A0′)
    bar.key("Page VIEWS", 10)
    10.times do |t|
    bar.data << rand(7) + 3
    g = Graph.new
    g.title("BAR CHART", "{font-size: 15px;}")
    g.data_sets << bar
    g.set_x_labels(%w(Jan Feb Mar Apr May Jun Jul Aug Sep Oct))
    g.set_x_label_style(10, ‘#9933CC’, 0,2)
    g.set_y_legend("OPENF LADF", 12, "#736AFF")
    render :text => g.render

    create index.html file in practice/app/views/trial directory
    copy and paste the following onto the index.html file

    <embed src="/open-flash-chart.swf?data=%2Ftrial%2Fbar_chart" height="250" width="500">


    Note: Make sure you have adobe flash player installed in your machine

    watch the magic:

    ruby script/server
    Go to http://localhost:3000/trial/index

    Hope this helped my fellow newbies.

  88. By Terry on Feb 4, 2008 | Reply

    I have the same problem as others, with blank results.

    Controller name is: test_graphs

    I’ve installed the plugin, moved the .js to javascript lib and .swf to public.

    I have the javascript + :defaults in my layout. So this means I’ve added a layout RHTML file to match my view.

    Here’s my controller:
    class TestGraphsController < ApplicationController
    def view
    @graph = open_flash_chart_object(500,250, ‘/test_graphs/one’, true, ‘/’)

    def one
    g = Graph.new
    g.title("Spoon Sales", ‘{font-size: 26px;}’)
    render :text => g.render

    Here’s the view (index.rhtml) under test_graphs:
    <title>Graph Example</title>
    <%= @graph %>

    Blank screen…what am i missing?

  89. By tony on Feb 4, 2008 | Reply

    It seems like the problem for those seeing blank pages is caused by the code in view.
    It also does not work for me with <%= @graph %>

    Replace this with and it works fine.
    <embed src="/open-flash-chart.swf?data=%2Ftrial%2Fbar_chart" height="250" width="500">

    If anyone can tell me why the original code did not work, kindly let us know. I have Fedora 8 and Firefox.

  90. By Darin on Feb 4, 2008 | Reply

    Hi, great work! I am curious. Will 1.9.7 ruby library work in OFC 2, or is there another library for that? Sorry if this is answered elswhere, I tried to google and did not find what I was looking for.
    Thanks, and keep up the great work!


  91. By Karl on Feb 4, 2008 | Reply

    @ Charlie:
    Big thanks for the plugin, I use it in all my projects now.

    Q1: Do you have plans to support OFC2? Looks to me that the only diff on your parts is to just pass JSON instead of the old format.

    Q2: Would you consider moving the project to GitHub so that we could branch and help out a bit?

  92. By charlie on Feb 4, 2008 | Reply

    @Karl, Darin -

    Yes, plan on supporting OFC2. I will move it to github asap.

  93. By Antonio Cangiano on Feb 4, 2008 | Reply

    Fantastic job, Charlie.

  94. By benjamin smith on Feb 4, 2008 | Reply

    Hi! Found/Fixed a bug!

    You’ve got support for styling the ‘right y axis’, but there is one line of code missing to allow it to work. You need to add one line to the property hash built on line 409 of the lib/open_flash_chart.rb file:
    "y2_label_style" => [@y2_label_style],

    Otherwise, great work!

  95. By benjamin smith on Feb 4, 2008 | Reply

    shoot, the line i pasted in there was wrong. It should be:
    "y2_label_style" => [@y_label_style_right],

    The use/translation of y2 and y_right and y_*_right was making my head spin. :)

  96. By charlie on Feb 4, 2008 | Reply

    @benjamin - Thanks for the bug fix. Just so you know, version two is out and on github.

    version II instruction and example - http://pullmonkey.com/2008/7/23/open-flash-chart-ii-plugin-for-ruby-on-rails-ofc2

    Another version II example - http://pullmonkey.com/2008/7/25/using-a-database-to-populate-an-open-flash-chart-graph

    The Github repository - http://github.com/pullmonkey/open_flash_chart/tree/master

  97. By Cecci on Feb 4, 2008 | Reply

    Hi, I don’t speak english very well. I do not understand any things and need help to handle this plugin. Might someone help?

  98. By charlie on Feb 4, 2008 | Reply
  99. By Victor on Feb 4, 2008 | Reply

    I’m first sorry for my bag english,

    I’m a french customer, and i want use your graphics plugin for make a plugin for redmine.

    i have follow all the instructions for the installation of the plugin but i have a problem on the display.
    On my view, we can see the frame of flash but into in the place of my graph i have the path of my graph like : /migrate/y_right

    the path of the object in the controlleur work for a plugin ( /vendor/plugin/migrate/app/controllers/migrate_controller.rb )

    my controlleur :

    My controller:
    class MigrateController < ApplicationController

    def view
    @graph = open_flash_chart_object(600,300, ‘/migrate/y_right’, true, ‘/’)
    def one
    g = Graph.new
    g.title("Spoon Sales", ‘{font-size: 26px;}’)
    render :text => g.render


    My view:
    <title>Graph Example</title>
    <%= @graph %>

    if the option object at true, my firebug say :
    SWFObject is not defined
    [Break on this error] var so = new SWFObject("/open-flash-char…"chart_24","600","300", "9", "#FFFFFF");

    And if it’s at false i have the display described above.

    I hope my explication is not to had to understand.
    And i hope you can help me.

    Thx for your help

  100. By Victor on Feb 4, 2008 | Reply

    Erf for the copied/colled

    in my controllor :
    def one
    g = Graph.new
    g.title("Spoon Sales", ‘{font-size: 26px;}’)
    render :text => g.render

    is not def one but really def y_right
    i’m sorry

  101. By charlie on Feb 4, 2008 | Reply

    @Victor - You need to include the javascript file (swfobject.js) in your view.html.erb or in your layout’s head, that is why SWFObject is not defined …. Also, I recommend you look at using the new version (version 2 from my github) of open flash chart, here are some instructions - http://pullmonkey.com/2008/7/23/open-flash-chart-ii-plugin-for-ruby-on-rails-ofc2

    More examples - http://pullmonkey.com/projects/open_flash_chart2/

  102. By Victor on Feb 4, 2008 | Reply

    @charlie - i have include the javascript file in the layout on redmine (<script type="text/javascript" src="/javascripts/swfobject.js"></script>)
    and the problem are always here

    My view are in *.rhtml … it’s perhaps a probleme…

    also i will install your new version on this plugin.
    I’m dispointed if i can’t using it because i fing your plugin are very pleasant and ergonomic

  103. By Noah on Feb 4, 2008 | Reply

    I saw the recommendation to Victor in the version 2 thread about using the older version after encountering error parsing the JSON. I’m working with rails 1.2 and I am not able to access the svn.pullmonkey.com repository, the domain name does not resolve. Please let me know if there is still a hosted copy, if not, could you add it to the git project as legacy code? Otherwise, is there any intention to support rails 1.2?

  104. By pdx3d on Feb 4, 2008 | Reply

    I have the same problem with a blank screen sometime on IE only. Sometime it shows the chart, while other time it does. Refresh sometime brings out the chart, but not always. Any pointer will be appreciated.

  105. By charlie on Feb 4, 2008 | Reply

    @Noah - I just switched from dreamhost to slicehost and that subdomain went away in dns, so had to get that all set up. So anyway, the svn is back.

    @pdx3d - regular or javascript does not work in IE? Next, do any of the <a href="http://pullmonkey.com/projects/open_flash_chart2">pullmonkey.com graphs</a> show up in your IE?

  106. By pdx3d on Feb 4, 2008 | Reply

    Charlie, thanks for your prompt response.
    Yes, regular javascript works. In fact, OFC2 works sometime, but not always. I am running on windows under ROR with webbrick(and tried mongrel as well). FireFox and Chrome all works fine, but not IE. Use the same IE, I can see this site fine. When the chart is not shown, I can still see the html source showing the tags for all the elements the same as when it works. Just no chart is actually showing…

    I forgot to mention: I really like what I see when it works.

  107. By charlie on Feb 4, 2008 | Reply

    @pdx3d - Ok, look in the rails logs and see if the swfobject is making the ajax request to the action you setup. Also, what version of rails are you using? What version of IE? I need to reproduce the problem to fix it :) so the more details the better. Thanks for your time and patience.

  108. By pdx3d on Feb 4, 2008 | Reply

    I was not using the ajax version, but rather :
    @graph= open_flash_chart_object(320,240,"/ofc2/graph_code")
    under IE7: 7.0.6001.18000.

    I just swtiched to the ajax version moments ago. It works beautifully! Thanks again.

Sorry, comments for this entry are closed at this time.