Open Flash Chart II – Javascript (Part 3)
This article is a follow on to Part 1 and Part 2. In this article, I will discuss how we can change between various charts on the fly - meaning, changing the SWFObject without rerendering the page but this time we can do it without storing everything in javascript variables initially. We will use an Ajax request to grab our data off the server.
As promised there are still more topics to come on OFC and Javascript:
- Basics of OFC and Javascript. - Discussed in Part 1
- Change data on the fly with links. - Discussed in Part 2.
- Update and Save data.
- Ajax calls to server - This article.
- Manipulate the data through an interface.
- Some really cool interfaces.
Here is the graph and interface we are after in this example:
Load Original Chart (Bar Graph)||Load Chart from server data (Line Graph)
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
class TestItController < ApplicationController def index title = Title.new("MY TITLE - original") 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 def some_server_data title = Title.new("Multiple Lines") data1 = [] data2 = [] data3 = [] 10.times do |x| data1 << rand(5) + 1 data2 << rand(6) + 7 data3 << rand(5) + 14 end line_dot = LineDot.new line_dot.text = "Line Dot" line_dot.width = 4 line_dot.colour = '#DFC329' line_dot.dot_size = 5 line_dot.values = data1 line_hollow = LineHollow.new line_hollow.text = "Line Hollow" line_hollow.width = 1 line_hollow.colour = '#6363AC' line_hollow.dot_size = 5 line_hollow.values = data2 line = Line.new line.text = "Line" line.width = 1 line.colour = '#5E4725' line.dot_size = 5 line.values = data3 y = YAxis.new y.set_range(0,20,5) x_legend = XLegend.new("MY X Legend") x_legend.set_style('{font-size: 20px; color: #778877}') y_legend = YLegend.new("MY Y Legend") y_legend.set_style('{font-size: 20px; color: #770077}') chart =OpenFlashChart.new chart.set_title(title) chart.set_x_legend(x_legend) chart.set_y_legend(y_legend) chart.y_axis = y chart.add_element(line_dot) chart.add_element(line_hollow) chart.add_element(line) render :text => chart.to_s end end |
And in your view (index.html.erb):
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <%= javascript_include_tag :defaults, 'swfobject' %> </head> <body> <%= @chart.js_open_flash_chart_object("my_chart_js_1", 550,300) %> <br/><br/> <%= @chart.link_to_ofc_load("Load Original Chart", "my_chart_js_1") %> || <%= @chart.link_to_remote_ofc_load("Load Chart from server data", "my_chart_js_1", "/test_it/some_server_data") %> </body> </html> |
In this example, we make use of the link_to_remote_ofc_load method that basically creates a link_to_remote along with the function that we call to load the chart data into the swfobject chart from the server. It takes three arguments, the link text, the id of the div whose swf we will load new data into and the url from which to fetch the data.
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!
63 Responses
to “Open Flash Chart II – Javascript (Part 3)”
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 2)
Sorry, comments for this entry are closed at this time.
I’m providing them graphs for viewing their stats on a weekly and monthly basis.
The monthly graph uses line charts (the swf file currently in your plugin), one value for each day.
The weekly graph uses bar charts (the Ichor version of the swf file), one value for each hour.
More graphs are likely to come.
So the users use both graphs, and their browser has to download both swf files in order to view them…
@Raphael – so what you are saying is that there is not a single version of the swf file that can do everything you need. What can I do to help that? I thought you were suggesting that I package the plugin with the Ichor swf. But you say that you use the original swf for your line charts. I am not sure how you feel I can help … but am open for ideas. Just note that I don’t maintain the swf files, just the plugin.
I’d simply like to use the new swf file for my line charts, so that users would have to download only one swf file, but the methods in the current version of your plugin doesn’t allow to use the line charts of the new swf file.
@Raphael – Ah, I see what is going on 🙂 I thought Ichor was some guy you got a swf file from, however it *IS* the currently official swf file – sorry about that – I have been out of the loop for quite some time. Thanks for being so patient! And now I understand perfectly 🙂
Sometimes I feel a little dense, so if the answer is trivial or obvious, please be patient. In my project I am submitting data to the server through the form_remote_tag and would like to have the response processed similar to the example above. My question is, how would I need to modify this example to fit those requirements? Why I am asking such a broad question is because, I am not sure what detail I am missing.
Hi Charlie, very good work you have here.
I have a question and I hope you can help me.
I’m kind of new to Rail, and in my project I wanna do something like:
* Show the charts in the web page ( ok )
* Create a PDF file with the chart. ( ? )
I know that the chart is render/created at client-side. Is there any way or plugin to do this?
Thank you.
David
I’m hitting a problem similar to the one Harry mentioned in the 4th comment.
For some reason when I use the js_open_flash_chart_object method it tries to make a call to my app at this url: “/data-files/y-axis-auto-steps.txt”
Which of course fails. Very strange.
When I use the regular open_flash_chart_object method in the controller it works correctly.
Brian, that usually means you didn’t provide a data source for the chart? It’s the default location in the swf file.
If you look at the swf file by itself, you will probably see the same problem – http://pullmonkey.com/projects/open-flash-chart.swf
Also, just in case this could be the problem – as Harry found out, try using the swf file from here (that comes with the plugin) – http://pullmonkey.com/projects/open-flash-chart.swf, see if it makes a difference in your code.
Great! Thanks for the response Charlie. Much appreciated.
does link_to_remote_ofc_load need prototype? can jquery be used?
has anyone noticed big cpu spikes from firefox when you load data using ofc_load? wondering if there is a problem with the swfobject