Open Flash Chart II - Multiple graphs on the same page

August 4th, 2008 by charlie

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):


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):


<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph1 %><br/>
<%= @graph2 %><br/>
<%= @graph3 %><br/>

Good Luck!

Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials

16 Responses to “Open Flash Chart II - Multiple graphs on the same page”

Xavier Noria Says:
August 4th, 2008 at 03:39 PM 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.
charlie Says:
August 4th, 2008 at 03:50 PM
@Xavier N. - yes it was missing ... sorry about that, see if that (the latest commits as of this comment) works for you.
Xavier Noria Says:
August 4th, 2008 at 04:24 PM Man you rock, it couldn't be quicker. Working like a charm thank you!
Xavier Noria Says:
August 4th, 2008 at 07:12 PM Is there a way to set the tooltip of each rectangle? BarStackValue#set_tooltip seems to have no effect.
charlie Says:
August 4th, 2008 at 10:26 PM
@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.

Nick Says:
August 13th, 2008 at 03:37 PM 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:

1234	<script type="text/javascript" src="/javascripts/swfobject.js"></script><%= @graph1 %><br/><%= @graph2 %><br/>

test_controller.rb:


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

http://localhost:3000/test/ only displays the last bar graph. Why?

Nick Says:
August 13th, 2008 at 03:40 PM Page source:



<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/>

Nick Says:
August 13th, 2008 at 03:59 PM Could this be the issue? There is two identical div names being generated for two separate flash objects...


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

and


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

Nick Says:
August 13th, 2008 at 04:44 PM 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?
charlie Says:
August 13th, 2008 at 06:10 PM
@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.
Nick Says:
August 13th, 2008 at 07:48 PM Maybe generate a hash value for the chart based on time - and the contents of the chart / the chart object?
charlie Says:
August 14th, 2008 at 08:10 AM
@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.
Nick Says:
August 14th, 2008 at 08:52 AM Charlie,

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

Nick
Bear Young Says:
August 27th, 2008 at 10:13 AM 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!
charlie Says:
August 27th, 2008 at 11:07 AM
@Bear Young - could you post your HTML so I have something to work from? I am very interested in fixing it. Let me know.
Bear Young Says:
August 27th, 2008 at 11:28 AM 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.