mardi , 17 janvier 2017

Créer un graphique en PHP

Comment créer un graphique en PHP et de manière simple ? Il suffit d’utiliser une librairie toute prête et dédiée à la création de graphiques en PHP. Cette librairie est disponible sur http://www.pchart.net/, elle est notamment utilisée par des entreprises comme la NASA, Sony ou Airbus… Des petits joueurs quoi…

A noter : J’ai réalisé cet article sur mon ancien blog

Je vous est fait une petite vidéo rapide vous montrant l’utilisation de la librairie, évidemment, je triche un peu mon script pour la création du graphique était déjà prêt avant.

Ce qui m’a bluffé avec pChart c’est sa simplicité d’utilisation, absolument incroyable, mais les possibilités que cela ouvre. Par exemple, j’ai utilisé pChart dans des pages automatisées, celles-ci sont créées à partir d’une base de données en récupérant des variables. Chaque page contient 29 graphiques et il y a 36680 pages, eh bien le résultat est impeccable, cela ma crée plus d’un million de graphiques sans problème (mais en plusieurs jours), par contre le sitemap images pour Google était légèrement lourd, plus de 200mo, du coup, obligé d’éclater celui-ci en plusieurs. Je vais vous dire, avec pChart, la seule limite est votre imagination.

Créer un graphique avec pChart

La vidéo ci-dessous vous montre comment installer et utiliser pChart :

Dans la vidéo le code utilisé est le suivant, mais vous pouvez trouver une multitude d’exemples sur lesquels vous inspirer à l’adresse suivante : http://wiki.pchart.net/ – Rendez-vous dans l’onglet : Language Reference

Le code expliqué :

<?php

/*Je charge les librairies de pChart qui se trouve dans le dossier class pour qu'il puisse afficher un graphique
include("class/pData.class.php");
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pPie.class.php");
include("class/pIndicator.class.php");

/* Je créer un nouvel objet contenant mes données pour le graphique */
 $MyData = new pData();

/*Je présente ma série de données à utiliser pour le graphique et je détermine le titre de l'axe vertical avec setAxisName*/  
 $MyData->addPoints(array(171,73,58,75,180,200,400,500,163,152,145),"Probe 3");
 $MyData->setSerieWeight("Probe 3",2);
 $MyData->setAxisName(0,"Nombre de chômeurs");

/*J'indique les données horizontales du graphique. Il doit y avoir le même nombre que pour ma série de données précédentes (logique)*/
 $MyData->addPoints(array("2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011"),"Labels");
 $MyData->setSerieDescription("Labels","Années");
 $MyData->setAbscissa("Labels");
 $MyData->setPalette("Probe 3",array("R"=>255,"G"=>0,"B"=>0));

/* Je crée l'image qui contiendra mon graphique précédemment crée */
 $myPicture = new pImage(900,330,$MyData);

/* Je crée une bordure à mon image */
 $myPicture->drawRectangle(0,0,899,329,array("R"=>0,"G"=>0,"B"=>0));

/* J'indique le titre de mon graphique, son positionnement sur l'image et sa police */ 
 $myPicture->setFontProperties(array("FontName"=>"fonts/Forgotte.ttf","FontSize"=>11));
 $myPicture->drawText(200,25,"Evolution du nombre de chômeurs",array("FontSize"=>20,"Align"=>TEXT_ALIGN_BOTTOMMIDDLE));

/* Je choisi le fond de mon graphique */
 $myPicture->setFontProperties(array("FontName"=>"fonts/pf_arma_five.ttf","FontSize"=>6));

/* Je détermine la taille du graphique et son emplacement dans l'image */
 $myPicture->setGraphArea(60,40,800,310);

/* Paramètres pour dessiner le graphique à partir des deux abscisses */
 $scaleSettings = array("XMargin"=>10,"YMargin"=>10,"Floating"=>TRUE,"GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE);
 $myPicture->drawScale($scaleSettings);

/* J'insère sur le côté droit le nom de l'auteur et les droits */ 
$myPicture->setFontProperties(array("FontName"=>"fonts/Bedizen.ttf","FontSize"=>6));
$TextSettings = array("DrawBox"=>TRUE,"BoxRounded"=>TRUE,"R"=>0,"G"=>0,"B"=>0,"Angle"=>90,"FontSize"=>10);
$myPicture->drawText(860,300,"Création : FabPlug.com - Tous droits réservés",$TextSettings);

/* Je dessine mon graphique en fonction des paramètres précédents */
$myPicture->drawAreaChart();
$myPicture->drawLineChart(); 

/* Je rajoute des points rouge (plots) en affichant par dessus les données */
$myPicture->drawPlotChart(array("DisplayValues"=>TRUE,"PlotBorder"=>TRUE,"BorderSize"=>2,"Surrounding"=>-60,"BorderAlpha"=>80));

/* J'indique le chemin où je souhaite que mon image soit créée */
 $myPicture->Render("img/evolution-du-chomage.png");
?>

Mon graphique sera créé dans le dossier img sous le nom evolution-du-chomage.png et le résultat sera le suivant :

Créer un graphique en PHP

Voici plusieurs captures pour vous montrer des résultats que l’on peut créer avec pChart :

Graphique PHP

Barres graphique en PHPGraphique présentation PHP

Camembert en PHP

12 commentaires

  1. Hello, merci pour ce post. Je ne connaissais pas cette librairie. Je vais l’essayer de suite. Bonne journée.

  2. merciii ça marche très très bien

  3. En effet , bien pratique , j’ai testé chez moi ca tourne tres bien 🙂
    MErci pour les infos ,ca aide grandement 🙂

  4. Bonjour,
    J’utilise pChart et mes graphiques fonctionnent correctement mais en local.Une fois que je fait migrer les fichiers concernés vers mon serveur web, aucun titre,aucune légende du graphique ne marche. J’ai vérifier les chemins d’accès en vain..Quelqu’un pourrait m’aider?
    Cldt,

  5. Salut,

    Merci pour ce tuto j’ai pu faire l’intégralité de mes graphiques.

    Sauf un :p
    J’ai 3 courbes de dates à mettre en fonction d’une 4eme.

    Il semblerait que l’échelle est bloqué aux années et je n’arrive pas à la mettre en jour ou mois par exemple…

    Merci encore !

    • Les données sont récupérées a partir d’une base de donnée.
      J’ai testé avec un format date et varchar.

      $MyData->setXAxisDisplay(1, AXIS_FORMAT_TIME); aussi.

      Merci encore pour ton travail !

    • De rien, cette librairie est exceptionnelle, elle mérite vraiment d’être connu,

      Pour celui qui vous manque la doc est vraiment bien faite vous devriez trouver votre bonheur par le biais d’un exemple qui se rapproche de ce que vous voulez faire.

  6. Bonsoir
    comment je peux faire la correspondance entre le graphe et un formulaire par exemple ??

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *