23 Sep
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):
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!
22 Sep
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:
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!
21 Sep
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.
- 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.
