pullmonkey.com - Home

Open Flash Chart II - Updates, Radar Charts and Scatter Lines

2008-10-25T05:53:00Z

Recently, some good work has gone into the Open Flash Chart plugin. First, it is now up to date with the official php version of OFC. That means we have Radar Charts and Scatter Line capabilities now.

Also, some nice people have helped this plugin along to maturity. I would like to thank David and Harry for their work.

David made some very much needed improvements and brought Open Flash Chart II plugin up to speed with Rails 2.x. So take note, this is the "modern" way to work with the charts:

class TestItController < ApplicationController
  ## EDIT dont need this line with the latest plugin.
  #include OpenFlashChart
  
  def index
    respond_to do |wants|
      wants.html {
        @graph = open_flash_chart_object( 600, 300, url_for( :action => 'index', :format => :json ) )
      }
      wants.json { 
        # Edit:: don't do the OpenFlashChart::Base stuff anymore
        #chart = OpenFlashChart::Base.new( :title => Title.new("MY TITLE") ) do |c|
        chart = OpenFlashChart.new( :title => Title.new("MY TITLE") ) do |c|
          c << BarGlass.new( :values => (1..10).sort_by{rand} )
        end
        render :text => chart, :layout => false
      }
    end
  end
end

Open Flash Chart was put in to the appropriate OpenFlashChart namespace/module, to ensure we don't run into any conflicts. It also now takes blocks which will be helpful. The example above is courtesy of David.

Harry, has done a great job of providing examples for the latest features of Open Flash Chart.
Check out his Radar Chart Example.
Also, check out his Scatter Line Chart Example.

Thank you for the great work guys.

Open Flash Chart II - Javascript (Part 3)

2008-09-23T14:13:00Z

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):


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):


<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!

Open Flash Chart II - Javascript (Part 2)

2008-09-22T15:17:00Z

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:

Basics of OFC and Javascript. - Last article (part 1)
Change data on the fly with links. - This article, see links under the graph.
Update and Save data.
Ajax calls to server - Discussed in Part 3.
Manipulate the data through an interface.
Some really cool interfaces.

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):


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):


<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!

Open Flash Chart II - Javascript (Part 1)

2008-09-21T19:15:00Z

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):


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):


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

Open Flash Chart II - Point by Point plotting

2008-08-18T17:21:00Z

Got another comment, this time asking about all kinds of things:

Plotting Points
X Axis and Y Axis min and max ranges
Coloring the X and Y Axis
Coloring the X and Y gridlines

Here is the graph we are after in this example:


class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
  end

  def graph_code
    chart = OpenFlashChart.new

    title = Title.new("Scatter points")
    chart.set_title(title)

    scatter = Scatter.new('#FFD800', 10)  # color, dot size

    scatter.values = [
      ScatterValue.new(50,30),
      ScatterValue.new(305,400),
      ScatterValue.new(61,500,15),  # x, y, dot size
      ScatterValue.new(600,550),
      ScatterValue.new(459,300),
      ScatterValue.new(180,789)
    ]

    chart.add_element(scatter)

    x = XAxis.new
    x.set_range(0, 650, 100)  #min, max, steps
    # alternatively, you can use x.set_range(0,65000) and x.set_step(10000)
    x.colour = '#00FF00'
    # have to set the x axis labels because of scatter bug here - http://sourceforge.net/forum/message.php?msg_id=4812326
    x.set_grid_colour('#00F0FF')
    chart.set_x_axis(x)

    y = YAxis.new
    y.set_range(0,800,200)
    y.colour = '#FF0000'
    y.set_grid_colour('#FF00FF')
    chart.set_y_axis(y)

    render :text => chart.to_s
  end
end

And in your view (index.html.erb):

1234	<script type="text/javascript" src="/javascripts/swfobject.js"></script><%= @graph %>

Note - The X Axis is not rendering properly, this is being discussed in the OFC Forums.
Good Luck!

Modularized Models and Associations in ActiveRecord

2008-08-13T19:15:00Z

Have you ever encountered this error?

wrong constant name X::YAssociationExtension

I found this error when dealing with acts_as_versioned for one my models. I would have found it eventually with any association I would have setup in this case, so it is not acts_as_versioned's fault.
I have an application with various parts so I create some of my models like this:

12	./script/generate model module_name::model_name

So the fix is pretty simple, instead of winding up with ModuleName::ModelAssociationExtension or whatever, you want your extention module name to be ModelAssociationExtension.
Here is the method where the code breaks for me:

def create_extension_modules(association_id, block_extension, extensions)
  if block_extension
    extension_module_name = "#{self.to_s}#{association_id.to_s.camelize}AssociationExtension"

    silence_warnings do
      Object.const_set(extension_module_name, Module.new(&block_extension))
    end
    Array(extensions).push(extension_module_name.constantize)
  else
    Array(extensions)
  end
