PullMonkey Blog

08 Jan

Open Flash Chart II - Bar Graphs with on-click

Building on line graph clicking, thanks to the support of a few other people (mentioned throughout the article) we now have bar graph clicking as well. The only down side (if you want to call it that) is that it is experimental in the sense that the open flash chart swf object had to be updated, and the update is not part of the official OFC release (at least not at the time of this writing). No big deal though, just be aware. It is however part of the OFC rails plugin release.

Big thanks goes to Eric for his work on the action script for the bar clicking open-flash-chart swf file - see this forum entry for more details.

Obvious thanks also goes to monk.e.boy.

Ok, so two things to note for this to work:

  1. Pull the latest from github and make sure to get Eric's swf file (under the assets directory - open-flash-chart-bar-clicking.swf ) and place it under RAILS_ROOT/public
  2. The call to open_flash_chart_object() has changed to accept an optional parameter for the swf file name. I am leaving the original for use as open-flash-chart.swf (which is the default for the swf_file_name param) and added Eric's as open-flash-chart-bar-clicking.swf. See the example below for usage.

The changes that were made can be found here.

Here is the graph we are after in this example (click the bars to see what happens):

More Open Flash Chart II examples.

And here is the code (the controller):


class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(600,300,"/test_it/graph_code", true, "/", "open-flash-chart-bar-clicking.swf")

  def graph_code
    title = Title.new("Bar on-click Example")
    bar = BarGlass.new
    # NOTE ... the next two lines are if you want each bar to have a different response when clicked
    bar_values = (1..9).to_a.map{|x| bv = BarValue.new(x); bv.on_click = "alert('hello, my value is #{x}')"; bv}
    # if you want a more generic response across all bars, then the following lines would do:
    # bar.on_click = "alert('hello there')"
    # bar.set_values((1..9).to_a)
    chart = OpenFlashChart.new
    render :text => chart.to_s

And in your view (index.html.erb):


<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph %>

Good Luck!

