<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://static.delicious.com/img/delicious.small.gif" height="50" width="50" alt="Delicious" /></a>
<script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>
<script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script> 
<a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://harryseldon.thinkosphere.com">
    <img src="http://harryseldon.thinkosphere.com/files/technorati.jpeg" alt="Add to Technorati Favorites" height="50" width="50" /></a>
<a href="javascript:location.href='http://slashdot.org/slashdot-it.pl?op=basic&amp;url='+encodeURIComponent(location.href)">
    <img src="http://harryseldon.thinkosphere.com/files/slashdot.jpeg" alt="Slashdot" border="0" height="50" width="50"></a>

Notice that the one for technorati is special. I have not found exactly what I wanted. It favorites the blog itself not only the article. Therefore, this part of the code is not suitable for your blog ! You need to adapt it. For the other links they should work as such on your blog.

If your blog engine is Typo simply add the previous code to /themes/your_theme/views/articles/read.html.erb, typically after the line :

<%= render :partial => 'article', :object => @article %>

And you which social bookmarking websites do you use ?

require 'open_flash_chart'
ActionView::Base.send :include, OpenFlashChart::View
OpenFlashChart::Base.send :include, OpenFlashChart::View
ActionController::Base.send :include, OpenFlashChart::Controller
ActionController::Base.send :include, OpenFlashChart

So if you want to use OFC in your model (what you should want) simply add the following lines in init.rb:

ActiveRecord::Base.send :include, OpenFlashChart::View
ActiveRecord::Base.send :include, OpenFlashChart::Controller
ActiveRecord::Base.send :include, OpenFlashChart

Notice that this will work for your ActiveRecord model not the others.

Then why would you want to use OFC in your model ? Probably because you want to use a “fat model, skinny controller” policy. Doing so will allow you to easily reuse your code needed to prepare the graphs. If you have lots of graphs in your application that will be very efficient.

This code update is currently available on my github fork.
Update: It is now available on OFC home.

This makes me think that a small demonstration of use of OFC with models seems needed in the OFC test app. If someone feels like wanting to do it, do not hesitate ! I am specifically aiming at Anthony Navarre who left a nice code snippet as a comment on Charlie’s blog ;-)

• Add more font options to the title http://teethgrinder.co.uk/open-flash-chart-2/title.php.
• Moved a lot of the source code files around so they make more sense.
• Added dashed lines, dotted lines in line styles http://teethgrinder.co.uk/open-flash-chart-2/line-dash.php
• saveimage was changed to postimage http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php, this better reflects what the function does.
• Fixed the area chart so it fills correctly.
• Fixed a bug in area hollow so it now will accept point objects.
• utf8 tutorial http://teethgrinder.co.uk/open-flash-chart-2/utf8.php page.
• Better right click text customization (by Greg Barker)
• Hacky little fix for Y Axis labels going off screen when no title or key set (by Jerremy Koot)
• Y Axis Labels http://teethgrinder.co.uk/open-flash-chart-2/y-axis.php, now support vertical text (by Jerremy Koot)

Web Design
About the web design, I have recently learnt two important things that you, as a web developer, have known for long:

• Separate the content and the design.
• Do not use tables for your layout
  And actually the second one is implied by the first one. The main idea behind a good design is that you should be able to change your design without having to change your html code, that is you only need to change the CSS code.

Even when it is done properly I still hate CSS. Indeed, I hate the fact I cannot declare variables in CSS. I think it is a language for computers not humans, just like xml.
For example, you have this CSS :

.gray_box .content h3{
    font-weight:bold;   
}

Corresponding to this (x)html:

<div class="gray_box">
            <div class="content">
                      <h3>December 2008</h3>
            </div>
</div>

What I would like to write in order to define the style is something like:

style.gray_box.content.h3.font-weight = 'bold';

And for the color something like:

style.gray_box.content.h3.color = my_beloved_blue;

where ‘mybelovedblue’ is a variable.
I am pretty sure there exists some converters from serialization language such as xml, json, yaml to CSS. I just need to find them ! Do not hesitate to comment if you can help me !

Typo Theme
To export the design into a Typo theme I followed mainly 2 articles from 2 great Rails community contributors:

• one from Geoffrey Grosenbach
• one from Frederic De Villamil (in French)
  The most important thing is definitely to understand how the routes to the theme are defined. See for that Geoffrey’s article. Then when you have in your regular (not Typo) Rails application CSS file something like “url(../images/layout/headerbg.png)” you just need to replace it with url(../../images/theme/layout/headerbg.png). Notice the added ‘../’ and ‘theme’.

Any comment about this blog design, web design and typo theme appreciated !

