Open Flash Chart II - Javascript (Part 1)

September 21st, 2008 by charlie

This article (and the work behind it -- meaning get the latest from github) is generously sponsored by Harry Seldon who wants to be able to pass data around using javascript. There are quite a few benefits to this, learn more from teethgrinder's tutorial on the same topic.

This example opens up a lot of possibilities and I thank Harry for pointing me to it. So more to come on OFC and Javascript. For a taste of what is to come, check these out:

Here is the graph we are after in this example:

More Open Flash Chart II examples.

And here is the code (the controller):


class TestItController < ApplicationController
  def index
    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)
  end
end

Notice that I do not render the chart object, however I turn it into an instance variable for use in our javascript rendering of our chart.

And in your view (index.html.erb):


<html>
  <head>
    <%= javascript_include_tag :defaults, "swfobject" %>
  </head>
  <body>
    <%= @chart.js_open_flash_chart_object("my_chart_js_1", 550,300) %>
  </body>
</html>

I do a lot behind the scenes but if you look, you will see a few new things here.

The data comes from the @chart.js_open_flash_chart_object(...) call which sets up a few javascript callback methods to send the data to the SWF object. It takes 3 required arguments div_name (the id of the div that houses the chart), width and height and one optional argument base_url which defaults to "/".
If you look at the HTML source, it is quite a bit different, we simply embed the SWF object. We do not need to point to the data method since there actually isn't one.
One difference between this Rails example and php example (from teethgrinder) is that prototype which comes standard with rails, has a JSON implementation for javascript, so we do not need the json2.js file, but make sure to include prototype.js in your apps.

For more information on the javascript callbacks that I setup here, you will want to view the page source and read about it further over at teethgrinder's tutorial.

Good Luck! and Harry, I hope this helps, otherwise please drop me a line.

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

8 Responses to “Open Flash Chart II - Javascript (Part 1)”

Harry Seldon Says:
September 22nd, 2008 at 06:13 AM It will surely help ! I will have a deep look into it tonight. Thanks a lot.

H

Harry Seldon Says:
September 22nd, 2008 at 01:45 PM So I have had a look at this. That works perfectly. And I managed to see where I made some beginner mistakes.
For the controller I had the same code as you : I am giving it because it has the fun of having the php code in it (by the way the $ makes php code really ugly).


    title = Title.new("tuto_5")
    #$title = new title( date("D M d Y") );
    #$chart = new open_flash_chart();
    @chart = OpenFlashChart.new
    #$bar = new bar();
    bar = BarGlass.new
    #$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
    bar.set_values([1,2,3,4,5,6,7,8,9])
    #$chart->set_title( $title );
    @chart.set_title(title)
    #$chart->add_element( $bar );
    @chart.add_element(bar)

Then I had directly coded the view code without helpers (and quite ugly) :



<head>
<script type="text/javascript" src="/javascripts/json2.js"></script>
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
</head>

<body>
<script type="text/javascript">
swfobject.embedSWF("/open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>
<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
    
var data = <%= @chart.to_s %>;
</script>
  
<p>Hello World</p>
<div id="my_chart"></div>
</body>

This code works (thanks to you) you can check it out here
But I had made some stupid mistakes : I forgot the / in "/open-flash-chart.swf" and I actually forgot to link the json2.js lib.

Thanks to you and I am looking forward to reading the next chapters !
H

charlie Says:
September 22nd, 2008 at 02:24 PM
@Harry Seldon - Glad everything is working for you - the next chapter is available here.
Kevin Motschiedler Says:
October 23rd, 2008 at 10:04 PM Just wanted to make a comment that older versions of prototype don't implement the toJSON method. I believe it was added in version 1.5.1. This caused some head scratching for me since I had 1.5 installed in my project.
charlie Says:
October 24th, 2008 at 03:12 PM
@Kevin - sorry about that. Thanks for helping the next person though :)
Wesley Says:
November 2nd, 2008 at 07:55 PM I was just checking out your plugin, and I came across a problem. When it gets to the line:

@chart.js_open_flash_chart_object(...)

I get a:

undefined method `js_open_flash_chart_object' for #<openflashchart::openflashchart:0x2b214cc68f70>

Any ideas? It works when I don't put @chart, but then the self.render obviously doesn't work. This happens to any of the methods I try to call in OpenFlashChart::View.

Thanks in advance!
charlie Says:
November 5th, 2008 at 07:06 AM
@Wesley - fixed in the latest release. Something happened recently in the pushing/pulling :(
Wesley Says:
November 5th, 2008 at 10:33 PM Thanks. In the meantime, I also managed to fix the problem. Looks like your solution and mine were the same. Wonderful little plugin. Keep up the good work. Cheers!