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


Posted by charlie Filed in Javascript, Open Flash Chart Graphs, projects, rails, ruby, tutorials
16 comments »

Open Flash Chart II - Javascript (Part 2)

September 22nd, 2008 by charlie

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!


Posted by charlie Filed in development, Javascript, Open Flash Chart Graphs, projects, rails, ruby, tutorials
1 comments »

Open Flash Chart II - Javascript (Part 1)

September 21st, 2008 by charlie

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.
  1. 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 "/".
  2. 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.
  3. 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.


Posted by charlie Filed in development, Javascript, Open Flash Chart Graphs, projects, rails, tutorials
3 comments »

Open Flash Chart II - Point by Point plotting

August 18th, 2008 by charlie

Got another comment, this time asking about all kinds of things:
  1. Plotting Points
  2. X Axis and Y Axis min and max ranges
  3. Coloring the X and Y Axis
  4. Coloring the X and Y gridlines
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
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


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):
1
2
3
4


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


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
16 comments »

Open Flash Chart II - X Axis Label rotations

August 5th, 2008 by charlie

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:


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
68
69
70
71
72
73
74
75
76
77
78


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):
1
2
3
4


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
6 comments »

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

August 4th, 2008 by charlie

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: 
1
2
3
4
5


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: 
1
2


ruby script/generate migration create_hierarchy
Contents of migration: 
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


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: 
1
2


rake db:migrate
Now we need to modify our models to set up the associations. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


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


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): 
1
2
3


<%= collection_select(nil, :song_id, songs, :id, :title,
                     {:prompt   => "Select a Song"}) %>
# the _artists partial (_artists.html.erb): 
1
2
3
4
5
6


<%= 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): 
1
2
3
4
5
6
7
8
9


<%= 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>


Posted by charlie Filed in development, rails, ruby, tutorials
0 comments »

Open Flash Chart II - Multiple graphs on the same page

August 4th, 2008 by charlie

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):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


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):
1
2
3
4
5
6


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
16 comments »

Open Flash Chart II - Line Graph

August 1st, 2008 by charlie

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:


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


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):
1
2
3
4


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
12 comments »

Open Flash Chart II - Horizontal Bar Graph

July 30th, 2008 by charlie

