04 Aug
Open Flash Chart II – Multiple graphs on the same page
Got a comment asking about multiple graphs on the same page and if you need another controller or how that would all work. You only need one controller if you are going to have different graphs in the same view.
No graph for this example, just the code.
Open Flash Chart II examples.
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 @graph1 = open_flash_chart_object(600,300,"/test_it/graph_one") @graph2 = open_flash_chart_object(600,300,"/test_it/graph_two") @graph3 = open_flash_chart_object(600,300,"/test_it/graph_three") # and so on ... end def graph_one ... # put some OFC2 code here like in my examples end def graph_two ... # put some OFC2 code here end def graph_three ... # put some OFC2 code here end end |
And in your view (index.html.erb):
1 2 3 4 5 6 |
<script type="text/javascript" src="/javascripts/swfobject.js"></script> <%= @graph1 %><br/> <%= @graph2 %><br/> <%= @graph3 %><br/> |
Good Luck!
20 Responses
to “Open Flash Chart II – Multiple graphs on the same page”
Sorry, comments for this entry are closed at this time.
Hi! Is BarStackValue missing? I’d need that class to set the colour of the rectangles in a stacked bar chart. Tried BarValue + set_colour but seems that BarStack does not accept BarValues.
@Xavier N. – yes it was missing … sorry about that, see if that (the latest commits as of this comment) works for you.
Man you rock, it couldn’t be quicker. Working like a charm thank you!
Is there a way to set the tooltip of each rectangle? BarStackValue#set_tooltip seems to have no effect.
@Xavier N. – Sorry but there does not seem to be a way to set tooltips by rectangle, neither BarStack nor BarStackValue seem to support tooltips in the swf … I will keep looking though.
This does NOT work for me. Only the last graph I put in the view is displayed, but in the page source, both appear.
In a new sample project:
rails test
script/generate controller test
-> (OFC2 install instructions)
index.rhtml:
<filter:code attributes=lang="ruby">
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph1 %><br/>
<%= @graph2 %><br/>
</filter:code>
test_controller.rb:
<filter:code attributes=lang="ruby">
class TestController < ApplicationController
def index
@graph1 = open_flash_chart_object(600,300,"/test/graph1")
@graph2 = open_flash_chart_object(600,300,"/test/graph2")
end
def graph1
title = Title.new("Pie Chart Example For Chipster")
pie = Pie.new
pie.start_angle = 35
pie.animate = true
pie.tooltip = ‘#val# of #total#<br>#percent# of 100%’
pie.colours = ["#d01f3c", "#356aa0", "#C79810"]
pie.values = [2,3, PieValue.new(6.5,"Hello (6.5)")]
chart = OpenFlashChart.new
chart.title = title
chart.add_element(pie)
chart.x_axis = nil
render :text => chart.to_s
end
def graph2
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
</filter:code>
http://localhost:3000/test/ only displays the last bar graph. Why?
Page source:
<filter:code attributes=lang="ruby">
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<div id="flashcontent_5"></div>
<script type="text/javascript">
var so = new SWFObject("/open-flash-chart.swf", "chart_5","600","300", "9", "#FFFFFF");
so.addVariable("data", "%2Ftest%2Fgraph1");
so.addParam("allowScriptAccess", "sameDomain");
so.write("flashcontent_5");
</script>
<noscript>
<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_5" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/open-flash-chart.swf?600&height=300&data=%2Ftest%2Fgraph1" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="/open-flash-chart.swf?data=%2Ftest%2Fgraph1" quality="high" bgcolor="#FFFFFF" width="600" height="300" name="chart_5" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginpage="http://ww.macromedia.com/go/getflashplayer" id="chart_5"/>
</object>
</noscript><br/>
<div id="flashcontent_6"></div>
<script type="text/javascript">
var so = new SWFObject("/open-flash-chart.swf", "chart_6","600","300", "9", "#FFFFFF");
so.addVariable("data", "%2Ftest%2Fgraph2");
so.addParam("allowScriptAccess", "sameDomain");
so.write("flashcontent_6");
</script>
<noscript>
<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_6" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/open-flash-chart.swf?600&height=300&data=%2Ftest%2Fgraph2" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="/open-flash-chart.swf?data=%2Ftest%2Fgraph2" quality="high" bgcolor="#FFFFFF" width="600" height="300" name="chart_6" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginpage="http://ww.macromedia.com/go/getflashplayer" id="chart_6"/>
</object>
</noscript><br/>
</filter:code>
Could this be the issue? There is two identical div names being generated for two separate flash objects…
<filter:code attributes=lang="ruby">
<div id="flash_content_1218664357.437"></div>
<script type="text/javascript">
swfobject.embedSWF("/open-flash-chart.swf", "flash_content_1218664357.437", "400", "200", "9.0.0", "expressInstall.swf",{"data-file":"%2Fmain%2Fdisk_graph_logic"});
</script>
<noscript>
<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="400" height="200" id="chart_1218664357.437" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/open-flash-chart.swf?data=%2Fmain%2Fdisk_graph_logic" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="/open-flash-chart.swf?data=%2Fmain%2Fdisk_graph_logic" quality="high" bgcolor="#FFFFFF" width="400" height="200" name="chart_1218664357.437" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart_1218664357.437" />
</object>
</noscript>
</filter:code>
and
<filter:code attributes=lang="ruby">
<div id="flash_content_1218664357.437"></div>
<script type="text/javascript">
swfobject.embedSWF("/open-flash-chart.swf", "flash_content_1218664357.437", "400", "200", "9.0.0", "expressInstall.swf",{"data-file":"%2Fmain%2Fmem_graph_logic"});
</script>
<noscript>
<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="400" height="200" id="chart_1218664357.437" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/open-flash-chart.swf?data=%2Fmain%2Fmem_graph_logic" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="/open-flash-chart.swf?data=%2Fmain%2Fmem_graph_logic" quality="high" bgcolor="#FFFFFF" width="400" height="200" name="chart_1218664357.437" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart_1218664357.437" />
</object>
</noscript>
</filter:code>
Yes, this is the issue. It is generating two identical id’s for two separate objects. I mashed refresh a billion times until I got different IDs for each object.
Where can I fix this?
@Nick – wow good work. You must have a really fast server. That code is in RAILS_ROOT/vendor/plugins/open_flash_chart/lib/open_flash_chart_object.rb
I will come up with something. I am using time and apparently that is not good enough.
Maybe generate a hash value for the chart based on time – and the contents of the chart / the chart object?
@Nick – Good call, just fixed it and it is out on github – http://github.com/pullmonkey/open_flash_chart/tree/master
I decided to use time and the url as the unique hash. Thank you for the suggestion.
Charlie,
I did the same thing last night 😉 Thanks for the fix.
Nick
Sorry,it still does NOT work for me.
I met the same issue of Nick, even though I changed the Hash generator of div in file open_flash_chart_object.rb. What I did was add a "rand.to_s" to the base string for hash. And the "Open Flash Chart" plugin I used is the newest one I download 5 minutes ago. 🙁
Could Charlie think it over and fix it? Thanks a lot!
@Bear Young – could you post your HTML so I have something to work from? I am very interested in fixing it. Let me know.
Sorry, I don’t know your email address, Charlie. Could you send an email to me or tell me one way to contact with you, if it is unsuitable to publish your email at this page. Mine is bearyoung@gmail.com.
Hi Charlie,
I think I’m having a similar problem to Nick. I’m using OFC2 (recently installed) on Rails 3, Ruby 1.9.2. I can get one graph to display correctly per page, but when I add that second declaration in my view, they both fail. Page source: both IDs are identical.
swfobject.embedSWF(
“/open-flash-chart.swf”,”flashcontent_913000″,
“440”, “310”, “9.0.0”, “expressInstall.swf”,
{“data-file”:”/analytics%2Fpie”}, {}, {} );
swfobject.embedSWF(
“/open-flash-chart.swf”,”flashcontent_913000″,
“440”, “310”, “9.0.0”, “expressInstall.swf”,
{“data-file”:”/analytics%2Fpile”}, {}, {} );
I’m not too experienced with all this, so how can I fix this particular problem? Thank you very much.
Sorry, divs got cut off!
swfobject.embedSWF(
“/open-flash-chart.swf”,”flashcontent_913000″,
“440”, “310”, “9.0.0”, “expressInstall.swf”,
{“data-file”:”/analytics%2Fpie”}, {}, {} );
swfobject.embedSWF(
“/open-flash-chart.swf”,”flashcontent_913000″,
“440”, “310”, “9.0.0”, “expressInstall.swf”,
{“data-file”:”/analytics%2Fpile”}, {}, {} );
Hey Seesaw – Let’s figure this out – just need a snippet of code from you (gist or pastie link would be fine). I need something I can use to reproduce the problem.
Thank you.
Hi Charlie,
I sent you a direct e-mail a couple of days ago with a pastie link attached. Let me know if you’d like me to resend or if I can get you the code some other way. Thank you.