home
about
archivesStacked bar chart with Rails and Open Flash Chart
Consequently to questions about the stacked bar charts, I have added an example to the OFC test app. Once again this example is a translation of the original example from Teethgrinder. However, this time there are indeed a few catches.
See the live example of the stacked bar chart here
The code
in test_it_controller.rb:
def index_stacked_bar
@graph = open_flash_chart_object(600,300,"/test_it/graph_code_stacked_bar")
end
def graph_code_stacked_bar
title = Title.new("A stacked bar chart")
title.set_style( "{font-size: 20px; color: #F24062; text-align: center;}" );
bar_stack = BarStack.new
# set_colours does not work
# set a cycle of 3 colours:
# colour_array = Array.new( [ '#C4D318', '#50284A', '#7D7B6A'] )# yellow purple gray
## bar_stack.set_colour('#C4D318', '#50284A', '#7D7B6A');
# bar_stack.set_colour(colour_array);
# # add 3 bars:
# bar_stack.append_stack( Array.new( [2.5, 5, 2.5 ]) ); # 0
# # add 4 bars, the fourth will be the same colour as the first:
# bar_stack.append_stack( Array.new( [2.5, 5, 1.25, 1.25 ]) ); # 1
## debugger
# bsv4 = BarStackValue.new(5, '#ff0000') #red
# bsv5 = BarStackValue.new(2, '#ff00ff') # 3 pink
#
# bar_stack.append_stack( Array.new( [5,bsv4] ) ); # 2 red
# bar_stack.append_stack( Array.new( [2, 2, 2, 2, bsv5]) ); # 3 pink
# Using BarStackValue to set the colour
bsv1 = BarStackValue.new(2.5, '#C4D318') # yellow
bsv2 = BarStackValue.new(5, '#50284A') # purple
bsv3 = BarStackValue.new(1.25, '#7D7B6A') # gray
bsv31 = BarStackValue.new(1.25, '#C4D318') # yellow
bsv4 = BarStackValue.new(5, '#C4D318') # yellow
bsv41 = BarStackValue.new(5, '#ff0000') # red
bsv5 = BarStackValue.new(2, '#ff00ff') # pink
bsv6 = BarStackValue.new(2, '#C4D318') # yellow
bsv7 = BarStackValue.new(2, '#50284A') # yellow
bsv8 = BarStackValue.new(2, '#7D7B6A') # purple
bar_stack.append_stack( Array.new( [bsv1, bsv2, bsv1 ]) ); # 0
bar_stack.append_stack( Array.new( [bsv1, bsv2, bsv3,bsv31 ]) ); # 0
bar_stack.append_stack( Array.new( [bsv4,bsv41] ) ); # 2 red
bar_stack.append_stack( Array.new( [bsv6, bsv7, bsv8, bsv6, bsv5]) ); # 3 pink
# Does not work
# bsk1 = BarStackKey.new( '#C4D318', 'Kiting', 13 )
# bsk2 = BarStackKey.new( '#50284A', 'Work', 13 )
# bsk3 = BarStackKey.new( '#7D7B6A', 'Drinking', 13 )
# bsk4 = BarStackKey.new( '#ff0000', 'XXX', 13 )
# bsk5 = BarStackKey.new( '#ff00ff', 'What rhymes with purple? Nurple?', 13 )
#
# bar_stack.set_keys(Array.new([bsk1, bsk2,bsk3,bsk4,bsk5]))
## bar_stack.set_keys(Array.new([bsk1, bsk2,bsk3,bsk4,bsk5]))
bar_stack.set_tooltip( 'X label [#x_label#], Value [#val#]<br>Total [#total#]' );
y = YAxis.new();
y.set_range( 0, 14, 2 );
x = XAxis.new();
x.set_labels_from_array( Array.new( ['Winter', 'Spring', 'Summer', 'Autmn' ]) );
tooltip = Tooltip.new;
tooltip.set_hover();
chart = OpenFlashChart.new
chart.set_title(title)
chart.add_element(bar_stack)
chart.x_axis = x ;
chart.y_axis = y ;
chart.set_tooltip( tooltip );
render :text => chart.to_s
end
in index_stacked_bar.html.erb:
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph %>The catches
In Teethgrinder’s code there is a call to the set_colours method. For some undetermined reasons this method does not work with OFC. Instead we directly set the color using the color parameter in BarStackValue. However, the BarStackValue class constructor returned me an error about a bad number of arguments. So I needed to make the following modification:
in vendor/plugins/open_flash_chart/lib/open_flash_chart/bar_stack.rb
class BarStackValue < Base
def initialize(val,colour, args={})
super args
@val = val
@colour = colour
end
endMoreover the BarStackKey function that allows to write the legends is not implemented yet. This is something to be fixed in a future release.
A Reminder
For this example most of the code is in the controller. However, I remind you that the proper place for it would be in your model if you want to keep your code DRY.
You would use a graph like a view. Let us check this example:
In the model MyModel:
def make_chart_1
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)
endNotice you can add all the inputs you want to the graph creating function in the model.
In the controller:
mymodel.make_chart_1In the view :
<%= mymodel.chart.js_open_flash_chart_object("my_chart_js_1", 550,300) %>Enjoy your stacked bar chart. And by the way if you own a website using OFC leave a link so we can see it at work.
Posted in Ruby on Rails | 2 comments | atom
Trackbacks
Use the following link to trackback from your own site:
http://harryseldon.thinkosphere.com/trackbacks?article_id=61
Hi,
Which Python module did you use? I am trying to use pyofc2 etc.. but its doesnt seem to have a working y.axis class?
Hi Ali, this tuto i for Rubby, not for Python…
I you want to use Open Flash Chart with python use PyOFC2.py
And to use de y_axis element, have a look to my blog here : http://www.leau2001.fr/dotclear/index.php?post/2009/08/13/PyOFC2-le-bending-python-de-la-librairie-open-source-%3A-Open-Flash-Chart
thx lo