So after the honeymoon with svn, I began to find some limitations. Mainly I was missing an easy way to have two repositories talking to each other. Let’s see why. Here is a concrete example of how a Distributed Version Control System (DVCS) can be useful. This blog is powered by Typo which is open source. I downloaded the source code and I put it into a repository of mine to be able to make some minor changes (for instance these ones). But doing this I lost the connection with the original repo. That means I cannot easily upload my changes to the “main” repo neither can I go forward in time by downloading the last changes on the main repo.
This is exactly the kind of situation which git was designed for. Indeed with git the various repos can easily communicate with each other. So I can merge the latest updates from the main repo to my own local repo.

Tutorial

Let us see the setup of such a configuration in details. I will not use the example of this blog because it is still theoretical as I have not migrated it to git yet. Instead, I will use the exact configuration I am using to contribute to Open Flash Chart plugin and its test app.
Notice the setup is well explained in the excellent GIT User’s Manual at this chapter from which I am taking the following graph:

                      you push
your personal repo ------------------> your public repo
      ^                                     |
      |                                     |
      | you pull                            | they pull
      |                                     |
      |                                     |
      |               they push             V
their public repo <------------------- their repo

Let us go over the steps. Imagine you want to download OFC test app, you want to make your own modifications while being able to regularly download the updates and you also want to upload your changes.
For the configuration resulting from the following tutorial, I can precise this:

• your personal repo = local repo = repo on your computer = repo in your working copy
• your public repo = repo on github, mine is here
• their repo = repo on PullMonkey’s computer
• their public repo = ‘official’ repo = repo on PullMonkey’s github

Let me precise also some GIT Vocabulary :

• To upload your changes from a repo to a repo is to push.
• To download your changes to a repo from a repo is to pull (to be precise pull fetches the changes and merge them to the current branch).
• To upload your changes from your working copy (or working tree) to your repo is to commit.
• To download changes from your repo to your working copy is to checkout (checkout command is also a simple command to switch between branches).
• Downloading a repo to create a repo : clone.

First, your fork the public repo to a public repo of yours: You go there you click on fork. (you will need a github account)
Then you download (clone) your repo to your local repo :

git clone git://github.com/pullmonkey/ofc_test_app.git

(It both creates the repo and checks it out)

Now you make some changes. You commit them:

git commit -a -m "my changes"

You want to upload your changes to your public repo:

git push

You want them to take into account your changes. You send them a pull request through email or github.
They agree to try it, they pull from your repo to their repo. They love it. They push it to their public repo.

They also made some more changes. You want to get them.
The first time you need to add the address of the public repo:

git remote add their_public_repo git@github.com:pullmonkey/ofc_test_app.git

Then, here is the GIT’s beauty, you pushed to a repo but you pull from another repo:

git pull their_public_repo

You can add as many repos as you want. You can see all these repos from a part of the global tree of the application development. Each repo is a tree branch. More than that each repo can contain several branches. Each branch can have a purpose: development, test, release etc. So have a happy gardening and happy time travels with git !

Any mistake, any problem or everything works ? Leave a comment !

Git resources:

• Home
• User’s Manual
• Nice resource list from rubyinside

Bonus

As I am a private pilot, all this push/pull stuff made me think about the push/pull aircraft :

Notice it has two propellers aligned with the fuselage one to pull and one to push.

A test app would be useful for 2 main reasons. The first one, as it says, is for testing purposes. The recent changes brought to OFC plugin were great but they were lacking some tests (functional tests and backward compatibility tests). So more tests are definitely necessary. The other reason which is almost more important is the need for working examples. The examples exist on Charlie’s blog and they are very helpful. As they exist why not gather them in an example app ? The examples will be yet more useful and clear.

So first, I worked directly on the app put by dfl in the test directory. But quickly I found it weird to have an application inside a plugin and using this plugin with the application inside etc. You get the kind of recursive situation (not as bad as it seems though!). So I proposed to Charlie to simply make a side test app. For now, the app is here in my repo on github but as it is more natural to put it close to the OFC plugin, Charlie will fork it and the “official” repo will be on his github repo probably here [EDIT: this is done].

[EDIT] If you also have your own OFC test app, and you want to contribute, have a look at this post explaining how to do it with GIT.

Taken from the README :
Both a testing and tutorial application for Rails Open Flash Chart Plugin.
Version 0.2.0
1) Install with:

git clone git://github.com/pullmonkey/ofc_test_app.git    

2) Run your server:

script/server -p 3000   

3) Go to http://localhost:3000/test_it/all_graphs
You will see all the graphs, like here.

