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:
- 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
- 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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class TestItController < ApplicationController def index @graph = open_flash_chart_object(600,300,"/test_it/graph_code", true, "/", "open-flash-chart-bar-clicking.swf") end 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} bar.set_values(bar_values) # 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 chart.set_title(title) chart.add_element(bar) render :text => chart.to_s end end |
And in your view (index.html.erb):
1 2 3 4 |
<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 Trackback(s)
- Jan 16, 2010: On-click Events for Bar Charts in OFC2 | Eric Salczynski
Sorry, comments for this entry are closed at this time.
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….
monk.e.boy
@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>
Hey,
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?
@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.
I had same problem with vertical labels.
I tried different thing and eventually replacing ‘vertical’ with angle value was enough: 270 – is OK 🙂
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!
@Albee — I am not sure I know what you mean exactly. Does this tutorial not work for you?
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!
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]]}]}
</filter:code>
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#]"
end
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
RAILS_DEFAULT_LOGGER.error("\n##################################################\n")
RAILS_DEFAULT_LOGGER.error("\n#{chart.to_s}\n")
RAILS_DEFAULT_LOGGER.error("\n##################################################\n")
render :text => chart.to_s
end
</filter:code>
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}
end
</filter:code>
Any help would be much appreciated!
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
@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.
Hello,
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! 🙂
Hi,
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
x.set_offset(true)
chart = OpenFlashChart.new
chart.set_title(title)
y = YAxis.new
y.set_offset(false)
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)
end
x.set_labels(xlabels)
chart.set_x_axis(x)
bar.set_values(bar_values)
chart.add_element(bar)
render :text => chart.to_s
best regards and thx in advance!
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
bar_stack.set_keys(
BarStackKey.new(COLOR1, ‘Level 1’)
)
bar_stack.set_keys(
bar_stack.set_key(COLOR1, ‘Level 1’)
)
bar_stack.set_keys(
BarStackKey.new(COLOR1, ‘Level 1’)
)
bar_stack.set_keys(
BarStack.key.new(COLOR1, ‘Level 1’)
)
Any assistance would be wonderful. Thanks again for creating this plugin!!!
@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.
@lakai – you pretty much have it.
Just need to put t in as BarValue.new(t) like this:
bar_values << BarValue.new(t)
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.
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])
end
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
to
super args
THank you.
How i reload new bar chart in ruby side without page redirecting.
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?
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).
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.
Thanks for your Help! I have tried that.. However I have couple of questions and posted the same on that page..
Thanks,
Munendra Chevuru (Muni)
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?
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?
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! =)