Just got another comment asking about making a horizontal bar chart. This example is based on teethgrinder's horizontal bar example. So you will need to get the latest plugin since this required that I add a few things as of this article.
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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


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/horizontal-bar-chart.php
    title = Title.new("HBar Graph")

    hbar = HBar.new
    # could also do it one at a time with hbar.append_value(...) or
    # hbar.values << ...
    hbar.values = [HBarValue.new(0,4), HBarValue.new(4,8), HBarValue.new(8,11)]

    chart = OpenFlashChart.new
    chart.set_title(title)
    chart.add_element(hbar)

    x = XAxis.new
    x.set_offset(false)
    x.set_labels(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'])
    chart.set_x_axis(x)

    y = YAxis.new
    y.set_offset(true)
    y.set_labels(["Make garden look sexy","Paint house","Move into house"])
    chart.set_y_axis(y)

    render :text => chart.to_s
  end
end

And in your view (index.html.erb):
1
2
3
4


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
5 comments »

Open Flash Chart II - Pie Chart

July 29th, 2008 by charlie

Just got a comment asking for a pie chart example, so here is an example. This example is based on teethgrinder's pie chart example for php.
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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


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/pie-chart.php
    title = Title.new("Pie Chart Example For Chipster")

    pie = Pie.new
    pie.start_angle = 35
    pie.animate = true
    pie.tooltip = '#val# of #total#<br>#percent# of 100%'
    pie.colours = ["#d01f3c", "#356aa0", "#C79810"]
    pie.values  = [2,3, PieValue.new(6.5,"Hello (6.5)")]

    chart = OpenFlashChart.new
    chart.title = title
    chart.add_element(pie)

    chart.x_axis = nil

    render :text => chart.to_s
  end
end

And in your view (index.html.erb):
1
2
3
4


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
24 comments »

Open Flash Chart II - multi-bar graph with tooltips

July 28th, 2008 by charlie

Just got a comment that says tooltips are not working properly, so I decided to do an example for you guys (and gals). This example is based on teethgrinder's tooltip example.
Here is the graph we are after in this example:


More Open Flash Chart II examples.

And here is the code (the controller):
NOTE: You will need the latest plugin and open-flash-chart.swf (as of this article) for the tooltips to register properly. 
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


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/tooltip.php
    title = Title.new("MultiBar Tooltip")

    bar = Bar.new
    bar.values  = [9,8,7,6,5,4,3,2,1]
    bar.tooltip = "Title Bar l<br>val = #val#"
    bar.colour  = '#47092E'

    # NOTE: you can use obj.variable=() or obj.set_variable() interchangeably

    bar2 = Bar.new
    bar2.set_tooltip("Spoon {#val#}<br>Title Bar 2")
    bar2.set_colour('#CC2A43')

    vals = [1,2,3,4]

    tmp = BarValue.new(5)
    tmp.set_colour('#000000')
    tmp.set_tooltip("Spoon {#val#}<br>Title Bar 2<br>Override bar 2 tooltip<br>Special data point")
    vals << tmp
    vals << [6,7,8,9]
    vals = vals.flatten

    bar2.values = vals

    t = Tooltip.new
    t.set_shadow(false)
    t.stroke = 5
    t.colour = '#6E604F'
    t.set_background_colour("#BDB396")
    t.set_title_style("{font-size: 14px; color: #CC2A43;}")
    t.set_body_style("{font-size: 10px; font-weight: bold; color: #000000;}")

    chart = OpenFlashChart.new
    chart.title = title
    chart.add_element(bar)
    chart.add_element(bar2)
    chart.set_tooltip(t)

    render :text => chart.to_s
  end
end

And in your view (index.html.erb):
1
2
3
4


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


Good Luck!


Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
16 comments »

Using a database to populate an Open Flash Chart graph

July 25th, 2008 by charlie

Just got Archie Smuts comment asking how to populate a Open Flash Chart graph using results from a database.

Just for reference, the code that follows represents this graph:


Examples for version 2 are here.

Using the new version of Open Flash Chart, here is an example for you to follow:
  • Start a rails app and install the plugin per these instructions.
  • The results table that I am working with has these rows:
    1
2
3
4
5
6

    
Result.create(:student_name => "Jack", :subject => "History", :test_score => 97
Result.create(:student_name => "Jack", :subject => "Science", :test_score => 85)
Result.create(:student_name => "Jill", :subject => "History", :test_score => 92)
Result.create(:student_name => "Jill", :subject => "Science", :test_score => 57)
  • Create a controller, mine is test_it:
    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

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

  def graph_code
    # we will have bars for each student subject combo
    bars   = []

    # random colors to chose from
    colours = ["#459a89", "#9a89f9"]

    # the results
    results = Result.find(:all)

    # group by subject and use subject as the key
    results.group_by(&:subject).each do |subject, result|
      # 3d bar graph, could be any bar graph though
      bar = Bar3d.new
      bar.set_key(subject, 3)
      bar.colour = colours[bars.size]
      bar.values = result.map(&:test_score)
      bars << bar
    end

    # some title
    title = Title.new("Test Results")

    # labels along the x axis, just hard code for now, but you would want to dynamically do this
    x_axis = XAxis.new
    x_axis.labels = ["Jack", "Jill"]

    # go to 100% since we are dealing with test results
    y_axis = YAxis.new
    y_axis.set_range(0, 100, 10)

    # setup the graph
    graph = OpenFlashChart.new
    graph.bg_colour = '#ffffcc'
    graph.title = title
    graph.x_axis = x_axis
    graph.y_axis = y_axis
    graph.elements = bars

    render :text => graph.to_s
  end
end
  • Create a view, mine is index.html.erb for the test_it controller:
    1
2
3
4

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

    • Hope that helps.
Posted by charlie Filed in development, Open Flash Chart Graphs, projects, rails, ruby, tutorials
7 comments »

Open Flash Chart II Plugin for Ruby on Rails (OFC2)

July 23rd, 2008 by charlie

Ok, already, I heard ya :) The open flash chart (version 2 - OFC2) plugin is done (really just started) and it is out on github.

Examples for version 2 are here.

I rewrote the open flash chart plugin (started from scratch) to work with json like teethgrinder does here.
This time I think it is much slicker and a lot easier to work with.
I haven't tried much more than bar graphs, all the functionality is there for other types of graphs, just not tested.
Graph that this example produces:


So it is out there, and if you are willing to