PullMonkey Blog

21 Sep

Open Flash Chart II - Javascript (Part 1)


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

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9

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

  1. 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 "/".
  2. 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.
  3. 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.






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

  1. By Harry Seldon on Sep 21, 2008 | Reply

    It will surely help ! I will have a deep look into it tonight. Thanks a lot.

    H

  2. By Harry Seldon on Sep 21, 2008 | Reply

    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).
    <filter:code attributes=lang="ruby">
    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)
    </filter:code>

    Then I had directly coded the view code without helpers (and quite ugly) :
    <filter:code attributes=lang="html">

    <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>
    </filter:code>

    This code works (thanks to you) you can check it out <a href="http://thinkosphere.com/test_it/tuto_5">here</a>
    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

  3. By charlie on Sep 21, 2008 | Reply

    @Harry Seldon - Glad everything is working for you - the next chapter is available <a href="http://pullmonkey.com/2008/9/22/open-flash-chart-ii-javascript-part-2">here</a>.

  4. By Kevin Motschiedler on Sep 21, 2008 | Reply

    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.

  5. By charlie on Sep 21, 2008 | Reply

    @Kevin - sorry about that. Thanks for helping the next person though :)

  6. By Wesley on Sep 21, 2008 | Reply

    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:0×2b214cc68f70>

    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!

  7. By charlie on Sep 21, 2008 | Reply

    @Wesley - fixed in the latest release. Something happened recently in the pushing/pulling :(

  8. By Wesley on Sep 21, 2008 | Reply

    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!

  1. 2 Trackback(s)

  2. PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 2)
  3. PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 3)

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