PullMonkey Blog

23 Jul

Open Flash Chart II Plugin for Ruby on Rails (OFC2)


Ok, already, I heard ya 🙂 The open flash chart (version 2 - OFC2) plugin is done (really just started) and it is out on github.

Examples for version 2 are here.

I rewrote the open flash chart plugin (started from scratch) to work with json like teethgrinder does here.

This time I think it is much slicker and a lot easier to work with.

I haven't tried much more than bar graphs, all the functionality is there for other types of graphs, just not tested.

Graph that this example produces:

So it is out there, and if you are willing to try it out, here is how:

  1. rails testing_ofc_2
  2. cd testing_ofc_2
  3. script/plugin install git://github.com/pullmonkey/open_flash_chart.git
  4. script/generate controller test_it
  5. Add the following to the test_it_controller.rb in RAILS_ROOT/app/controllers:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    
    class TestItController < ApplicationController
      def index
        @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
      end
    
      def graph_code
        title = Title.new("MY TITLE")
        bar = BarGlass.new
        bar.set_values([1,2,3,4,5,6,7,8,9])
        chart = OpenFlashChart.new
        chart.set_title(title)
        chart.add_element(bar)
        render :text => chart.to_s
      end
    end
    
    
  6. Add the following to index.html.erb in RAILS_ROOT/app/views/test_it/:
    1
    2
    3
    4
    5
    
    
    <script type="text/javascript" src="/javascripts/swfobject.js"></script>
    <%= @graph %>
    
      
  7. Copy swfobject.js from the plugin's assets/ directory (will make this happen at install time later) to your RAILS_ROOT/public/javascripts directory
  8. Copy open-flash-chart.swf from the plugin's assets/ director to your RAILS_ROOT/public/ directory
  9. script/server
  10. Browse to http://localhost:3000/test_it
  11. Let me know how it goes, thanks.


