Stofcplugin : faire de bien jolis graphiques avec symfony

Bérenger Vidal — Thu, 18 Jun 2009 16:32:17 +0000

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

» />

@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->title->SetFont(FF_FONT1,FS_BOLD);
      $line = new LinePlot($ydata);
      $graph->Add($line);
      $line->SetColor("#36393D");
      $line->SetWeight(2);
      $graph->xaxis->setTickLabels($xdata);
 
      // Output graph
      $graph->Stroke();
 
      return sfView::NONE; // Important pour que l'action retourne que le code de l'image
    }

Une infobulle pour l’admin générator

Bérenger Vidal — Thu, 09 Apr 2009 13:39:54 +0000

Voici quelques astuces pour rendre le backend d’un site généré par symfony accessible au plus grand nombre et de faciliter la compréhension pour l’administrateur du site Web.

Petit rappel, les formulaires sont placés dans le dossier : votre-projet/lib/form
et un tuto pour apprendre à les utiliser : Formualires symfony 1.2

Voici deux petites astuces :

Lors de la création d’un formulaire , il est possible de rajouter une zone html en dessous d’un champs.
La ligne suivante permet de faire ça :

^?View Code PHP

$this-&gt;widgetSchema-&gt;setHelp('champs','code html');

Résulat :

Il est aussi possible d’injecter du code html dans le label d’un champs. Partant de ce constat , j’ai alors créé une petite classe qui va générer une image avec une info-bulle.

On crée en suite le fichier bulle.js dans le dossier web/js. Ce code permet de générer l’info-bulle.

^?View Code JAVASCRIPT

function GetId(id)
{
return document.getElementById(id);
 
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e) {
if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposé par TeDeum, merci à lui
if(document.documentElement.clientWidth&gt;0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
 
function montre(text) {
 
if(i==false) {
 
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
i=true;
}
 
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->

Puis on crée le fichier bt.css dans le dossier web/css. Ce fichier permet de modifier l’aspect de l’info-bulle pour qu’elle soit assortie au backend.

^?View Code CSS

.infobulle
{
position: absolute;
visibility : hidden;
border: 1px solid #CC0000;
padding: 10px;
font-family: Verdana, Arial;
font-size: 12px;
background-color: #FFFFFF;
}

Ensuite , on crée le fichier bulle.class.php dans le dossier lib du projet

^?View Code PHP

class bulle
{
public static function bubble($Message)
{
return ''.$Message.'\');" onmouseout="cache()" href="#">&nbsp;';
}
}

Une dernière chose, il faut maintenant inclure une div dans la page où est affiché le formulaire. pour cela on va sur-définir le fichier : _form_header.php

Il est à placé dans le dossier : votre-pojet/apps/backend/modules/votre-module/templates

Ensuite il suffit de rajouter bulle::bubble( texte a affiché dans la bulle ) quand on implémente le label

^?View Code PHP

$this-&gt;widgetSchema-&gt;setLabel('name',bulle::bubble('Référence du contenu').'Référence');

Résultat :

Ainsi vous pouvez donner le maximum d’information sur l’impact d’un champs pour que l’administrateur du site internet sache ce qu’il fait

Blog Symfony - Lexik Montpellier » Bérenger Vidal

Stofcplugin : faire de bien jolis graphiques avec symfony

Autre solution pour faire des graphique sans flash : jpgraph

Une infobulle pour l’admin générator