Catapulse

OFC est un projet Open source permettant la création de graphes en Flash. ( site officiel)

Le principe de fonctionnement est le suivant:

Lors de l'accès à une URL comportant un graphe, Open Flash chart est chargé dans le navigateur, celui-ci se connecte à un serveur pour en charger des données qui seront grapher. De nombreux types de graphes peuvent être générés. (line, bar, pie, ... ) en 2D ou 3D.

Il est cependant possible d'inclure les données directement dans du javascript mais il est bien plus simple que celle-ci proviennent d'un seconde URL, notre squelette de graphe devenant ainsi générique.

Cette librairie est disponible pour les langages suivant : Perl, PHP, Ruby, Python, Java et .NET

Voilà quelques exemples d'utilisation d'OFC :

Chaque fin d'année, les développeurs de Catalyst ( et de Perl et peut être ceux d'autres projets (???) ) écrivent des Advents, ce sont en gros des 'trucs et astuces'. (Voir les Advents de Catalyst de 2006)

La période des Advents débute le 1er décembre et se termine à la fin de l'année mais parfois ceux-ci sont écrit à l'avance et enregistré dans un dépot subversion. C'est ainsi que j'ai découvert l' Advent du 8 décembre 2007 qui traitait de ... Catalyst et OFC :)

Je n'ai rien inventé, ce document en est un simple résumé. Il nous guide dans la création d'une application affichant un graphe en Flash avec OFC.

Mise en route:

catalyst.pl AdventOFC
...
cd AdventOFC
script/adventofc_create.pl view TT TTSite

I nstallation de Chart::OFC :

Il s'agit d'une libraie Perl facilant l'emploi de OFC.

perl -MCPAN -e "install Chart::OFC"

Lorsque la libraie est installé il est nécessaire de récupérer le fichier .swf et de la copier dans le répertoire ' root' de l'application.

cd root/static
unzip /root/.cpan/build/Chart-OFC-0.02/ofc/open-flash-chart-1.9.5.zip open-flash-chart.swf

Ajouter le support Open Flash Chart à notre application :

Créer le fichier root/lib/ofc_swf_object comme ceci :

 [%
    DEFAULT
        width    = '500'
        height   = '300'
        id       = 'ofc_chart'
        bgcolor  = '#FFFFFF'
        name     = 'ofc_chart';

    SET swf_url = Catalyst.uri_for( 
        '/static/open-flash-chart.swf',
        {
            width  = width
            height = height
            data   = data
        }
    );

    # This is just to keep the html below from being
    # too wide for the sake of the demo, you could always
    # just put this inline if you wanted
    SET cab_download = [
        'http://fpdownload.macromedia.com'
        '/pub/shockwave/cabs/flash/swflash.cab'
        '#version=8,0,0,0'
    ];
  %]
  [% FILTER collapse %]
  <object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="[% cab_download.join( '' ) %]"

    width="[% width %]" height="[% height %]"
    id="[% id %]" align="middle">
      <param name="allowScriptAccess" value="sameDomain" />

      <param name="movie" value="[% swf_url %]" />
      <param name="quality" value="high" />

      <param name="bgcolor" value="[% bgcolor %]" />
      <embed
        src="[% swf_url %]" quality="high"
        bgcolor="[% bgcolor %]" width="[% width %]"

        height="[% height %]" name="[% name %]"
        align="middle" allowScriptAccess="sameDomain"
        type="application/x-shockwave-flash"

        pluginspage="http://www.macromedia.com/go/getflashplayer"
      />
  </object>
  [% END %]

Utilisons notre nouvel outil Open Flash Chart :

Dans le controleur Root ( lib/AdventOFC/Controller/Root.pm ) ajoutons le méthode index :

=head2 index

The index page for our charts.

=cut

sub index : Private {
    my ( $self, $c ) = @_;

    $c->stash->{ 'template' } = 'index.tt2';
}

Nous devons créer le template associé 'root/src/index.tt2' :

[% INCLUDE ofc_swf_object data = Catalyst.uri_for( '/graph' ) %]

Si nous lançons dès maintenant script/adventofc_server.pl nous avons un graphe sans aucune donnée.

Génération des données appropriées :

Maintenant nous allons généré une méthode dans notre controleur 'Root' qui devra nous founir les données appropriées.

Ajouter 'use Chart::OFC' au début du controleur Root ainsi que la méthode 'graph' comme ci desssous:

sub graph : Local {
    my ( $self, $c ) = @_;

    my %data = (
        Date    => [ map { "11/$_" } 1 .. 14 ],
        Ninja   => [ map { int( rand( 10 ) ) } 1 .. 14 ],
        Pirate  => [ map { int( rand( 10 ) ) } 1 .. 14 ],
    );

    my $ninjas = Chart::OFC::Dataset::LineWithDots->new(
        color       => 'black',
        label       => 'Ninjas',
        solid_dots  => 0,
        values      => $data{ 'Ninja' },
    );
    my $pirates = Chart::OFC::Dataset::LineWithDots->new(
        color       => 'red',
        label       => 'Pirates',
        solid_dots  => 1,
        values      => $data{ 'Pirate' },
    );

    my $x_axis = Chart::OFC::XAxis->new(
        axis_label  => 'Date',
        labels      => $data{ 'Date' },
    );

    my $y_axis = Chart::OFC::YAxis->new(
        axis_label  => 'Sightings',
        max         => 11,
        label_steps => 1,
    );

    my $grid = Chart::OFC::Grid->new(
        title       => 'Observer Reports',
        datasets    => [ $ninjas, $pirates ],
        x_axis      => $x_axis,
        y_axis      => $y_axis,
    );

    $c->response->body( $grid->as_ofc_data );
}

Et c'est tout :)

Maintenant lancer le serveur : script/adventofc_server.pl et se connecter à http://localhost:3000/