Stofcplugin : faire de bien jolis graphiques avec symfony | Developpement Symfony2

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 :

^?View Code YML

symfony plugin:install stOfcPlugin

puis

^?View Code YML

symfony cc

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

^?View Code PHP

<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 :

^?View Code HTML

<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 :

^?View Code PHP

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
    }

Partagez cet article

6 réflexions au sujet de « Stofcplugin : faire de bien jolis graphiques avec symfony »

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

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

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

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 !!

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

Le 4 mars 2010 à 17 h 51 min, freedelta a dit :

Merci beaucoup d’expliquer comment utiliser jpgraph avec Symfony.
It saved my day 😉
Le 31 janvier 2011 à 14 h 37 min, anonyme a dit :

Merci pour cet article. J’ai essayé « stOfcPlugin » c’est très facile à utiliser et les graphes sont vraiment jolis.
Le 31 janvier 2011 à 14 h 39 min, anonyme2 a dit :

Merci pour cet article. J’ai essayé « stOfcPlugin » c’est très facile à utiliser et les graphes sont vraiment jolis.
Le 20 mars 2013 à 1 h 25 min, elouej a dit :

Merci beaucoup pr ce tuto 😀
je suis en train de le tester sur symfony 2 , est ce que je suis sur la bonne voix ??
Le 22 mars 2013 à 17 h 38 min, mandengue a dit :

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 !!
Le 25 mars 2013 à 12 h 16 min, mandengue a dit :

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