Navigation

Related Articles

Back to Latest Articles

Stofcplugin : faire de bien jolis graphiques avec symfony


Samuel Breton
Stofcplugin : faire de bien jolis graphiques...

Aujourd’hui , nous allons découvrir un plugin symfony permettant de réaliser simplement des graphiques en flash à partir d’un tableau de donnée.

Il gère les :

  • Histogrammes
  • Graphique en courbes
  • Graphiques en secteurs
  • Graphiques en barres
  • Graphiques en aires


Les graphiques générés sont entièrement paramétrables : choix des couleurs , des titres .

L’installation du plugin est très simple :

symfony plugin:install stOfcPlugin

puis

symfony cc

Ensuite , dans le template où l’on veut afficher le graphique on copie la ligne suivante :

<code>
stOfc::createChart(500, 300, 'quiz_sondage/pieChartData?slug='.$quiz-&gt;getSlug(), fal
</code>

Les premiers paramètres correspondent à la taille du graphique tandis que le second correspond à la route qui appelle la fonction qui génèrera le graphique.

Si vous ne voulez pas définir une route supplémentaire vous pouvez appelez la fonction comme ceci : module/action

Le readme du contient des exemples pour bien commencé :

http://www.symfony-project.org/plugins/stOfcPlugin

Ce plugin est basé sur un projet open-source, voici l’adresse :
http://teethgrinder.co.uk/open-flash-chart/
Le site contient toute la doc nécessaire

Et voici l’adresse du forum d’aide : ( ça peut toujours servir )
http://forums.openflashchart.com/

Autre solution pour faire des graphique sans flash : jpgraph

Pour télécharger la libraire jpgraph : http://www.aditus.nu/jpgraph

On va donc voir comment l’utiliser avec sympfony :

Télécharger la dernière realease pour PHP5

Dans un premier temps copier le dossier jpgraph obtenu après la décompression de l’archive dans le dossier lib de votre projet

Faites un symfony cc

dans le template voulu copier la ligne suivante :

<code>
<img class="graph" src="&lt;?php echo url_for('@actionSouhaité'); ?&gt;" alt="" />
</code>

 » />

@actionSouhaité = la route appelant l’action qui va générer l’image.

Maintenant on va voir un modèle d’action pour génèrer l’image :

public function executeGraph(sfWebRequest $request)
    {
 
      $i=0;
      $ydata=array(); // Tableau des valeurs
      $xdata=array(); // Tableau axis ( légénde des valeurs )
 
      // Code pour remplir les tableau comme vous voulez    
 
     // Création du graph type courbe
      $graph = new Graph(1300,400,"auto");
      $graph-&gt;SetScale("textlin");
      $graph-&gt;title-&gt;Set('Evolution du nombre d\'inscription');
      $graph-&gt;title-&gt;SetFont(FF_FONT1,FS_BOLD);
      $line = new LinePlot($ydata);
      $graph-&gt;Add($line);
      $line-&gt;SetColor("#36393D");
      $line-&gt;SetWeight(2);
      $graph-&gt;xaxis-&gt;setTickLabels($xdata);
 
      // Output graph
      $graph-&gt;Stroke();
 
      return sfView::NONE; // Important pour que l'action retourne que le code de l'image
    }
Show Comments (6)

Comments

  • freedelta

    Merci beaucoup d’expliquer comment utiliser jpgraph avec Symfony.
    It saved my day 😉

    • Article Author
  • anonyme

    Merci pour cet article. J’ai essayé « stOfcPlugin » c’est très facile à utiliser et les graphes sont vraiment jolis.

    • Article Author
  • anonyme2

    Merci pour cet article. J’ai essayé « stOfcPlugin » c’est très facile à utiliser et les graphes sont vraiment jolis.

    • Article Author
  • elouej

    Merci beaucoup pr ce tuto 😀
    je suis en train de le tester sur symfony 2 , est ce que je suis sur la bonne voix ??

    • Article Author
  • mandengue

    s’il vous plai j ‘ai suivi les étapes mais chez moi ça ne marche pas je ne sais pas si vous pouvez m’envoyer une version de votre dossier compressé
    j aimerai installer stOfcplugin ;
    j ai télécharger le .zip je l’ai décompressé et j ai pris :
    – fais un pph symfony cc sous le dossier de mon projet
    – j ‘ai créé un nouveau module à l’ aide de al commande php symfony generate :module frontend monmodule
    – puis j ‘ai copier les actions qui était dans le README .txt dans le fichier action.class.php comme ceci :

    class stOfcExampleActions extends sfActions
    {
    /**
    * Executes index action (demo)
    *
    * @param sfRequest $request A request object
    */
    public function executeIndex(sfWebRequest $request)
    {
    }

    /**
    * Creates a pie chart from random data
    */
    public function executePieChartData()
    {
    $chatData = array();
    for( $i = 0; $i bg_colour = ‘#E4F5FC’;

    //Set the transparency, line colour to separate each slice etc.
    $g->pie(80,’#78B9EC’,'{font-size: 12px; color: #78B9EC;’);

    //array two arrray one containing data while other contaning labels
    $g->pie_values($data, array(‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’));

    //Set the colour for each slice. Here we are defining three colours
    //while we need 7 colours. So, the same colours will be
    //repeated for the all remaining slices in the same order
    $g->pie_slice_colours( array(‘#d01f3c’,’#356aa0′,’#c79810′) );

    //To display value as tool tip
    $g->set_tool_tip( ‘#val#%’ );

    $g->title( ‘stOfcPlugin example’, ‘{font-size:18px; color: #18A6FF}’ );
    echo $g->render();
    return sfView::NONE;
    }

    /**
    * Creates a bar chart from random data
    *
    */
    public function executeBarChartData()
    {
    $chartData = array();

    //Array with sample random data
    for( $i = 0; $i key( ‘Number of downloads per day’, 10 );

    //Passing the random data to bar chart
    $bar->data = $chartData;

    //Creating a stGraph object
    $g = new stGraph();
    $g->title( ‘stOfcPlugin example’, ‘{font-size: 20px;}’ );
    $g->bg_colour = ‘#E4F5FC’;
    $g->set_inner_background( ‘#E3F0FD’, ‘#CBD7E6’, 90 );
    $g->x_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );
    $g->y_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );

    //Pass stBarOutline object i.e. $bar to graph
    $g->data_sets[] = $bar;

    //Setting labels for X-Axis
    $g->set_x_labels(array( ‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’ ));

    // to set the format of labels on x-axis e.g. font, color, step
    $g->set_x_label_style( 10, ‘#18A6FF’, 0, 2 );

    // To tick the values on x-axis
    // 2 means tick every 2nd value
    $g->set_x_axis_steps( 2 );

    //set maximum value for y-axis
    //we can fix the value as 20, 10 etc.
    //but its better to use max of data
    $g->set_y_max( max($chartData) );
    $g->y_label_steps( 4 );
    $g->set_y_legend( ‘stOfcPlugin’, 12, ‘#18A6FF’ );
    echo $g->render();

    return sfView::NONE;
    }

    /**
    * Creates line chart from random data.
    */
    public function executeLineChartData()
    {
    $chartData = array();
    for( $i = 0; $i title( ‘stOfcPlugin example’, ‘{font-size: 20px;}’ );
    $g->bg_colour = ‘#E4F5FC’;
    $g->set_inner_background( ‘#E3F0FD’, ‘#CBD7E6’, 90 );
    $g->x_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );
    $g->y_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );

    //Use line_dot to set line dots diameter, text, color etc.
    $g->line_dot(2, 3, ‘#3495FE’, ‘Number of downloads per day’, 10);

    //In case of line chart data should be passed to stGraph object
    //unsing set_data
    $g->set_data( $chartData );

    //Setting labels for X-Axis
    $g->set_x_labels( array( ‘Mon’,’Tue’,’Wed’,’Thu’,’Fri’,’Sat’,’Sun’ ) );

    //to set the format of labels on x-axis e.g. font, color, step
    $g->set_x_label_style( 10, ‘#18A6FF’, 0, 1 );

    //set maximum value for y-axis
    //we can fix the value as 20, 10 etc.
    //but its better to use max of data
    $g->set_y_max( max($chartData) );

    $g->y_label_steps( 5 );

    // display the data
    echo $g->render();

    echo $g->render();

    return sfView::NONE;
    }

    /**
    * Creates a bar chart from random data
    *
    */
    public function execute3DBarChartData()
    {
    //Create new stBar3D object and set the transparency and colour.
    $redBar = new stBar3D( 75, ‘#d01f3c’ );
    $redBar->key( ‘2007’, 10 );

    //random data
    for( $i = 0; $i data[] = rand(200,500);
    }

    //2nd Bar
    $blueBar = new stBar3D( 75, ‘#356aa0’ );
    $blueBar->key( ‘2008’, 10 );

    //random data for 2nd bar
    for( $i = 0; $i data[] = rand(200,500);
    }

    $g = new stGraph();
    $g->bg_colour = ‘#E4F5FC’;
    $g->title( ‘Number of downloads in 2008 and 2009’, ‘{font-size:20px; color: #18A6FF;}’ );

    $g->data_sets[] = $redBar;
    $g->data_sets[] = $blueBar;

    //to create 3d x-axis
    $g->set_x_axis_3d( 10 );
    $g->x_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );
    $g->y_axis_colour( ‘#8499A4’, ‘#E4F5FC’ );

    $g->set_x_labels( array( ‘Jan’,’Feb’,’Mar’,’Apr’,’May’,’Jun’,’Jul’,’Aug’,’Sep’,’Oct’, ‘Nov’, ‘Dec’ ) );
    $g->set_y_max( 500 );
    $g->y_label_steps( 5 );
    $g->set_y_legend( ‘stOfcPlugin’, 12, ‘#18A6FF’ );
    echo $g->render();

    return sfView::NONE;
    }
    }

    – et le fichier index.php comprend :

    – où stOfcExample/pieChartData est monmodule/nomdel’action

    moi j’obtient ceci

    en vision en web : A plugin is needed to display this content
    ce message est contenu dans zones délimitées en formes rectangulaires sauf que le contenu ne s’afiiche pas
    – j ai copier le contenu du plugin sous mon dossier web de mon application dans un dossier ayant le nom du plugin
    j ai exécuter php symfony plugin : install stOfcplugin
    j’obtient ceci :

    Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\Program File
    s\EasyPHP-5.3.3.1\php\PEAR\PEAR\Registry.php on line 1115
    PHP Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\Program
    Files\EasyPHP-5.3.3.1\php\PEAR\PEAR\Registry.php on line 1119

    Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\Program File
    s\EasyPHP-5.3.3.1\php\PEAR\PEAR\Registry.php on line 1119
    >> sfSymfonyPluginManager Plugin is already installed

    mais rien n ‘y fait je ne visionne pas les graphes !!

    je ne sais plus quoi faire s’il vous plait aidez moi !!

    • Article Author
  • mandengue

    please i need help i have tried to install the plugin stOFCplugin but after all configurations this is what i have as result : A plugin is needed to disply this content

    • Article Author

Recevez nos articles