27 Responses to “Open Flash Chart II - Bar Graphs with on-click”

  1. By monk.e.boy on Jan 8, 2009 | Reply

    Thanks for posting this. I love that there is more than one build of OFC2.x, it really makes sense.

    It is easy to mix 1.x, 2.x and other charts by naming them differently and putting the libraries in different folders. So you can mix and match to your hearts content.

    If you have any ideas on how to make the bars more obviously clickable, post on the forums, cos we are all struggling with how to show some bars can be clicked….


  2. By charlie on Jan 8, 2009 | Reply

    @monk.e.boy - will do.

    For those that wish to comment on making the bars more obviously clickable - go to the <a href="http://forums.openflashchart.com/">OFC forums</a>

  3. By Fabian on Jan 8, 2009 | Reply

    this addition is really great. I have a problem however: it doesn’t seem to recognize the "rotate": "vertical" property for the x_axis labels anymore. If I use the ‘normal’ swf it works. Any suggestions?

  4. By charlie on Jan 8, 2009 | Reply

    @Fabian - that is the one problem you will run into with this sort of capability. The author of the new swf may not take everything into consideration and it is possible that this functionality is missing.

    Just to be sure - when the problem occurs it is the same exact code, you are just simply switching the swf files?

    I would mention it to Eric on the <a href="http://forums.openflashchart.com/viewtopic.php?f=5&t=305&p=1922#p1922">OFC Forum thread</a> where I got the new swf build.

  5. By Mitja on Jan 8, 2009 | Reply

    I had same problem with vertical labels.
    I tried different thing and eventually replacing ‘vertical’ with angle value was enough: 270 - is OK :)

  6. By Albee on Jan 8, 2009 | Reply

    Is it possible, in a ruby way, to enable on_click for BarStack? Where do I modify the code? What methods, models, or controllers do I change? Pardon my newbie-ness.
    Thanks in advance!

  7. By charlie on Jan 8, 2009 | Reply

    @Albee — I am not sure I know what you mean exactly. Does this tutorial not work for you?

  8. By Albee on Jan 8, 2009 | Reply

    I am unable to apply this example to the Class BarStack. Would it be possible to have a super simple example, say two stacked bars with the on_click option? I am just not seeing how to do it. I either get an error or nothing not even a message in my logs. So, that is why, if you could please give a super simple two stacked bars example that would be awesome!

  9. By Albee on Jan 8, 2009 | Reply

    Ok, now I get no error. But now I also get no graph at all.

    this is the json that is passed out.
    <filter:code attributes=lang="ruby">
    {"title": {"text": "test"}, "elements": [{"type": "bar_stack", "values": [[{"val": 2, "colour": "#ff0000", "on-click": "line_1"}, {"val": 4, "colour": "#00ff00", "on-click": "line_1"}, {"val": 6, "colour": "#0000ff", "on-click": "line_1"}, {"val": 8, "colour": "#abcdef", "on-click": "line_1"}], [5, 3, 1, 7]]}]}

    this is the code creating it:
    <filter:code attributes=lang="ruby">
    def stack( options={} )
    title = Title.new( ‘test’ )
    chart = OpenFlashChart.new

    # Create the type of graph to be displayed.
    bar_stack = BarStack.new
    #bar_stack.on_click = "hello"
    #bar_stack.on_click_text = "hello"
    clickers = []
    clickers << BarStackValue.new(2, "#ff0000")
    clickers << BarStackValue.new(4, "#00ff00")
    clickers << BarStackValue.new(6, "#0000ff")
    clickers << BarStackValue.new(8, "#abcdef")
    clickers.length.times do |index|
    clickers[index].on_click = "line_1"
    #clickers[index].tip = "Hi10 <br> Peak [64] <br> Average [#val#]<br>Total [#total#]"
    bar_stack.append_stack( clickers )
    bar_stack.append_stack( [5,3,1,7] )
    #x_axis = XAxis.new
    #y_axis = YAxis.new

    # Set the direction and values of the x axis labels.
    #x_labels = XAxisLabels.new
    #x_labels.set_vertical( )
    #x_labels.labels = ['one','two']

    #Create an array with the list of items they are looking for
    #x_axis.set_labels( x_labels )

    #Now set the min, max, and the step
    #y_axis.set_range( 0, 30, 2)

    #Create a chart object and fill in the blanks
    chart.set_title( title )
    chart.add_element( bar_stack )
    #chart.x_axis = x_axis
    #chart.y_axis = y_axis
    render :text => chart.to_s

    Finally, the code which is initializing the
    <filter:code attributes=lang="ruby">
    def show
    graph_url = url_for( :overwrite_params => { :controller => ‘dash_board’,
    :action => ‘graph_code’ },
    :only_path => true)

    @graph = open_flash_chart_object_from_hash( graph_url,
    :height => params[ :height ] || 1000,
    :width => params[ :width ] || 1000,
    :div_name => ’super_cool’,
    :swf_file_name => "open-flash-chart-bar-clicking.swf"

    #I must remember not to mess with the actual values, it will mess things up!!!
    @x, cache, users = ConsultantMvDm.email_sla(params)
    render :partial => ‘chart’, :locals => {:x => @x, :cache => cache, :users => users, :graph => @graph}


    Any help would be much appreciated!

  10. By Albee on Jan 8, 2009 | Reply

    Last comment, I have been able to get all other charts to work with the on click options, but barstack. I hope this will help to find a possible bug. Thanks, kaleb

  11. By charlie on Jan 8, 2009 | Reply

    @Albee - thank you for taking time to document all this for everyone :)
    The bar graph clicking functionality was added on to the original .swf file. I would contact Eric through this forum - <a href="http://forums.openflashchart.com/viewtopic.php?f=5&t=305&p=1922#p1922">http://forums.openflashchart.com/viewtopic.php?f=5&t=305&p=1922#p1922</a> and see if he went to the lengths of supporting stacked bar graphs as well.

  12. By Albee on Jan 8, 2009 | Reply

    I wanted to share how I got the onclick event to work with StackedBar. I had to use DZ’s swf (http://www.ofc2dz.com/OFC2/examples/OnClickEvents.html) and modify StackedBarValue to allow arguments to be passed to the super. In my version, I had in the initialize (forgive me, this may not be exactly the wording) super
    Colour = colour
    value = value

    I had to change it to:
    super args
    Colour = colour
    value = value

    And one last thing, the ofc2 using DZ’s swf version behaved badly when passed nil to it. After catching those three things, it worked like a charm!

    I hope this helps someone,

    Have a good day! :)

  13. By lakai on Jan 8, 2009 | Reply


    is there any chance to show datetime-values in the diagramm? sitting here for hours but can’t get the bars shown correctly … does anyone have any example?

    this is my code:

    title = Title.new("MY TITLE")
    bar = BarGlass.new
    xlabels = []
    x = XAxis.new

    chart = OpenFlashChart.new

    y = YAxis.new

    ylabels = []
    bar_values = []
    @laps.each do |lap|
    xlabels << lap.end_time.to_s(:db)
    t = lap.end_time - lap.start_time
    bar_values << Time.at(t)
    render :text => chart.to_s

    best regards and thx in advance!

  14. By Frank on Jan 8, 2009 | Reply

    Hi again! I’m trying to implement a stacked bar chart, but am running into 2 problems. The first is that although I’ve set 5 bar_stack.colours, the stacked bars only use 2 default colors. Here’s the JSON that I’ve generated:

    {"x_legend": {"text": "Week", "style": "{font-size: 20px; color: #778877}"}, "title": {"text": "Memory Performance Over Time"}, "elements": [{"colours": ["#C21E1E", "#EA5F12", "#DCE233", "#7ECB2B", "#36CB2B"], "values": [[4, 20, 12, 16, 48], [9, 35, 3, 20, 30]], "type": "bar_stack"}], "y_axis": {"steps": 10, "max": 100, "min": 0}, "y_legend": {"text": "Percent", "style": "{font-size: 20px; color: #770077}"}, "x_axis": {"labels": {"rotate": "vertical", "labels": [{"size": 14, "text": "03/30/09", "colour": "#000000", "rotate": "diagonal"}, {"size": 14, "text": "04/06/09", "colour": "#000000", "rotate": "diagonal"}]}}}

    The second problem is that I can’t set the keys. I’ve tried several variations (not all at the same time).

    bar_stack = BarStack.new
    BarStackKey.new(COLOR1, ‘Level 1′)

    bar_stack.set_key(COLOR1, ‘Level 1′)

    BarStackKey.new(COLOR1, ‘Level 1′)

    BarStack.key.new(COLOR1, ‘Level 1′)

    Any assistance would be wonderful. Thanks again for creating this plugin!!!

  15. By charlie on Jan 8, 2009 | Reply

    @Frank -
    issue #1 (colors) is new and requires the latest swf file
    issue #2 (keys) not yet supported

    Although, I do have an example using <a href="http://github.com/pullmonkey/open_flash_chart/tree/test">my latest branch of OFC 2</a> Browse through the examples directory to see how I do it.

  16. By charlie on Jan 8, 2009 | Reply

    @lakai - you pretty much have it.

    Just need to put t in as BarValue.new(t) like this:

    bar_values << BarValue.new(t)

  17. By Phil Dubuc on Jan 8, 2009 | Reply

    Found this site via google while searching for charts. Great Tool. Although its a bit more technical than what I’m used to.

    Also found the <a href="nces.ed.gov/nceskids/createAgraph"> National Center for Education</a> chart website and <a href="http://www.chartgo.com"> ChartGo</a> They’re both pretty useful.

  18. By Fulatoro on Nov 22, 2009 | Reply

    I am having trouble getting the BarStack example to work, I am trying add values as such

    val_array = []

    l1value.each do |name,value|
    val_array << BarStackValue.new(value,colors[name])

    I am getting the following error on the val_array << line

    wrong number of arguments (3 for 1)

    I suspect it is happening in the bar_stack.rb, I changed line 16 from


    super args

    THank you.

  19. By dinesh on Feb 19, 2010 | Reply

    How i reload new bar chart in ruby side without page redirecting.

  20. By Ahren on Sep 21, 2010 | Reply

    I realize this post is a bit dated, but I’m looking for help with an issue.

    When I click these chart links (on_click), if the result is a javascript function like you have here, firefox completely locks up. It works fine in internet explorer.

    It happens on more than one computer, so it’s not my local firefox. Has anyone experienced this?

  21. By Muni on Oct 27, 2010 | Reply

    Hello every one,

    Thanks for nice plugin for Graphs. Is there any way that I can generate the vertical Bar Graph with this Plugin? I have tried looked at the Plugin code, but helpless.

    Can any one help me?

    Munendra Chevuru (Muni).

  22. By charlie on Oct 27, 2010 | Reply

    Don’t look at the plugin code, it is all metaprogrammed.
    For examples, use what’s on my site here.
    A vertical bar graph can be found here.

    Or convert the php examples here to ruby.
    Horizontal bar graph example can be found here.

  23. By Muni on Oct 28, 2010 | Reply

    Thanks for your Help! I have tried that.. However I have couple of questions and posted the same on that page..

    Munendra Chevuru (Muni)

  24. By krace on Jan 6, 2012 | Reply

    thanks a lot for this!

    having a bit of a problem here: i’mtrying to get the bar-clicking functionality up in by graph and hitting a snag. in your example, http://pullmonkey.com/projects/open_flash_chart2/bar_clicking, onclick events are named “on-click” (with a dash), and they obviously work (as the example demonstrates). however, lest i’m missing something, dash is not a valid symbol to have in an instance variable. your code sample shows “on_click” (with underscore), however this doesn’t work for me, i.e. the graph displays, but it’s not clickable.

    anything i’m missing?

  25. By charlie on Jan 6, 2012 | Reply

    You’re right, the instance variables all use underscores.
    The code here - https://github.com/pullmonkey/open_flash_chart/blob/master/lib/open_flash_chart/base.rb is what converts on_click back to on-click for the JSON that you pointed to.

    What JSON do you get as output? Do you see on_click instead of on-click?

  26. By krace on Jan 6, 2012 | Reply

    well, DUH, figures! [doofus_face.png]

    I’ve been using an older version of the code. updated from git, things look much better now.

    thanks a ton! =)

  1. 1 Trackback(s)

  2. On-click Events for Bar Charts in OFC2 | Eric Salczynski

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