Harry Seldon's blog : Category Ruby on Rails, everything about Ruby on Rails page 3

A Rails/OFC/Ajax raw example

Posted by Harry Seldon on September 27, 2008

Here is a simple exercise to use Rails, OFC, OFC rails plugin and ajax together. The idea is just to follow the example given here in php. At first I did not manage to get this working. That is why I asked some help to Pullmonkey. He did a great job to make this working in this nice post . Moreover, he came up with nice improvements on OFC to render a chart using ajax and using Rails helper to keep a pretty code (you need to update OFC plugin to make his example work). However I want to show you here the translation in Rails of Teethgrinder’s tutorial with minimum code (no need to update OFC plugin).

Controller code (test_it_controller.rb), notice it has the original php code from teethgrinder in it.

class TestItController < ApplicationController
def tuto_5
    title = Title.new("tuto_5")
    #$title = new title( date("D M d Y") );
    #$chart = new open_flash_chart();
    @chart = OpenFlashChart.new
    #$bar = new bar();
    bar = BarGlass.new
    #$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
    bar.set_values([1,2,3,4,5,6,7,8,9])
    #$chart->set_title( $title );
    @chart.set_title(title)
    #$chart->add_element( $bar );
    @chart.add_element(bar)
end
end

Then I had directly coded the view code (tuto5.html.erb) without helpers (and quite ugly) :

<head>
<script type="text/javascript" src="/javascripts/json2.js"></script>
<script type="text/javascript" src="/javascripts/swfobject.js"></script>
</head>

<body>
<script type="text/javascript">
swfobject.embedSWF("/open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>
<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

var data = <%= @chart.to_s %>;
</script>

<p>Hello World</p>
<div id="my_chart"></div>
</body>

In this example you need the json2.js library that you can find here. However notice that Pullmonkey uses directly the json capabilities of Rails which is a much better way.
This code works, you can check it out here.

Thanks to Pullmonkey ! H

Posted in Ruby on Rails | no comments | Tags ajax, ofc, on, rails, ruby | atom

A Rails/OFC/Ajax example

Posted by Harry Seldon on September 27, 2008

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
end

And 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.

Posted in Ruby on Rails | no comments | Tags ajax, charts, ofc, on, rails, ruby | atom

Some News and Tech Links about Ruby and Rails

Posted by Harry Seldon on August 22, 2008

Some News and Tech Links about Ruby and Rails

You are looking for info about Rails ? Here are some useful links.

News
Railsinside
Rubyinside
Railsenvy
Nuby on rails
locomotivation
peepcode
Stone age blog (in French)
I assume you already know the official website.

API
http://api.rubyonrails.org/
http://www.ruby-doc.org/core-1.8.6/index.html
http://start.gotapi.com/
http://www.railsbrain.com
NB Some people find api.rubyonrails.org hard to use. I just use the google toolbar to make a “search on this website” and I get the info I was looking for in 0.1 sec. Equivalently you can search on google using site:api.rubyonrails.org.

Book
http://pragprog.com/titles/rails3/agile-web-development-with-rails-third-edition

Forum
http://www.ruby-forum.com

Posted in Ruby on Rails | no comments | Tags on, rails, ruby | atom