PullMonkey Blog

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”

  1. By Xavier Noria on Aug 4, 2008 | Reply

    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.

  2. By charlie on Aug 4, 2008 | Reply

    @Xavier N. - yes it was missing … sorry about that, see if that (the latest commits as of this comment) works for you.

  3. By Xavier Noria on Aug 4, 2008 | Reply

    Man you rock, it couldn’t be quicker. Working like a charm thank you!

  4. By Xavier Noria on Aug 4, 2008 | Reply

    Is there a way to set the tooltip of each rectangle? BarStackValue#set_tooltip seems to have no effect.

  5. By charlie on Aug 4, 2008 | Reply

    @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.

  6. By Nick on Aug 4, 2008 | Reply

    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?

  7. By Nick on Aug 4, 2008 | Reply

    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>

  8. By Nick on Aug 4, 2008 | Reply

    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>

  9. By Nick on Aug 4, 2008 | Reply

    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?

  10. By charlie on Aug 4, 2008 | Reply

    @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.

  11. By Nick on Aug 4, 2008 | Reply

    Maybe generate a hash value for the chart based on time - and the contents of the chart / the chart object?

  12. By charlie on Aug 4, 2008 | Reply

    @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.

  13. By Nick on Aug 4, 2008 | Reply

    Charlie,

    I did the same thing last night ;) Thanks for the fix.

    Nick

  14. By Bear Young on Aug 4, 2008 | Reply

    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!

  15. By charlie on Aug 4, 2008 | Reply

    @Bear Young - could you post your HTML so I have something to work from? I am very interested in fixing it. Let me know.

  16. By Bear Young on Aug 4, 2008 | Reply

    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.

  17. By Seesaw on Oct 9, 2010 | Reply

    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.

  18. By Seesaw on Oct 9, 2010 | Reply

    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”}, {}, {} );

  19. By charlie on Oct 12, 2010 | Reply

    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.

  20. By Seesaw on Oct 16, 2010 | Reply

    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.

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