home
about
archivesA Rails/OFC/Ajax example
Following this nice work from Pullmonkey, here is a small example on how to use OFCII to dynamically load a chart. We will display a line chart and then dynamically add one more line.
Controller code (test_it_controller.rb):
class TestItController < ApplicationController
def index_js_3_line
title = Title.new("Multiple Lines")
data1 = [5, 3, 4, 1, 3, 2, 5, 4, 3, 3]
data2 = [12, 9, 9, 7, 8, 8, 9, 9, 8, 9]
data3 = [16, 14, 17, 18, 14, 15, 16, 18, 15, 15]
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 = chart
end
def some_server_data_line
title = Title.new("Multiple Lines")
data1 = [5, 3, 4, 1, 3, 2, 5, 4, 3, 3]
data2 = [12, 9, 9, 7, 8, 8, 9, 9, 8, 9]
data3 = [16, 14, 17, 18, 14, 15, 16, 18, 15, 15]
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
endAnd in the view (index_js_3_line.html.erb):
<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_line") %>
</body>
</html>You can see this example in live here.
Actually there is some “cheating” involved. Indeed we simply load a first chart and then reload a new chart identical with one more line. Next step is to load once the whole graph and to dynamically modify the JSON Data to display one line or another.
H
Posted in Ruby on Rails | no comments | atom
Trackbacks
Use the following link to trackback from your own site:
http://harryseldon.thinkosphere.com/trackbacks?article_id=15
-
In a first example I showed [how to load a chart using javascript](http://harryseldon.thinkosphere.com/2008/09/27/rails-ofc-ajax1). Here I will show you how to dynamically alter an OFC chart without recreating it. This example is a raw adaptation ...
-
I have updated the [ofc test app](http://harryseldon.thinkosphere.com/2008/11/07/a-test-and-example-app-for-open-flash-chart-rails-plugin) with the examples given by [Giovanni](http://ingiroingiro.blogspot.com/). You have: * [A radar chart with it...
-
Consequently to questions about the stacked bar charts, I have added an example to the OFC test app. Once again this example is a translation of the original example from Teethgrinder. However, this time there are indeed a few catches. See the liv...
