Open Flash Chart II – Javascript (Part 2)
This article is a follow on to Part 1. In this article, I will discuss how we can change between various charts on the fly - meaning, changing the SWFObject without sending a request or rerendering the page.
As promised there are still more topics to come on OFC and Javascript:
- Basics of OFC and Javascript. - Last article (part 1)
- Change data on the fly with links. - This article, see links under the graph.
- 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 and interface we are after in this example:
Load Chart 1||Load Chart 2||Load Chart 3
More Open Flash Chart II examples.
And 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 23 24 25 26 27 |
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]) chart1 = OpenFlashChart.new chart1.set_title(title) chart1.add_element(bar) title = Title.new("MY TITLE 2") bar = BarGlass.new bar.set_values([1,2,3,4,5,6,7,8,9].reverse) chart2 = OpenFlashChart.new chart2.set_title(title) chart2.add_element(bar) title = Title.new("MY TITLE - some new data") bar = BarGlass.new bar.set_values([1,3,2,5,4,7,6,9,8]) chart3 = OpenFlashChart.new chart3.set_title(title) chart3.add_element(bar) @charts = [chart1, chart2, chart3] end end |
And in your view (index.html.erb):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <%= javascript_include_tag :defaults, 'swfobject' %> </head> <body> <%= @charts.first.js_open_flash_chart_object("my_chart_js_2", 550,300) %> <br/><br/> <% @charts.each_with_index do |chart, i| %> <%= chart.link_to_ofc_load("Load Chart #{i + 1}", "my_chart_js_2") %> <%= " || " if i < @charts.size - 1 %> <% end %> </body> </html> |
In this example, we make use of the link_to_ofc_load method that basically creates a link_to_function along with the function that we call to load the chart data into the swfobject chart. It takes two arguments, the link text and the id of the div whose swf we will load new data into.
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!
3 Responses
to “Open Flash Chart II – Javascript (Part 2)”
2 Trackback(s)
- Jan 6, 2010: PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 1)
- Jan 6, 2010: PullMonkey Blog » Blog Archive » Open Flash Chart II - Javascript (Part 3)
Sorry, comments for this entry are closed at this time.
Works great !