end

Here is the fix, on line 3, you will note the demodulize addition:

def create_extension_modules(association_id, block_extension, extensions)
  if block_extension
    extension_module_name = "#{self.to_s.demodulize}#{association_id.to_s.camelize}AssociationExtension"

    silence_warnings do
      Object.const_set(extension_module_name, Module.new(&block_extension))
    end
    Array(extensions).push(extension_module_name.constantize)
  else
    Array(extensions)
  end
end

I threw the corrected code into a library - RAILS_ROOT/lib/fix_active_record_create_extension_for_modules.rb. Make sure to open up the necessary modules to overwrite the method itself, I.e., like this:

module ActiveRecord
  module Associations
    module ClassMethods
      # the code above fits right here
    end
  end
end

Short and sweet, let me know if you have a better method for handling this.

Open Flash Chart II - X Axis Label rotations

2008-08-05T20:02:00Z

Got another comment asking about diagonal x axis labels. This example is based on teethgrinder's line graph example and the new portions are based on teethgrinder's x-axis rotation example.
Here is the graph we are after in this example:


class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
  end

  def graph_code
    # based on this example - http://teethgrinder.co.uk/open-flash-chart-2/data-lines-2.php
    # and parts from this example - http://teethgrinder.co.uk/open-flash-chart-2/x-axis-labels-3.php
    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.width = 4
    line_dot.colour = '#DFC329'
    line_dot.dot_size = 5
    line_dot.values = data1

    line_hollow = LineHollow.new
    line_hollow.width = 1
    line_hollow.colour = '#6363AC'
    line_hollow.dot_size = 5
    line_hollow.values = data2

    line = Line.new
    line.width = 1
    line.colour = '#5E4725'
    line.dot_size = 5
    line.values = data3

    # Added these lines since the previous tutorial
    tmp = []
    x_labels = XAxisLabels.new
    x_labels.set_vertical()

    %w(one two three four five six seven eight nine ten).each do |text|
      tmp << XAxisLabel.new(text, '#0000ff', 20, 'diagonal')
    end

    x_labels.labels = tmp

    x = XAxis.new
    x.set_labels(x_labels)
    # new up to here ...

    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.x_axis = x # Added this line since the previous tutorial
    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):

1234	<script type="text/javascript" src="/javascripts/swfobject.js"></script><%= @graph %>

Good Luck!

Dynamic Select Boxes (many to many) - Ruby on Rails

2008-08-05T04:59:00Z

I just got comment asking how one would go about doing a many to many relation in this dynamic select box example. For example, what if an artist belongs to multiple genres. Here we go:
The original tutorial.
Create your models and build your migrations:


ruby script/generate model genre name:string
ruby script/generate model artist name:string   # no genre_id here, moved to association table
ruby script/generate model song title:string artist_id:integer
ruby script/generate model artist_association artist_id:integer genre_id:integer

Populate your genres, artists and songs through a migration:

12	ruby script/generate migration create_hierarchy

Contents of migration:


class CreateHierarchy < ActiveRecord::Migration
  def self.up
    # same genres as before
    g1 = Genre.create(:name => "Genre 1")
    g2 = Genre.create(:name => "Genre 2")
    g3 = Genre.create(:name => "Genre 3")

    # same artists as before, but without a genre_id
    a1 = Artist.create(:name => "Artist 1")
    a2 = Artist.create(:name => "Artist 2")
    a3 = Artist.create(:name => "Artist 3")
    a4 = Artist.create(:name => "Artist 4")
    a5 = Artist.create(:name => "Artist 5")
    a6 = Artist.create(:name => "Artist 6")

    # now set which artists belong to which genres
    # Artist 1 belongs to all three genres
    ArtistAssociation.create(:genre_id => g1.id, :artist_id => a1.id)
    ArtistAssociation.create(:genre_id => g2.id, :artist_id => a1.id)
    ArtistAssociation.create(:genre_id => g3.id, :artist_id => a1.id)
   # the rest of the artists only belong to one association
    ArtistAssociation.create(:genre_id => g1.id, :artist_id => a2.id)
    ArtistAssociation.create(:genre_id => g2.id, :artist_id => a3.id)
    ArtistAssociation.create(:genre_id => g2.id, :artist_id => a4.id)
    ArtistAssociation.create(:genre_id => g3.id, :artist_id => a5.id)
    ArtistAssociation.create(:genre_id => g3.id, :artist_id => a6.id)

    Song.create(:title => "Song 1",  :artist_id => a1.id)
    Song.create(:title => "Song 2",  :artist_id => a1.id)
    Song.create(:title => "Song 3",  :artist_id => a2.id)
    Song.create(:title => "Song 4",  :artist_id => a2.id)
    Song.create(:title => "Song 5",  :artist_id => a3.id)
    Song.create(:title => "Song 6",  :artist_id => a3.id)
    Song.create(:title => "Song 7",  :artist_id => a4.id)
    Song.create(:title => "Song 8",  :artist_id => a4.id)
    Song.create(:title => "Song 9",  :artist_id => a5.id)
    Song.create(:title => "Song 10", :artist_id => a5.id)
    Song.create(:title => "Song 11", :artist_id => a6.id)
    Song.create(:title => "Song 12", :artist_id => a6.id)
  end

  def self.down
