Open Flash Chart : Créer des graphiques flash

From Deimos.fr / Bloc Notes Informatique
Jump to: navigation, search
Flattr-badge-large.png

1 Introduction

Open Flash Chart est un outil Open Source développé dans plusieurs langages et facilement portable.

Je m'en suis servit pour mesurer l'utilisation disques par utilisateurs dans un dossier bien précis. Voici un petit extrait de ce que ça donne sous forme de camenbert :

Piechart.png

(Que celui qui sort que c'est pas animé sorte ! Evidemment, c'est une capture d'écran !)

Mais il existe pleins d'autres types de graphs que nous pouvons faire, ils sont tous montrés sur le site web.

2 Installation

Vous devez avoir simplement un serveur web d'installé (apache2 ou lighttpd feront l'affaire).

Téléchargez donc la dernière version (une version 2 est en cours de préparation au moment ou j'écris ces lignes, mais elle est actuellement en alpha) et décompressez là sur votre site web :

Command
mkdir openchart
cd openchart
wget "http://downloads.sourceforge.net/project/openflashchart/open-flash-chart/1.9.7/open-flash-chart-1.9.7.zip?use_mirror=sunet"
unzip open-flash-chart-1.9.7.zip

3 Configuration

Malheureusement, les exemples sur le site ne sont pas actualisés et les chemins ne sont pas toujours bon. Vous risquez donc de rencontrer comme moi des problèmes de path mal foutu dans les libs php. Vous le verrez bien avec les messages d'erreurs php assez explicites sur les includes.

3.1 Open Flash Chart

Nous allons donc prendre que le nécessaire pour la partie PHP que j'ai choisie :

  • php-ofc-library
  • js
  • open-flash-chart.swf

Mettez donc tout ceci dans un dossier (j'ai choisis .stat, ce qui me donne /var/www/.stats) :

Command
mkdir -p /var/www/.stats
cp -Rf /var/www/openchart/{php-ofc-library,js,open-flash-chart.swf} /var/www/.stats

3.2 gen-piechart-db

Il faut créer un fichier de données pour réaliser les graphs avec les couleurs et les noms. C'est pourquoi j'ai écrit un petit script permettant de générer un fichier de données pour mon camenbert. Alors, il est pas écrit super proprement je vous l'accorde, si j'ai un peu de temps je repasserais dessus pour le rendre un peu plus propre et explicite, mais vu qu'il est petit, je pense qu'il sera compréhensible par la plus part d'entre vous :

Configuration File gen-piechart-db.pl
#!/usr/bin/perl -w
 
use strict;
 
# Set folder containing all users folder
my $source='/home/users/';
my $destination_db='/var/www/.stats/piechart.php';
# Set all users
my @users_list = (  'Pierre',
                    'Paul',
                    'Jaques',
                    'Qu\'est-ce que tu fais là ?');
 
# Set color per user
my @colors = (  '#2d9409',
                '#4e5fff',
                '#de1000',
                '#000000');
# Set max users folder size
my $total_size=412849328;
 
my @values;
 
# Get size per user folder
sub get_users_values
{
	my $good_size;
    my $users_ref = shift;
    my @users = @$users_ref;
    my @size_per_users;
 
	# Calcul userspace size for each users
	foreach (@users)
	{
		if (-d "$source/$_")
		{
			open (GET_SIZE, "du -sk $source/$_ |");
			while (<GET_SIZE>)
			{
                chomp $_;
				if (/(\d*)\s*(\w*)/)
        		{
                    if (($1 / 1024) >= 1000)
                    {
                        $good_size = sprintf ("%.1fGo", ($1 / 1048576));
                        push @size_per_users, $good_size;
                    }
                    else
                    {
                        $good_size = sprintf ("%.0fMo", ($1 / 1024));
                        push @size_per_users, $good_size;
                    }
       				$good_size = sprintf ("%.0f", ($1 / $total_size) * 100);
                   	push @values, $good_size;
        		}
			}
			close (GET_SIZE);
		}
		else
		{
			push @values, 0;
		}
	}
    return \@size_per_users;
}
 
sub write_db_file
{
    my $users_ref = shift;
    my $ref_size_per_users = shift;
    my @users = @$users_ref;
    my @size_per_users = @$ref_size_per_users;
 
	open (GENFILE_DB, ">$destination_db");
    print GENFILE_DB <<_HTML_;
&title=Utilisation+par+personne,{font-size:18px; color: #d01f3c ; margin-bottom: 30px}&
&bg_colour=#ffffff&
&x_axis_steps=1&
&y_ticks=5,10,5&
&line=3,#87421F&
&y_min=0&
&y_max=20&
&pie=60,#505050,{font-size: 12px; color: #404040;}&
&links=&
&tool_tip=%23val%23%25&%#
_HTML_
 
	# Write values    
    my @vals;
    foreach (@values)
    {
        push @vals, $_;
    }
    my $all_values=join ",", @vals;
    print GENFILE_DB '&values=' . $all_values . "&\n";
 
	# Write users
    my @users_values;
    my $i=0;
    foreach (@users)
    {
        push @users_values, "\u$_ $size_per_users[$i]";
        $i++;
    }
    my $all_users=join ",", @users_values;
    print GENFILE_DB '&pie_labels=' . $all_users . "&\n";
 
    # Write color per user
    my $all_colors=join ",", @colors;
    print GENFILE_DB '&colours=' . $all_colors . "&\n";
 
    close(GENFILE_DB);
}
 
my $ref_size_per_users = &get_users_values(\@users_list);
my @size_per_users = @$ref_size_per_users;
&write_db_file(\@users_list,\@size_per_users);

N'oubliez pas d'adapter les premières lignes selon vos besoins

Rendez le exécutable et mettez le en crontab pour qu'il puisse mettre à jour automatiquement tout ce beau monde :

Command crontab -e
*/5 * * * * /mon/script/gen-piechart-db.pl

Ce qui va me donner un fichier de ce type :

Configuration File piechart.php
&title=Utilisation+par+personne,{font-size:18px; color: #d01f3c ; margin-bottom: 25px}&
&bg_colour=#ffffff&
&x_axis_steps=1&
&y_ticks=5,10,5&
&line=3,#87421F&
&y_min=0&
&y_max=20&
&pie=60,#505050,{font-size: 12px; color: #404040;}&
&links=&
&tool_tip=%23val%23%25&%#
&values=47,0,9,3&
&pie_labels=Pierre 184.6Go,Paul 882Mo,Jaques 33.8Go,Qu'est-ce que tu fais là ? 10.4Go&
&colours=#2d9409,#4e5fff,#de1000,#000000&

Les 3 dernières lignes, sont celles qui vont comportées les données des utilisateurs et donc les plus importantes.

Note : Je vous conseil fortement d'utiliser un filesystem de type tmpfs pour stocker votre fichier piechart.php

3.3 php-ofc-library/open_flash_chart_object.php

La configuration de ce fichier est optionnelle, mais je trouve que par défaut, ce n'est pas très bien codé sur cette partie objet. Par exemple, si ça ne tourne pas sur le port 80, ça ne va pas fonctionner.
De plus, je vais avoir besoin d'afficher ce camenbert depuis pas mal de pages, donc je suis obliger de coder le lien en dur.

C'est pourquoi, je vous propose mes modifications :

Configuration File php-ofc-library/open_flash_chart_object.php
...
// ligne 96
$out[] = '<param name="movie" value="'. $base . 'http://'. $_SERVER['HTTP_HOST'] .'/.stats/'. 'open-flash-chart.swf?width='. $width .'&height='. $height . '&data='. $url .'" />';
// ligne 99
$out[] = '<embed src="'. $base . 'http://'. $_SERVER['HTTP_HOST'] .'/.stats/' . 'open-flash-chart.swf?data=' . $url .'" quality="high" bgcolor="#FFFFFF" width="'. $width .'" height="'. $height .'" name="'. $obj_id .'" align="middle" allowScriptAccess="sameDomain" ';
...

Modifiez la partie '/.stats/' si elle ne vous convient pas, mais vu que j'utilise http://monserveur/.stats, ça colle pour moi.

3.4 index.php

Je vous donne un index minimal, mais vous pouvez sans problème l'intégrer dans une de vos page déjà existante. Pour ma part je le met à la racine du serveur web pour les tests, donc /var/www :

Configuration File /var/www/index.php
<?php
include_once '.stats/php-ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['HTTP_HOST'] .'/.stats/piechart.php', false );
?>

Ici mon fichier piechart.php est généré dans le dossier .stats, mais comme je l'ai déjà recommandé plus haut, je vous conseil d'utiliser un sysytème de type tmpfs pour stocker ce fichier. Vous n'aurez alors plus qu'a modifier ce fichier index.php pour aller pointer au bon endroit.

4 Test

Pour tester c'est simple, lancez votre browser : http://monserveur/