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:
- The one I will go over in this article.
- Change data on the fly with links - Discussed in Part2.
- Update and Save data.
- Ajax calls to server - Discussed in Part 3.
- Manipulate the data through an interface.
- Some really cool interfaces.
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.
- 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.
10 Responses
to “Open Flash Chart II – Javascript (Part 1)”
2 Trackback(s)
- Jan 6, 2010: PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 2)
- Jan 6, 2010: PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 3)
Sorry, comments for this entry are closed at this time.
It will surely help ! I will have a deep look into it tonight. Thanks a lot.
H
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
@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>.
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.
@Kevin – sorry about that. Thanks for helping the next person though 🙂
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!
@Wesley – fixed in the latest release. Something happened recently in the pushing/pulling 🙁
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!