# you can fill this in if you want.
  end
end

So now we need to populate the database:

12	rake db:migrate

Now we need to modify our models to set up the associations.


class Genre < ActiveRecord::Base
  has_many :artist_associations
  has_many :artists, :through => :artist_associations
  # CAN"T NEST HMTs .....  has_many :songs, :through => :artists
  # do it by hand ... argh
  def songs
    artists.map{|a| a.songs}.flatten
  end
end

class Artist < ActiveRecord::Base
  has_many :artist_associations
  has_many :genres, :through => :artist_associations
  has_many :songs
end

class ArtistAssociation < ActiveRecord::Base
  belongs_to :artist
  belongs_to :genre
end

That should be it for the many to many relationship.

Everything else is the same as in the last tutorial.
# the controller


class TestItController < ApplicationController
  def index
    @genres  = Genre.find(:all)
    @artists = Artist.find(:all)
    @songs   = Song.find(:all)
  end

  def update_artists
    # updates artists and songs based on genre selected
    genre = Genre.find(params[:genre_id])
    artists = genre.artists
    songs   = genre.songs

    render :update do |page|
      page.replace_html 'artists', :partial => 'artists', :object => artists
      page.replace_html 'songs',   :partial => 'songs',   :object => songs
    end
  end

  def update_songs
    # updates songs based on artist selected
    artist = Artist.find(params[:artist_id])
    songs  = artist.songs

    render :update do |page|
      page.replace_html 'songs', :partial => 'songs', :object => songs
    end
  end
end

Now as far as views go we have one view (index.html.erb) and two partials (_songs and _artists). Let's take a look at those:
# the _songs partial (_songs.html.erb):

123	<%= collection_select(nil, :song_id, songs, :id, :title, {:prompt => "Select a Song"}) %>

# the _artists partial (_artists.html.erb):


<%= collection_select(nil, :artist_id, artists, :id, :name,
                     {:prompt   => "Select an Artist"},
                     {:onchange => "#{remote_function(:url  => {:action => "update_songs"},
                                                      :with => "'artist_id='+value")}"}) %>
<br/>

# and last, but not least, the index view (index.html.erb):


<%= javascript_include_tag :defaults %>
<%= collection_select(nil, :genre_id,  @genres,  :id, :name,
                      {:prompt   => "Select a Genre"},
                      {:onchange => "#{remote_function(:url  => {:action => "update_artists"},
                                                       :with => "'genre_id='+value")}"}) %>
<br/>
<div id="artists"><%= render :partial => 'artists', :object => @artists %></div>
<div id="songs"><%= render :partial => 'songs',   :object => @songs %></div>

Open Flash Chart II - Multiple graphs on the same page

2008-08-04T16:56:00Z

Got a comment asking about multiple graphs on the same page and if you need another controller or how that would all work. You only need one controller if you are going to have different graphs in the same view.
No graph for this example, just the code.
Open Flash Chart II examples.

Here is the code (the controller):


class TestItController < ApplicationController
  def index
    @graph1 = open_flash_chart_object(600,300,"/test_it/graph_one")
    @graph2 = open_flash_chart_object(600,300,"/test_it/graph_two")
    @graph3 = open_flash_chart_object(600,300,"/test_it/graph_three")
    # and so on ...
  end

  def graph_one
    ...  # put some OFC2 code here like in my examples
  end

  def graph_two
    ...  # put some OFC2 code here
  end

  def graph_three
    ...  # put some OFC2 code here
  end
end

And in your view (index.html.erb):


<script type="text/javascript" src="/javascripts/swfobject.js"></script>
<%= @graph1 %><br/>
<%= @graph2 %><br/>
<%= @graph3 %><br/>

Good Luck!

Open Flash Chart II - Line Graph

2008-08-01T16:42:00Z

Got another comment asking about creating a line graph. This example is based on teethgrinder's line graph example.
Here is the graph we are after in this example:


class TestItController < ApplicationController
  def index
    @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
  end

  def graph_code
    # based on this example - http://teethgrinder.co.uk/open-flash-chart-2/data-lines-2.php
    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):

1234	<script type="text/javascript" src="/javascripts/swfobject.js"></script><%= @graph %>

Good Luck!