PullMonkey Blog


30 Jul

Open Flash Chart II – Horizontal Bar Graph


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!


29 Jul

Open Flash Chart II – Pie Chart


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!


28 Jul

Open Flash Chart II – multi-bar graph with tooltips


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!


25 Jul

Using a database to populate an Open Flash Chart graph


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.


24 Jul

simpleCMS on github


Moved simpleCMS over to github.

There were quite a few changes that were required to get it working with rails 2.1, so they are in the repository now.
So to install, you pretty much follow the same instructions from before.

The only thing I have not completely resolved is the use of the simple_cms_item partial that sits in the plugin's app/views/shared directory. I tried forever to use append_view_path to share the partial over. That worked, as in it found the partial, but the application layout went away, so instead, you can just copy the partial to your RAILS_ROOT/app/views/shared directory for now.

Additionally, you can install it through github: script/plugin install git://github.com/pullmonkey/simple_cms.git
And of course, a lot of you have asked how to just plain download it, well you can do that here, find the download button and click 🙂

Let me know how it goes.


23 Jul

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


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 try it out, here is how:

  1. rails testing_ofc_2
  2. cd testing_ofc_2
  3. script/plugin install git://github.com/pullmonkey/open_flash_chart.git
  4. script/generate controller test_it
  5. Add the following to the test_it_controller.rb in RAILS_ROOT/app/controllers:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    
    class TestItController < ApplicationController
      def index
        @graph = open_flash_chart_object(600,300,"/test_it/graph_code")
      end
    
      def graph_code
        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)
        render :text => chart.to_s
      end
    end
    
    
  6. Add the following to index.html.erb in RAILS_ROOT/app/views/test_it/:
    1
    2
    3
    4
    5
    
    
    <script type="text/javascript" src="/javascripts/swfobject.js"></script>
    <%= @graph %>
    
      
  7. Copy swfobject.js from the plugin's assets/ directory (will make this happen at install time later) to your RAILS_ROOT/public/javascripts directory
  8. Copy open-flash-chart.swf from the plugin's assets/ director to your RAILS_ROOT/public/ directory
  9. script/server
  10. Browse to http://localhost:3000/test_it
  11. Let me know how it goes, thanks.