All your comments on how to test a Rails plugin are welcome.

Looking for the recent comments plugin, I found 2 other nice plugins: recentposts_sidebar and typo_related_posts. The first one allows you to show your recent posts in the sidebar.

script/plugin install git://github.com/fdv/recentposts_sidebar.git

The second one is really neat. It displays a list of related posts at the end of your post (or wherever you want). This list is generated using the tags. The install process is a little more involved.
You still need to get the plugin:

script/plugin install git://github.com/fdv/typo_related_posts.git 

Then you need to add the call to the plugin in your template. Generally in template/views/articles/read.html.erb, you just add: <%= render_related_posts %>. You add this typically at the end of the post. But you may also want to add it after the comments. Moreover, you might want to change the langage. In vendor/plugins/typo_related_posts/lib/typo_related_posts.rb, make this change (personalize according to your wishes, you are welcome to propose here something better):

#    html += '<h3>À lire également</h3>'
    html += '<h3>Read also</h3>'
#    html += '<p>Si cet article vous a intéressé, vous pouvez poursuivre votre lecture avec ces billets similaires :</p>'   
    html += '<p>If this article has interested you, we suggest you read these related posts:</p>'

One more thing, I needed to make this change in the previous file because the permalink was not created. I do not know why though.

#    html += "<li><a href='#{this_blog.base_url}#{article.permalink}'>#{article.title}</a></li>"
    html += "<li><a href='#{article.permalink_url}'>#{article.title}</a></li>"

This blog uses the 3 mentioned plugins. So you can see them here at work.

In case you use recent_comments_sidebar and recentposts_sidebar there is a little catch. Both names begin by recent and at some point typo creates an id named recent. In the admin interface this prevents you from moving the recentposts plugin from the plugin list to the used plugin list. To solve this bug, in vendor/plugins/recentposts_sidebar/lib/recentposts_sidebar.rb, simply rename the class RecentPostsSidebar to LastPostsSidebar and change the call accordingly in init.rb.

While you are on github/fdv, have a look and browse for other plugins of your interests.

For info, the move of typo to github is very recent, see this post (in French) from Frederic De villamil.

Thanks Fred for Typo and all these neat plugins.

Here is the controller (test_it_controller.rb).

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

  def graph_code_radar
    # based on this example - http://teethgrinder.co.uk/open-flash-chart-2/radar-chart-lines.php
#    $chart = new open_flash_chart();
     chart = OpenFlashChart.new
#    $chart->set_title( new title( 'Radar Chart' ) );
     chart.set_title(Title.new('Radar Chart'))
#    $line_1 = new line_hollow();
     line_1 = LineHollow.new
#    $line_1->set_values(array(3, 4, 5, 4, 3, 3, 2.5));
     line_1.set_values(Array.new([3, 4, 5, 4, 3, 3, 2.5]))
#    $line_1->set_halo_size( 2 );
     line_1.set_halo_size( 2 )
#    $line_1->set_width( 1 );
     line_1.set_width( 1 )
#    $line_1->set_dot_size( 3 );
     line_1.set_dot_size( 3 )
#    $line_1->set_colour( '#FBB829' );
     line_1.set_colour( '#FBB829' )
#    $line_1->set_tooltip( "Gold<br>#val#" );
     line_1.set_tooltip( "Gold<br>#val#" )
#    $line_1->set_key( 'Mr Gold', 10 );
     line_1.set_key( 'Mr Gold', 10 )

#    $line_2 = new line_dot();
     line_2 = LineDot.new
#    $line_2->set_values(array(2, 2, 2, 2, 2, 2, 2));
     line_2.set_values(Array.new([2, 2, 2, 2, 2, 2, 2]));
#    $line_2->set_halo_size( 2 );
     line_2.set_halo_size( 2 )
#    $line_2->set_width( 1 );
     line_2.set_width( 1 )
#    $line_2->set_dot_size( 3 );
     line_2.set_dot_size( 3 )
#    $line_2->set_colour( '#8000FF' );
     line_2.set_colour( '#8000FF' )
#    $line_2->set_tooltip( "Purple<br>#val#" );
     line_2.set_tooltip( "Purple<br>#val#" )
#    $line_2->set_key( 'Mr Purple', 10 );
     line_2.set_key( 'Mr Purple', 10 )
#    $line_2->loop();
     line_2.loop() # to close the loop

#// add the area object to the chart:
#    $chart->add_element( $line_1 );
     chart.add_element( line_1 )
#    $chart->add_element( $line_2 );
     chart.add_element( line_2 )
#    
#    $r = new radar_axis( 5 );
     r = RadarAxis.new( 5 )

