Open Flash Chart II - Javascript (Part 3)
September 23rd, 2008 by charlie
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:
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):
And in your view (index.html.erb):
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!
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!
September 24th, 2008 at 03:26 AM Another nice example ! Thx.
I haven't tried it yet. However as a suggestion to make the example a little funnier: can you show first the graph with multiple lines and then have the user click on some link to enable/disable one line ?
H
September 24th, 2008 at 01:42 PM Hey,
How can I use open-flash-chart to make radar charts (a.k.a. spider graphs)? Is it possible?
September 24th, 2008 at 02:34 PM
@Joe - Spider graphs are not part of Open Flash Chart.
You may want to mention it on the OFC forums, and see if Monk.e.boy has any plan of adding that to OFC.
September 24th, 2008 at 02:35 PM @Charlie, looking at your example I think some weird things are happening. On this page, when one clicks on "Load Chart from server data" a chart with multiple lines appears whereas a bar chart should appear shoudn't it ?
On a local app, under Rails 2.1, it works fine.
On a local app, under Rails 2.0.2, The first graph is not loaded. Error : ActionController::RoutingError (No route matches "/data-files/horizontal-bar-chart.txt" with {:method=>:get}): I do not know yet where this error comes from.
H
September 24th, 2008 at 02:38 PM @Joe, using scatter graphs, you might get somewhere not too far from a radar charts. Just guessing.
September 24th, 2008 at 04:43 PM
@Harry Seldon - no I am showing a line graph, not a bar graph for the ajax call, just for fun. Sorry if that is confusing. Added some text to the link to make it clear.
For the other problem - I will load 2.0.2 and see what may be causing the problem.
September 25th, 2008 at 05:47 AM
@Harry Seldon - Now I know why you asked that - the code I display is showing that it should be a bar graph, but I am somehow pulling a line graph. Sorry, I didn't match the example with the code very well.
Also, 2.0.2 works for me. Anything that says "data-files" has to do with the AS. So hmm... double check your swf file ?
September 25th, 2008 at 08:33 AM @Charlie, Indeed the example is quite confusing, isn't it simple to make the correction and have the example matching the code ? If it is simple I strongly encourage you to do it for sake of clarity ;-)
About the swf file, is it a file that is regularly updated when you update OFCII ? In that case it is indeed probably the problem.
Thx.
September 25th, 2008 at 10:27 AM
@Harry Seldon - yes, it is updated quite often.
Let me know.
September 26th, 2008 at 12:26 AM @Charlie, that was indeed the problem. I got this trouble updating OFCII because for some reason the command
script/plugin install git://github.com/pullmonkey/open_flash_chart.git does not work in my Rails 2.0.2 app, I get the error : svn: This client is too old to work with working copy.
Is git working on Rails 2.0.2 or only 2.1 ?
Else my app might be not so well updated to Rails 2.0.2.
Thx for having updated the example (even if I prefered the previous version with 2 similar charts which shows better the interest of the example).
September 26th, 2008 at 09:28 AM
@Harry Seldon - uses svn in 2.0.2. Write up an example you'd like to see and I will post it for you.
September 26th, 2008 at 05:06 PM OK So I am migrating to Rails 2.1.1.
And about the example, here is the example I was thinking about in my first comment : click here.
H
September 28th, 2008 at 04:23 AM Now that my app migrated to Rails 2.1.1 (or more exactly that my host made the migration to Rails 2.1.1 possible) you can see the graph of the example here : http://www.thinkosphere.com/test_it/index_js_3_line. (code is in the link I gave in my previous comment)
Charlie, you are welcome to adapt back the example to your blog.
September 28th, 2008 at 12:46 PM Charlie, I have anticipated a little on your "Update and Save data" post. I made up an example here. This one is also quite raw so I am looking forward to an example more "railsish" from you !
September 29th, 2008 at 04:19 PM
@Harry Seldon - Thanks, that will definitely come in handy.
October 8th, 2008 at 11:57 AM Charlie,
Nice work. I tried and it worked great when I have only one chart on a page. However, when I include two charts on the same page, both charts show the same content. After inspecting the html source, it turns out both javascript functions are using the same var data.
October 25th, 2008 at 01:03 AM @pdx3d, That's a good remark. Currently, the whole goal for this ajax way of displaying the charts is to dynamically modify a chart. This is possible through sharing the data variables between several graphs. Therefore, I understand there might be some problems when displaying 2 different charts.
Some work needs to be done to define a data variable different for each graph.
October 25th, 2008 at 01:09 AM @joe, you asked: "How can I use open-flash-chart to make radar charts (a.k.a. spider graphs)? Is it possible?".
As Charlie pointed it in his last post, it is now possible to make radar charts.
How ? My answer is in this radar chart example.
November 25th, 2008 at 03:07 PM Hi,
First, thanks for the great information.
I've been going through the tutorials, and they all make sense. I'm having a tough time with the Ajax one though. Probably something silly I am doing (or, perhaps not doing)...
Anyway, when I run the code, I get an error:
"no id given"
This is related to the call:
<%= @graph.js_open_flash_chart_object('my_chart_js_1', 550,300) %>
Any ideas what the problem might be?
Mike
November 25th, 2008 at 03:38 PM
@Mike C - Do you have a file/line number or trace by any chance for that error? Let me know.
November 25th, 2008 at 06:18 PM Hi there,
Thanks... here is the response I receive:
ArgumentError in
Test_it#index
Showing test_it/index.html.erb where line #8 raised:
Extracted source (around line #8):
RAILS_ROOT: C:/EclipseWorkspaceFolder/test_ofc_2Thanks,
Mike
November 25th, 2008 at 06:36 PM
@Mike C - ok, I am more interested in all the stuff after the rails root, like the full trace. So click full trace and send it on over :) I need to know where it is failing in the OFC code and this will certainly help.
November 25th, 2008 at 06:47 PM Hi,
Here's the trace:
Showing test_it/index.html.erb where line #8 raised:
Extracted source (around line #8):
RAILS_ROOT: C:/EclipseWorkspaceFolder/test_ofc_2Application Trace |
Framework Trace |
Full Trace
Request
Parameters:
Show session dump
Response
Headers:
{"cookie"=>[],"Cache-Control"=>"no-cache"}
November 26th, 2008 at 10:20 AM
@Ah ha - you are using an older version of OFC. Get the latest version.