Lolokai – Supervision, systèmes, réseaux, base de données…

1

Création d’un diagramme circulaire en PHP grâce à la librairie JpGraph

Cédric ROBERT 5 mars 2012

Dans cet article nous allons voir comment réaliser un diagramme circulaire (en Camembert, pie-chart en anglais) en PHP grâce à la librairie JpGraph.

La librairie JpGraph

JpGraph est une librairie PHP spécialisée dans la réalisation de diagramme, cette librairie permet de réaliser toutes sortes de diagrammes aussi bien des diagrammes circulaires, que des courbes mathématiques, diagramme de Grant… Site officiel

Les Licence JpGraph : JpGraph peut être utilisé gratuitement dans un cadre non commercial. Dans le cas contraire il est nécessaire d’acquérir une licence.

Pré-requis

  • Avoir des bases en PHP (notamment PDO pour se connecter a une base de données, pas besoin d’être un Expert non plus).
  • Connaitre le SQL si vous souhaitez récupérer des informations dans une base de données.

Installer JpGraph

Vous pouvez télécharger JpGraph en suivant ce lien, choisissez bien la version correspondante à votre version de PHP.

JpGraph nécessite l’utilisation de l’extension GD 2 il faut donc l’activer. Pour ce faire il suffit de dé commenté une ligne dans php.ini. Redémarrez votre serveur web pour que les modifications soient prises en charge.

fichier de parametres ini.php

 

Enfin, il suffit de rajouter les sources de JpGraph à votre projet PHP.

Notre premier diagramme circulaire :

Dans ce premier exemple nous allons voir comment faire un simple diagramme, sans récupérer des informations dans une base de données.

Nous allons donc commencer par inclure JpGraph dans notre code PHP

inclusion

Vous devez savoir que JpGraph récupère ces informations dans un tableau nous allons donc crée se tableau :

tableau

Nous allons maintenant pouvoir créer notre diagramme :

premier diagramme (code source)

Dans cette exemple nous avons commencé par créer un graphique conteneur $diagramme qui va contenir notre diagramme $cercle.

Puis on crée notre diagramme circulaire avec le code : $cercle = new PiePlot($tableau);

On spécifie le type de valeur de notre diagramme en effet JpGraph permet d’utiliser soit des valeurs absolue soit des valeurs proportionnels (par défaut les valeurs sont proportionnels) on utilise le code suivant pour les passer en valeur absolue :      $cercle->SetValueType(PIE_VALUE_ABS);

Enfin on ajoute notre diagramme circulaire au graphique conteneur. Voilà le résultat :

premier diagramme resultat

Nous pouvons aussi changer la couleur de fond grâce à la fonction : $diagramme->SetMarginColor(‘gray’); par exemple pour mettre un fond gris. Et rajouter une légende grâce à la fonction : $cercle->SetLegends($tableau2); qui prend en paramètre un tableau des valeur de la légende.

Résultat :

fond et legend

Voilà nous avons réussi notre premier diagramme. Mais comment l’insérer dans une page  HTML ?

Insérer le diagramme dans un page HTML

Le problème avec l’insertion d’un diagramme dans une page est que la fonction d’affichage stroke(), va provoquer l’affichage dans le navigateur il sera donc impossible d’ajouter d’autre contenu. Mais ne vous inquiétez pas il existe un moyen de résoudre ce problème c’est ce que  nous allons voir tout de suite.

Au fait c’est tout simple nous allons insérer notre diagramme grâce à une balise image avec pour source notre page PHP que nous avons créé précédemment pour faire notre diagramme.

insertion dans une page PHP

Résultat :

insertion resultat

Conclusion :

Voilà cette article ce termine, nous avons vu ensemble comment créer un diagramme circulaire et l’insérer dans une page HTML grâce JpGraph. Il faut savoir que vous pouvez utiliser JpGraph avec une base de données en récupérant tout simplement les valeurs de la base dans un tableau

Exemple :

Avez vous des question? Peut être utilisez vous une autre librairie pour faire des diagramme PHP ? N ‘hésiter pas a laisser vos commentaires.Cédric ROBERT

Tagged with: , ,

Comments (1)

Laisser un commentaire

Login to your account

Can't remember your Password ?

Register for this site!