#    $r->set_colour( '#DAD5E0' );
     r.set_colour( '#DAD5E0' )
#    $r->set_grid_colour( '#DAD5E0' );
     r.set_grid_colour( '#DAD5E0' )
#    $labels = new radar_axis_labels( array('Zero','','','Middle','','High') );
     labels = RadarAxisLabels.new(Array.new(['Zero','','','Middle','','High']))
#    $labels->set_colour( '#9F819F' );
     labels.set_colour( '#9F819F' )
#    $r->set_labels( $labels );
     r.set_labels( labels );

#    $spoke_labels = new radar_spoke_labels(array(
#        'Strength',
#        'Smarts',
#        'Sweet<br>Tooth',
#        'Armour',
#        'Max Hit Points',
#        '???',
#        'Looks Like a Monkey') );
    spoke_labels = RadarSpokeLabels.new(Array.new([
        'Strength',
        'Smarts',
        'Sweet<br>Tooth',
        'Armour',
        'Max Hit Points',
        '???',
        'Looks Like a Monkey']))

#    $spoke_labels->set_colour( '#9F819F' );
     spoke_labels.set_colour( '#9F819F' )
#    $r->set_spoke_labels( $spoke_labels );
     r.set_spoke_labels( spoke_labels )
#    $chart->set_radar_axis( $r );
     chart.set_radar_axis( r )
#    $tooltip = new tooltip();
     tooltip = Tooltip.new()
#    $tooltip->set_proximity();
     tooltip.set_proximity()
#    $chart->set_tooltip( $tooltip );
     chart.set_tooltip( tooltip )
#    $chart->set_bg_colour( '#ffffff' );
     chart.set_bg_colour( '#ffffff' )
#    echo $chart->toPrettyString();
    render :text => chart.to_s
  end
end

The view code is as simple as usual (index_radar.hml.erb):

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

You can check out here the graph that has been made.

Thanks John and thanks Charlie.
H

For simplicity sake, I do not use the ajax way to draw the chart. Notice also that if you adhere to the skinny controller fat model policy, the graph_code function should be in your model. Before using the following code, you need to install the edge version of OFC2 plugin (script/plugin install git://github.com/pullmonkey/open_flash_chart.git –force). Do not forget to update public/open-flash-chart.swf and public/javascripts/swfobject.js.

Then, here is the controller (test_it_controller.rb). You still have the original php code (and I still hate the $ sign before every variable).

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

  def graph_code_scatterline
    # based on this example - http://teethgrinder.co.uk/open-flash-chart-2/scatter-line-chart.php
    #$chart = new open_flash_chart();
    chart =OpenFlashChart.new
    #$title = new title( date("D M d Y") );
    title = Title.new(Date.today.to_s)
    #$chart->set_title( $title );
    chart.set_title(title)
    #$s = new scatter_line( '#FFD600', 3 );
    scatter_line = ScatterLine.new( '#FFD600', 3 )
    #$v = array();
    v = Array.new
    #$x = 0.0;
    x = 0
    #$y = 0;
    y = 0
    #do
    while x < 25 
      #  $v[] = new scatter_value( $x, $y );
      v.push(ScatterValue.new(x,y))
      #    // move up or down in Y axis:
      #    $y += rand(-20, 20)/10;
      y += (-1+2*rand)*2
      #    if( $y > 10 )
      #        $y = 10;
      if y>10
        y=10
      end
      #    if( $y < -10 )
      #        $y = -10;
      if y<-10
        y=-10
      end
      #    $x += rand(5, 15)/10;
      x += (5+10*rand)/10
      #while( $x < 25 );
    end
    #$s->set_values( $v );
    scatter_line.set_values(v)
    #$chart->add_element( $s );
    chart.add_element(scatter_line)
    #$x = new x_axis();
    x_axis = XAxis.new
    #$x->set_range( 0, 25 );
    x_axis.set_range(0,25)
    #$chart->set_x_axis( $x );
    chart.x_axis = x_axis
    #$y = new x_axis();
    y_axis = YAxis.new
    #$y->set_range( -10, 10 );
    y_axis.set_range( -10, 10 )
    #$chart->add_y_axis( $y );
    chart.y_axis = y_axis
    #echo $chart->toPrettyString();
    render :text => chart.to_s
  end
end

The view code is as simple as usual (index_scatterline.hml.erb):

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

You can check out here the graph that is made. The graph is randomly generated so if you refresh it, it is normal that it changes. As a bonus you notice this graph looks like a stock market chart (hum is stock market random ? I will need another post to explain that. Until then use your common sense).

Thanks John and thanks Charlie.
H