306 Responses to “Open Flash Chart II Plugin for Ruby on Rails (OFC2)”

  1. By Ad on Dec 24, 2009 | Reply

    Like to implement this on Sinatra instead of Rails. Is it possible?

    Copied over the .swf and .js files to public and Javascript directory.
    The codes for file ofc2.rb in the top level main dir :-

    require ‘rubygems’
    require ‘sinatra’

    get ‘/’ do
    @graph = open_flash_chart_object(600,300, graph_code)
    haml ‘%script{:type => “text/javascript”,
    :src => “/javascripts/swfobject.js”}
    %p= @graph’
    end

    def graph_code
    title = Title.new(“MY TITLE”)
    bar = BarGlass.new
    bar.set_values([1,2,3,4,5,6,7,8,9])
    chart = OpenFlashChart.new
    chart.set_title(title)
    chart.add_element(bar)
    render :text => chart.to_s
    end

    Basically ofc2.rb runs and http://localhost:4567/ generates below error msg:-

    NameError at /
    uninitialized constant Title
    * file: ofc2.rb
    * location: graph_code
    * line: 13

    What was missed?
    Thanks for any suggestions!
    Ad

  2. By charlie on Jan 4, 2010 | Reply

    @Ad – I am not too familiar with Sinatra, but you might have to include OpenFlashChart if the plugin’s init.rb file does not get processed. Test that theory by doing OpenFlashChart::Title.new instead of just Title.new.

    Let me know how it goes.

  3. By Ad on Jan 5, 2010 | Reply

    I guess you are right.

    The error on the browser now becomes
    NameError at /
    uninitialized constant OpenFlashChart

    The ruby file simply doesn’t recognize Title or OpenFlashChart.

    If i copied the plugin file and runs, this is the error i got on console:-
    $ sudo script/plugin install http://github.com/pullmonkey/open_flash_chart.git
    script/plugin:2:in `require’: no such file to load — script/../config/boot (LoadError)
    from script/plugin:2

    Apparently, i am neither a rails not sinatra expert, just s.o figuring out. So, thanks Charlie for your help anyway.

    Any more ideas?

    🙂

    (Sinatra is pretty straightforward compared to rails, it’s like just a one page readup here http://www.sinatrarb.com/intro.html but figuring the transition from rails may not…)

  4. By charlie on Jan 7, 2010 | Reply

    Ok, I looked at sinatra a bit. The feeling that I get is that you won’t be able to use many plugins with sinatra since they usually provide mixins for activerecord, actioncontroller and actionview.

    But that doesn’t mean you can’t try –

    The very first thing would be to explicitly require the init.rb file of the plugin.
    That would be like this – require “path_to_ofc_plugin/init”

    Before that, you will need to get the plugin, you can not use ./script/plugin that does not exist for sinatra, just in a rails root directory. So, instead, you can just download it from my github.

    Next, you should probably edit the init.rb file and remove all the includes, lines 3 – 9. Since in sinatra I don’t thikn you have actionview or AR or actioncontroller. If you do then you can leave those lines.

    NOW, everywhere I do stuff like Title, or what not, you will do OpenFlashChart::Title.

    Give that a shot and keep us updated.

  5. By Michael Nikitochkin on Jan 30, 2010 | Reply

    I have updated to latest release Open Flash Chart (version 2) and found many bugs:
    1. Many Lines and dots be not shown by swf(example LineHollow and other except Line).
    2. Tooltip is not shown for open-flash-chart.swf. but open-flash-chart-bar-clciking.swf it is shown, but Y-Right-axis is not working.

    Thanks

  6. By charlie on Jan 31, 2010 | Reply

    Interesting – do you have a couple examples that break? Either post them here, on gist or pastie.
    Thanks.

  7. By Helmut on Feb 3, 2010 | Reply

    thanks for this plugin! is really great but i have one little problem here… i’m having this trouble trying to display my x label into my tooltip, this is my code:

    def show
    @graph = open_flash_chart_object(520,300,”/dashboard/graph_code”)
    end

    def graph_code
    @bills = current_user.bills.all(:order => ‘previous_meter_reading_date DESC’, :limit => 12).reverse
    bar = BarGlass.new
    bar.values = current_user.consumption_per_day_history.map { |b| b[:value] }
    bar.set_key(‘My consumption’,10)
    bar.tooltip = “[#x_label#] #key#:#val# kWh/day”
    bar.colour = ‘#89C33E’

    vals = current_user.consumption_per_day_history.map { |b| b[:value] }.reverse

    #set the chart style and chart settings
    title = Title.new(“Consumption kWh/day”)
    x_axis = XAxis.new
    x_axis.set_range(0, @bills.size, 1) # set the number o
    x_axis.colour = ‘#C0C0C0’
    x_axis.set_grid_colour(‘#FFFFFF’)

    labels = XAxisLabels.new
    labels.labels = current_user.consumption_per_day_history.map { |b| “#{Date::ABBR_MONTHNAMES[b[:month]]} #{b[:year]}” }
    labels.rotate = 320
    x_axis.labels = labels

    max = 0
    @bills.each do |bill|
    max = bill.consumption_per_day if bill.consumption_per_day > max
    end

    y_axis = YAxis.new
    y_axis.set_inner_bg_colour( ‘#E3F0FD’, ‘#CBD7E6’, 90 )
    y_axis.set_range(0, max, 2)
    y_axis.colour = ‘#C0C0C0’
    y_axis.set_grid_colour(‘#C0C0C0’)

    # x and y leyends
    x_legend = XLegend.new(‘Month and year’)
    x_legend.set_style(‘{font-size: 14px; color: #89C33E}’)
    y_legend = YLegend.new(“kWh”)
    y_legend.set_style(‘{font-size: 20px; color: #89C33E}’)

    t = Tooltip.new
    t.set_shadow(true)
    t.stroke = 4
    t.colour = ‘#89c33e’
    t.set_background_colour(“#EEEEEE”)
    t.set_title_style(“{font-size: 13px; font-weight: bold; color: #89C33E;}”)
    t.set_body_style(“{font-size: 11px; color: #000000;}”)

    chart = OpenFlashChart.new
    chart.title = title
    chart.bg_colour = ‘#FFFFFF’
    chart.add_element(bar)
    chart.set_tooltip(t)
    chart.x_axis = x_axis
    chart.y_axis = y_axis

    render :text => chart.to_s
    end

    so the tooltip’s [x_label#] is always returning blank, can somebody please help me????

  8. By charlie on Feb 4, 2010 | Reply

    Dang, that should work. Can you remove the square brackets, see if that helps?

  9. By Helmut on Feb 4, 2010 | Reply

    @charlie thanks for your reply but anyway i tried what you said (removing the brackets) so my tooltip now looks like:

    bar.tooltip = “#key#: #x_label# #val# kWh/day”

    also tried just with…

    bar.tooltip = “#x_label#”

    and still can’t get the x_label shown on the tooltip.

    any ideas???

  10. By wadner on Feb 12, 2010 | Reply

    @Ad – I just got it working in Sinatra.

    in my main.rb file – I had the following –

    require ‘active_support’ #there’s a instance_values that’s called
    require ‘open_flash_chart’
    require ‘json’
    require ‘ofco’ #This is the open_flash_chart_object.rb file renamed and moved up as ofco.rb
    include OpenFlash Chart

    the open_flash_chart/ directory was also moved up.

    Another notable change was when calling the chart –

    @chart = OpenFlashChart::Base.new

    Besides that – it’s just rendering to an empty template.

  11. By alex on Feb 13, 2010 | Reply

    Here’s the sample code for a working Sinatra version –

    http://github.com/alexlam/Open-Flash-Chart—Sinatra

  12. By sankar on Feb 18, 2010 | Reply

    I’m trying to load basic bar chart in ror env .
    But it end with below error . My ruby version-1.8.6

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.4; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)
    Timestamp: Thu, 18 Feb 2010 00:32:21 UTC

    Message: ‘null’ is null or not an object
    Line: 117
    Char: 4
    Code: 0
    URI: http://localhost/javascripts/swfobject.js

  13. By charlie on Feb 18, 2010 | Reply

    Make sure you copied over the open-flash-chart.swf file to RAILS_ROOT/public/. It sounds like that isn’t being found.

  14. By dinesh on Feb 19, 2010 | Reply

    Is it possible to use the link_to_remote function to link back to the controller and generate a new graph? If so, could you possibly post or reply with a code snippet to get me started?

    Please provide me solution.

  15. By charlie on Feb 19, 2010 | Reply

    This should get you started.

  16. By charlie on Feb 19, 2010 | Reply

    This may even be better for you.

  17. By Ponni on Feb 24, 2010 | Reply

    I read this blog completely and try to generate the chart. But i am unsuccessful.
    I am getting blank page.
    Here is the HTML output :

    Loading Openflash Chart

    swfobject.embedSWF(“/open-flash-chart.swf”, “flash_content_6Gjb1ZI6”, “600”, “600”, “9.0.0”, “expressInstall.swf”,{“data-file”:”%2Fgantt%2Fgraph_code”});

    Here is the json data
    {“title”: {“text”: “MYTITLE”}, “elements”: [{“type”: “bar_glass”, “values”: [1, 2, 3, 4, 5, 6, 7, 8, 9]}]}

    Please let me know what is the problem here.

    My rails version is 2.0.1 and ruby is 1.8.6
    Is the version problem.

    I tried all the possibilities from this blog. Could anyone tell me the problem here.

  18. By charlie on Feb 24, 2010 | Reply

    Three things to check –
    1) open-flash-chart.swf is in your public dir
    2) do you have a div with an id of “flash_content_6Gjb1ZI6″ or whatever is being generated? Maybe it got cut out by the comment parser.
    3) no javascript errors and you put the swfobject.js in your public/javascripts

  19. By Ponni on Feb 24, 2010 | Reply

    Charlie,

    I checked the following and it’s fine.

    1. open-flash-chart.swf is in your public dir
    2. div is there for flash content.
    3. swfobject.js is in public/javascripts

    I am using rails version 2.0.1 and ruby is 1.8.6, is there any gem I have to update for this. Also my application is running on redhat linux with mongrel server. Any thing has to be taken care. I am getting the blank page in both IE and Firefox.

  20. By charlie on Feb 25, 2010 | Reply

    pastie or gist your code so I can take a look, we will get to the bottom of this.

  21. By Eric on Feb 24, 2010 | Reply

    I am trying to get this to work in one of my projects. If I follow your example it works just perfect. If however, I chance the routes.rb to have RESTful type routes it fails and I can’t figure out why.

    I have a controller named dashboards_controller.rb with the exact code that you detail above. The index view works fine with the default routes. When I change the routes.rb to remove the standard routes and add in a line:
    map.resource :dashboards

    I then change the controller from an index to show method and rename the index.html.erb to show.html.erb and then I get the Error #2032 error. Trying to debug the application and when I set a break point inside the graph_code block the application never stops. It is bailing out on the call to create the instance variable @graph.

    Any ideas why this crashes with RESTful routes and not the normal routes? My theory is that there needs to be a change in the call to url inside the open_flash_object call, but I am too new to Ruby/Rails to figure it out and I was hoping someone else might have an idea.

    Thanks,
    -Eric

  22. By charlie on Feb 25, 2010 | Reply

    In your log, you will likely see some error staging no action responded to “graph_code”, possible actions are …. or some form of that.
    So see if you can find anything like that, I am sure it is trying to call the graph_code action, just no route to it.

    one of two things you can do:
    1) Like you said, you think you need to change the call to the url in the open flash chart call … if you really want to get restful with this, then you might need a graph controller with a show action accepting a js format for json, then instead of calling /dashboards/graph_code, you could call /graphs/show/.js (this does not mean it has to be in the DB).
    2) You can add member and/or collection actions to your resource … http://api.rubyonrails.org/classes/ActionController/Resources.html

  23. By Ponni on Feb 25, 2010 | Reply

    Problem with plugin installation. It works in IE but not in Fire fox . Any thing i am missing here.

  24. By Umang on Mar 4, 2010 | Reply

    Hi,

    I am getting the following error-:

    “Open Flash Chart
    IO Error
    Loading Test Data
    Error @2032

    This is the url I tried to open /data-files/y-axis-auto-step.txt”

    My controller code is(from the example)-:

    title = Title.new(“MY TITLE”)
    bar = BarGlass.new
    bar.set_values([1,2,3,4,5,6,7,8,9])
    @chart = OpenFlashChart.new
    @chart.set_title(title)
    @chart.add_element(bar)

    The view code is-:

    I get the following on inspecting @chart -:
    #<OpenFlashChart::OpenFlashChart:0xb5c37cf0 @title=#, @elements=[#]>

    I have included the swfobject.js file in the head, the open_flash_chart.swf file is also accessible.
    I am able to get the graph working elsewhere in my code. I am absolutely clueless why it is not
    working in this particular instance.

    Please help!

  25. By Umang on Mar 4, 2010 | Reply

    View code -:

    @chart.js_open_flash_chart_object(“average_graph_div”, 550,300)

    I am not able to post the json, but it seems just fine

  26. By abhishek on Mar 10, 2010 | Reply

    hi,
    I want to make horizontal bar chart and want to show 1 or2 bar in a row. How can I make this by open flash chart.
    Thanks in advance

  27. By Sankar on Mar 13, 2010 | Reply

    Hi,

    I’m trying chart with Bar+Dot and I want to disable Tooltip for DOT in ROR.
    Is it possible to disable tooltip ?

    ..
    Thanks in Advance

  28. By Arleth on Mar 13, 2010 | Reply

    View ckde -:

    @chart.js_open_flash_chart_object(“average_graph_div”, 550,300)

    I am not able to post the json, but it seems j7st fine;

  29. By MrTibs on Mar 18, 2010 | Reply

    The way I pass parameters is:
    h = {}
    h[:action]= “graph_code”
    h[:p1] = v1
    h[:p2] = v2

    h[:only_path] => true
    url_str = url_for(h)
    open_flash_chart_object(…, “/test_it/#{url_str})

    Of course you can pass the name&value pairs directly to url_for

  30. By MrTibs on Mar 19, 2010 | Reply

    I do have on question: how do you return other data (in addition to the json string) to your view?

    I would think the following situation is very common: you query your database and you return data in tabular format and a graph. So, I want to run a find_by_sql query in the data-file action, but I want to return the actual query object as well, not just chart.to_s.

    I can only think to implement this in a session, e.g.
    def index
    session[:records] = Blah.find_by_sql(‘SELECT…
    @graph = open_flash_chart_object(600,300,”/test_it/graph_code”)
    end
    def graph_code
    chart = OpenFlashChart.new
    #… use session[:records] to build chart
    render :text => chart.to_s
    end

    <% records.each { |r|

  31. By Abder-Rahman on Jun 28, 2010 | Reply

    I’m having an issue with this point:

    7. Copy swfobject.js from the plugin’s assets/ directory (will make this happen at install time later) to your RAILS_ROOT/public/javascripts directory

    I couldn’t find swfobject.js

    Why is that?

    Thanks.

  32. By charlie on Jun 28, 2010 | Reply
  33. By Wheat on Jul 14, 2010 | Reply

    Hi~
    I’d like to show a graph, when I select a date .
    Showing a graph related to the date.
    And how can I send date as a param to graph_code method?
    set the date in session? or ?

  34. By badnaam on Jul 16, 2010 | Reply

    General questions.

    1 – Why do I see 10 instances of open-flash-chart.swf being downloaded by the browser when the view only has 3 instances of @graph object

    2 – If I specify a expire max header for open-flash-chart.swf, so that the browser caches it (I show 3 charts for every model instance), will the chart get the latest data everytime its loaded? I basically want to cache the flash file but get refreshed data for every view.

    Thanks

  35. By arvind on Jul 29, 2010 | Reply

    i want to retrive data from database and show the graphs.
    i want to show data from single table which has no grouping values.

  36. By denny on Aug 10, 2010 | Reply

    why can not use “set_x_legend” and “set_y_legend” for bar

  37. By jayaseelan on Aug 28, 2010 | Reply

    i have installted graph and chart plugin but not able to view in IE the graph.

    let me know what will be issue i am using redmine 0.9.0

  38. By agathe on Nov 25, 2010 | Reply

    Hello,

    Thank you for this very useful plugin !

    I have two questions about it.
    For a chart like the one above, how can i make the labels of the x_axis vertivcals when it’s not a date ? I tried to modify the example with the dates but it just write a label for the fist column and nothing for the others.

    Here is my second question: can i have a legend (like x_legend) om two or three lines ? Is it possible to make something like in html ?

    Thank you again

  39. By RicardoSEP on Nov 30, 2010 | Reply

    Works like a charm!

    But, in Rails 3, we have to use in the view and remove the comment at routes.rb in the following line:

    # match ‘:controller(/:action(/:id(.:format)))’

    Thank you!

  40. By czajson on Dec 5, 2010 | Reply

    Hi,
    How to make a simple candle stick chart?
    Could you provide me a sample code?
    Thanks, Czajson

  41. By charlie on Dec 6, 2010 | Reply

    Examples can be easily converted from the original PHP examples.
    Try this one – http://teethgrinder.co.uk/open-flash-chart-2/candle-chart.php

  42. By czajson on Dec 7, 2010 | Reply

    Charlie,
    I want to draw one candlestick.
    I can’t force it to work:

    def graph_code
    data1 = []

    #insert data to data1
    data1 << high = 7
    data1 << open = 6
    data1 << close = 5
    data1 <> set_values(data1)

    title = Title.new(“MY TITLE”)
    chart = OpenFlashChart.new
    chart.set_title(title)
    chart.set_x_legend(x_legend)
    chart.set_y_legend(y_legend)
    chart.y_axis = y

    chart.add_element(candle)
    render :text => chart.to_s
    end

  43. By Jérémy Courbat on Dec 20, 2010 | Reply

    Hi,

    I follow your tuto step by step but I have some problem.
    First, I can’t install the git(no error but the plugin/open_flash_chart is empty)I try git and http but nothing work. I have to copy the folder of your example in mine.
    After that. I see the following in the browser when I start the program :

    swfobject.embedSWF(“/open-flash-chart.swf”, “flash_content_RwqB7nve”, “600”, “300”, “9.0.0”, “expressInstall.swf”,{“data-file”:”http%3A%2F%2Flocalhost%3A3000%2Ftest%2Ftest.json”});

    What is wrong?

  44. By David on Aug 17, 2011 | Reply

    Hi I am trying to implement open flash into my rails 3 app. I’ve followed this tutorial and get the following error, why is this?

    swfobject.embedSWF(”/open-flash-chart.swf”, “flash_content_N388l0nV”, “600″, “300″, “9.0.0″, “expressInstall.swf”,{”data-file”:”%2Ftest_it%2Fgraph_code”});

  45. By CJ Gregory on Sep 13, 2011 | Reply

    I am also seeing the error that both Jeremy and David are getting.

    I believe its because in Rails 3, the strings are HTML encoded by default. So, I change the line in the view from:

    to

    Well, this only parially works as the url parameter in open_flash_chart_object() is encoded as well. I’ve tried to get around it using raw, but to no avail.

    Anyone figure this out?

  46. By RichieRich on Dec 20, 2011 | Reply

    Hi, Thanks for the plugin.

    I managed to get the barchart example working. But i cannot seem to get any of the other examples working.

    http://pullmonkey.com/projects/open_flash_chart/view_source_code/one

    I dont have a massive knowledge of RoR, the error message im on the page that is meant to be displaying the json.

    uninitialized constant Graph

    Which is assume is the controller not being able to find the function. What would i do to correct this?

  47. By charlie on Dec 20, 2011 | Reply

    The link you provided is an OFC version 1 example:
    http://pullmonkey.com/projects/open_flash_chart/view_source_code/one

    For 2.0 examples, start here:
    http://pullmonkey.com/projects/open_flash_chart2/

  48. By RichieRich on Dec 20, 2011 | Reply

    Ok my bad thanks for the reply, should really have seen that big box with the warning in it

  49. By Eli on May 17, 2012 | Reply

    Hi,
    Thank you for the great post.
    I’m new to ROR. I need to provide a dashboard for a project. I installed the plug in and provide a controller named “dashboard”. here is the code in the controller:
    ==========Code in the Controller==========================
    class DashboardController chart.to_s
    end
    end
    ==============================================

    here is the code in the view which is named “dashboard_visits.html”:

    ========== Code in view page “dashboard_visits.html”==============

    role:

    =====================================================
    but in the webpage I’m getting this line without any chart!!!

    dashboard_visits

    role: ALFP staff

    swfobject.embedSWF(“/open-flash-chart.swf”, “flash_content_bQv0Ai8x”, “600”, “300”, “9.0.0”, “expressInstall.swf”,{“data-file”:”%2Fdashboard%2Fgraph_code”});

    would you please help me to fix it!
    any help is highly appreciated.

    eli.

  50. By Eli on May 17, 2012 | Reply

    Sorry, I realized the code is not appeared!
    here is the code in the controller:

    — class DashboardController chart.to_s
    — end

    –end

    and here is the code in the view :

    role:

  51. By Zara on May 17, 2012 | Reply

    Thanks for plug in.
    I’m getting the same error as Jeremy and David got.

    swfobject.embedSWF(“/open-flash-chart.swf”, “flash_content_JGR046at”, “600”, “300”, “9.0.0”, “expressInstall.swf”,{“data-file”:”%2Fdashboard%2Fgraph_code”});

    Can not figure it out why?
    any help in highly appreciated.

  52. By Asantoya on Aug 1, 2012 | Reply

    I haven`t the /public/directory/script/server how I can do it?

  53. By Asantoya on Aug 1, 2012 | Reply

    also I got this error undefined method `open_flash_chart_object’

  54. By charlie on Aug 4, 2012 | Reply

    Asantoya – This example is over 4 years old 🙂 A lot has changed with rails. The old way to start the webrick server was to use ./script/server, it’s now rails s.

    How do you have the plugin installed and are you using the latest from github? Need to make sure the init.rb file is being run.

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