Dcouverte de la librairie Php JpGraph


prcdentsommairesuivant

II. Prsentation des principaux graphiques

Pour les exemples, nous utiliserons les donnes fictives d'une entreprise intitule maPetiteEntreprise.com . Imaginons que l'activit de cette entreprise est la vente de matriel, de logiciel ainsi que de services.

Voici un aperu des diffrents graphiques de ce chapitre (histoire de vous mettre l'eau la bouche...) :

Aperu Type de graphique Description
Image non disponible Secteur Nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Image non disponible Secteur 3D Nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Image non disponible Histogrammes Nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Image non disponible Courbe Chiffre d'affaires de l'anne 2006 par mois
Image non disponible Histogrammes groups Chiffre d'affaires par mois et par annes sur les diffrents exercices (2004, 2005 ...)
Image non disponible Histogrammes horizontaux rpartition des ventes par chiffre d'affaires entre les diffrents types de produits depuis la premire vente
Image non disponible Histogrammes et courbe Chiffre d'affaires et units vendues pour l'anne 2006
Image non disponible Histogrammes accumuls Chiffre d'affaires 2006 avec rpartition du type de vente
Image non disponible Radar Chiffre d'affaires de l'anne 2006

II-A. Prsentation des donnes utilises

Les donnes sont stockes dans une base Mysql (la base tutoJpGraph) et dans une table ventes qui reprsente l'ensemble des prestations effectues par la socit entre 2004 et 2006. Pour plus de clart et de simplicit dans les exemples, j'ai fait le choix de regrouper ces donnes dans une table unique.

La structure de la table ventes est la suivante :

Structure de la table des ventes
Sélectionnez
CREATE TABLE `ventes` (
  `ID` int(11) NOT NULL auto_increment,
  `DTHR_VENTE` date NOT NULL,
  `TYPE_PRODUIT` enum('logiciel','materiel','service') NOT NULL,
  `PRIX` int(11) NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Vous pouvez tlcharger le fichier Sql de la base utilise pour cet article. L'import des donnes pourra tre ralis l'aide de l'outil de votre choix (phpMyAdmin, mysql query browser ou autre...).

Le script comprend la cration de la base de donnes 'tuto_jp_graph', la cration de la table 'ventes' ainsi que l'insertion d'une centaine d'enregistrements.

Dans les exemples, ces mmes paramtres sont repris (nom de la base et nom de la table).

Base de donnes tuto_jpgraph et table des ventes

II-B. Graphique "secteur"

Image non disponible

Nous allons voir comment raliser un graphique type secteur (appel galement graphique camembert).
Les donnes reprsentes graphiquement sont le nombre d'units vendues sur les diffrents exercices (2004, 2005 et 2006).

Pour ce premier exemple, le graphique sera construit tape par tape. Le processus en sera volontairement plus dtaill que dans les exemples suivants.

Ce dont nous avons besoin pour produire les donnes :
  1. Il faut d'abord rcuprer les donnes, ce que nous allons faire l'aide d'une requte Sql.
  2. Les donnes rcuprer sont : Le nombre de ventes par anne Les annes correspondantes
  3. Sachant que JpGraph attend un tableau de donnes, nous allons intgrer ces valeurs dans deux tableaux qui vont respectivement reprsenter le nombre de ventes et les annes concernes (2004, 2005, 2006).
  4. Extraire de la table des ventes les diffrentes annes nous permettra ensuite d'ajouter une lgende chaque section du graphique.

Passons ensuite la mise en oeuvre du graphique avec notre librairie. L'laboration d'un graphique est assez simple.

Ce dont nous avons besoin pour la cration du graphique :
  1. Crer un objet qui reprsente le type de graphique que nous souhaitons obtenir (ici un PieGraph).
  2. Renseigner diffrentes proprits du graphique, comme les donnes ncessaires sa reprsentation, les lgendes, la position du graphique dans son conteneur et bien d'autres paramtres dont nous aurons un aperu au cours de cet article.
  3. Enfin, provoquer l'envoi de l'image vers le navigateur.

Voyons le code source pour notre graphique :

 
Sélectionnez
<?php
// ********************************************************************
// PARTIE : Includes et initialisation des variables
// ********************************************************************

// Inclusion de la librairie JpGraph
include ("../jpGraph/jpgraph.php");
include ("../jpGraph/jpgraph_pie.php");

// Constantes (connection mysql)
define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

// Tableaux de donnes destines  JpGraph
$tableauAnnees = array();
$tableauNombreVentes = array();

// ********************************************************************
// PARTIE : Production des donnes avec Mysql
// ********************************************************************

$sql = <<<EOF
	SELECT  
		YEAR(`DTHR_VENTE`) AS ANNEE,
		COUNT(ID) AS NBR_VENTES  
	FROM `ventes`
	GROUP BY YEAR(`DTHR_VENTE`)
EOF;

// Connexion  la BDD
$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

// Slection de la base de donnes
@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

// Requte
$mysqlQuery = @mysql_query($sql, $mysqlCnx) or die('Pb de requte');

// Fetch sur chaque enregistrement
while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	// Alimentation des tableaux de donnes
	$tableauAnnees[] = 'Anne ' . $row['ANNEE'];
	$tableauNombreVentes[] = $row['NBR_VENTES'];
}

// ********************************************************************
// PARTIE : Cration du graphique 
// ********************************************************************

// On spcifie la largeur et la hauteur du graphique conteneur&#160;
$graph = new PieGraph(400,300);

// Titre du graphique
$graph->title->Set("Volume des ventes par annes");

// Crer un graphique secteur (classe PiePlot)
$oPie = new PiePlot($tableauNombreVentes);

// Lgendes qui accompagnent chaque secteur, ici chaque anne
$oPie->SetLegends($tableauAnnees);

// position du graphique (lgrement  droite)
$oPie->SetCenter(0.4); 

$oPie->SetValueType(PIE_VALUE_ABS);

// Format des valeurs de type entier
$oPie->value->SetFormat('%d');

// Ajouter au graphique le graphique secteur
$graph->Add($oPie);

// Provoquer l'affichage (renvoie directement l'image au navigateur)
$graph->Stroke();
?>

L'image gnre :

Graphique secteur : nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Graphique secteur : nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)

Quelques mots concernant la production du graphique :

Comme nous l'avons vu au tout dbut du script PHP, il est ncessaire d'inclure le coeur de la librairie JpGraph ainsi que la librairie ncessaire la production du graphique voulu. Dans le cas prsent, il s'agit d'un graphique secteur (camembert), nous avons donc inclu le fichier jpgraph_pie.php.

 
Sélectionnez
// Inclusion de la librairie JpGraph
include ("../jpGraph/jpgraph.php");
include ("../jpGraph/jpgraph_pie.php");

Afin de crer notre graphique, nous avons utilis le constructeur de la classe PieGraph (elle-mme une extension de la classe Graph). Les arguments que nous avons passs sont la largeur et la hauteur.

 
Sélectionnez
$graph = new PieGraph(400,300);

La variable $graph est comprendre au sens de conteneur s pour un graphique de type piegraph.

Aprs avoir effectu quelques paramtrages, nous passons la cration du secteur proprement dit :

 
Sélectionnez
$oPie = new PiePlot($tableauNombreVentes);

L'argument pris est le tableau que nous avons aliment avec les donnes issues de notre table des ventes.

L encore, nous allons effectuer quelques paramtrages, comme la lgende et la position du graphique.

 
Sélectionnez
// Lgendes qui accompagnent chaque secteur (ici chaque anne)
$oPie->SetLegends($tableauAnnees);

// position du graphique (lgrement  droite)
$oPie->SetCenter(0.4);

Il est galement possible de spcifier la faon dont les valeurs de chaque part sont restitues, soit de faon absolue (comme c'est le cas dans notre exemple) soit de faon proportionnelle, avec un pourcentage pour chaque part.

Nous avons choisi la reprsentation absolue. Pour cela, on utilise la mthode SetValueType() et on passe en argument la constante correspondante.

 
Sélectionnez
$oPie->SetValueType(PIE_VALUE_ABS);

La mthode SetFormat('format') permet de formater les valeurs en les reprsentant sous divers formats comme entier ou flottant, mais aussi d'accompagner les valeurs d'une chane (ce que nous verrons un peu plus tard).

 
Sélectionnez
// Format des valeurs de type "entier"
$oPie->value->SetFormat('%d');

Nous ajoutons notre graphique secteur au conteneur.

 
Sélectionnez
$graph->Add($oPie);

Pour finir, la mthode Stroke() provoque l'affichage du graphique.

 
Sélectionnez

$graph->Stroke();

Cette mthode provoque un envoi de l'image (avec header PHP) directement au navigateur. Pas question, donc, de faire autre chose que de produire l'image dans votre script. Nous verrons nanmoins qu'il est tout fait possible de crer une image sur disque dur si cette mthode ne vous convient pas. Le format par dfaut pour l'image produite par dfaut est Png

II-C. Graphique "secteur 3D"

Image non disponible

Dans cet exemple, l'objectif est de crer le mme type de graphique et d'en personnaliser l'affichage. Pour mmoire il s'agit du nombre d'units vendues sur les diffrents exercices (2004, 2005 ...).

Nous allons donc reprendre les donnes utilises prcdemment (je ne m'attarderai pas sur la partie PHP, dans laquelle on effectue la rcupration des donnes).

Le code PHP :

 
Sélectionnez
<?php
include ("../jpGraph/jpgraph.php");
include ("../jpGraph/jpgraph_pie.php");
include ("../jpGraph/jpgraph_pie3d.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tableauAnnees = array();
$tableauNombreVentes = array();

// *****************************************************
// Extraction des donnes dans la base de donnes 
// **************************************************

$sql = <<<EOF
	SELECT  
		YEAR(`DTHR_VENTE`) AS ANNEE,
		COUNT(ID) AS NBR_VENTES  
	FROM `ventes`
	GROUP BY YEAR(`DTHR_VENTE`)
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql, $mysqlCnx) or die('Pb de requte');

while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	// Ajouter anne devant, c'est pour la lgende
	$tableauAnnees[] = "anne " . $row['ANNEE'];
	$tableauNombreVentes[] = $row['NBR_VENTES'];
}

// **************************************
// Cration du graphique
// *****************************************

// On spcifie la largeur et la hauteur du graph
$graph = new PieGraph(400,300);

// Ajouter une ombre au conteneur
$graph->SetShadow();

// Donner un titre
$graph->title->Set("Volume des ventes par annes style PIE 3D");

// Quelle police et quel style pour le titre
// Prototype: function SetFont($aFamily,$aStyle=FS_NORMAL,$aSize=10)
// 1. famille
// 2. style
// 3. taille
$graph->title->SetFont(FF_GEORGIA,FS_BOLD, 12);

// Crer un camembert 
$pie = new PiePlot3D($tableauNombreVentes);

// Quelle partie se dtache du reste
$pie->ExplodeSlice(2);

// Spcifier des couleurs personnalises... #FF0000 ok
$pie->SetSliceColors(array('red', 'blue', 'green'));

// Lgendes qui accompagnent le graphique, ici chaque anne avec sa couleur
$pie->SetLegends($tableauAnnees);

// Position du graphique (0.5=centr)
$pie->SetCenter(0.4);

// Type de valeur (pourcentage ou valeurs)
$pie->SetValueType(PIE_VALUE_ABS);

// Personnalisation des tiquettes pour chaque partie
$pie->value->SetFormat('%d ventes');

// Personnaliser la police et couleur des tiquettes
$pie->value->SetFont(FF_ARIAL,FS_NORMAL, 9);
$pie->value->SetColor('blue');

// ajouter le graphique PIE3D au conteneur 
$graph->Add($pie);

// Provoquer l'affichage
$graph->Stroke();

?> 

Voici l'image produite :

Graphique secteur : nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Graphique secteur : nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)

Quelques modifications du script initial nous ont permis de personnaliser notre graphique. Revenons sur les diffrentes instructions utilises pour cela :

Fichiers ncessaires la ralisation du graphique :

 
Sélectionnez
include ("../jpGraph/jpgraph.php");
include ("../jpGraph/jpgraph_pie.php");
include ("../jpGraph/jpgraph_pie3d.php");

A l'aide de la mthode SetShadow(), nous avons ajout une ombre au conteneur.

 
Sélectionnez
$graph->SetShadow();

Ensuite, nous avons spcifi la police, le style et la taille avec la mthode SetFont() :

 
Sélectionnez
$graph->title->SetFont(FF_GEORGIA,FS_BOLD, 12);

Pour la cration de l'objet reprsentant notre graphique en 3D, nous avons fait appel un constructeur diffrent, rendu possible grce l'inclusion du fichier jpgraph_pie3d.php.

 
Sélectionnez
$pie = new PiePlot3D($tableauNombreVentes);

L'effet de sparation d'une des parties du graphique a pu tre ralis l'aide de la mthode ExplodeSlice(), qui prend en argument l'index de la partie que l'on souhaite valoriser.

 
Sélectionnez
$pie->ExplodeSlice(2);

La personnalisation des couleurs se fait avec la mthode SetSliceColors(), qui prend comme argument un tableau index de chanes de caractres (les diffrentes couleurs).

 
Sélectionnez
// Spcifier des couleurs personnalises... #FF0000 ok
$pie->SetSliceColors(array('red', 'blue', 'green'));

Les couleurs peuvent galement tre dfinies en RGB, notation utilise en Html, par exemple : #FF0000 pour du rouge

Il est galement possible de paramtrer la position du graphique, grce la mthode SetCenter(). Une valeur de 0.5 correspond un centrage par rapport au conteneur. Plus la valeur est leve, plus le graphique est dcal droite (et inversement). Dans l'exemple, le graphique est lgrement dcentr gauche pour laisser de la place la lgende.

 
Sélectionnez
$pie->SetCenter(0.4);

JpGraph permet enfin de personnaliser les valeurs prsentes, puisque nous avons pu spcifier le texte de sortie ainsi que la police et la couleur.

 
Sélectionnez
$pie->value->SetFormat('%d ventes');
$pie->value->SetFont(FF_ARIAL,FS_NORMAL, 9);
$pie->value->SetColor('blue');

II-D. Graphique "histogrammes"

Image non disponible

Aprs avoir tudi le graphique secteur (ou camembert), voyons maintenant le graphique de type histogramme. Cette sorte de graphique est nomme 'Bar' dans la librairie JpGraph.

Pour crer un graphique de ce type, il faut, en plus de l'inclusion de la librairie de base de JpGraph (fichier jpgraph.php), procder l'inclusion du fichier jpgraph_bar.php.

Reprenons le cas prcdent : nombre d'units vendues sur les diffrents exercices (2004, 2005 ...).

Le graphique en histogramme prsente les chiffres sous forme de barres verticales (ou horizontales). Dans notre exemple, chaque histogramme reprsente le nombre de ventes effectues pour une anne.
Pour ce qui est de la production de donnes, pas besoin de modifier le code : ce qui tait valable pour le graphique secteur l'est galement pour l'histogramme.

Le code PHP :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tableauAnnees = array();
$tableauNombreVentes = array();

// **********************************************
// Extraction des donnes dans la base de donnes
// *************************************************

$sql = <<<EOF
	SELECT  
		YEAR(`DTHR_VENTE`) AS ANNEE,
		COUNT(ID) AS NBR_VENTES  
	FROM `ventes`
	GROUP BY YEAR(`DTHR_VENTE`)
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql, $mysqlCnx) or die('Pb de requte');

while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tableauAnnees[] = 'Anne ' . $row['ANNEE'];
	$tableauNombreVentes[] = $row['NBR_VENTES'];
}

/*
printf('<pre>%s</pre>', print_r($tableauAnnees,1));
printf('<pre>%s</pre>', print_r($tableauNombreVentes,1));
*/

// *******************
// Cration du graphique
// *******************


// Construction du conteneur
// Spcification largeur et hauteur
$graph = new Graph(400,250);

// Rprsentation linaire
$graph->SetScale("textlin");

// Ajouter une ombre au conteneur
$graph->SetShadow();

// Fixer les marges
$graph->img->SetMargin(40,30,25,40);

// Cration du graphique histogramme
$bplot = new BarPlot($tableauNombreVentes);

// Spcification des couleurs des barres
$bplot->SetFillColor(array('red', 'green', 'blue'));
// Une ombre pour chaque barre
$bplot->SetShadow();

// Afficher les valeurs pour chaque barre
$bplot->value->Show();
// Fixer l'aspect de la police
$bplot->value->SetFont(FF_ARIAL,FS_NORMAL,9);
// Modifier le rendu de chaque valeur
$bplot->value->SetFormat('%d ventes');

// Ajouter les barres au conteneur
$graph->Add($bplot);

// Le titre
$graph->title->Set("Graphique 'HISTOGRAMME' : ventes par annes");
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// Titre pour l'axe horizontal(axe x) et vertical (axe y)
$graph->xaxis->title->Set("Annes");
$graph->yaxis->title->Set("Nombre de ventes");

$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

// Lgende pour l'axe horizontal
$graph->xaxis->SetTickLabels($tableauAnnees);

// Afficher le graphique
$graph->Stroke();

?>

Inclusion des fichiers ncessaires la ralisation d'un graphique histogramme :

 
Sélectionnez
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");

Le rsultat :

Nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)
Nombre d'units vendues sur les diffrents exercices (2004, 2005 ...)

Aprs avoir cr notre conteneur comme dans les autres exemples, nous devons fixer la reprsentation souhaite pour l'chelle avec la mthode SetScale(), logarithmique (log) ou bien linaire. Pour l'heure, nous choisirons la reprsentation linaire (la reprsentation logarithmique sera aborde la fin du chapitre).

 
Sélectionnez
$graph->SetScale("textlin");

La construction du graphique proprement dit passe par la cration d'un objet de type BarPlot. Le constructeur prend comme argument un tableau de valeurs entires.

 
Sélectionnez
// Cration du graphique histogramme
$bplot = new BarPlot($tableauNombreVentes);

La mthode SetShadow() permet l'ajout d'une ombre chaque histogramme :

 
Sélectionnez
$bplot->SetShadow();

Voici comment afficher la valeur de chaque histogramme :

 
Sélectionnez
$bplot->value->Show();

L'ajout au conteneur du graphique avec la mthode Add()

 
Sélectionnez
$graph->Add($bplot);

Il est galement possible de spcifier des lgendes pour les deux axes : x pour l'axe horizontal et y pour l'axe vertical.

 
Sélectionnez
$graph->xaxis->title->Set("Annes");
$graph->yaxis->title->Set("Nombre de ventes");

Enfin, la mthode SetTickLabels() permet de personnaliser les valeurs de lgende d'un axe (dans notre exemple, les diffrentes annes). Un tableau index des valeurs correspondantes est ncessaire en argument.

 
Sélectionnez
$graph->xaxis->SetTickLabels($tableauAnnees);		

II-E. Graphique "courbe"

Image non disponible

Passons maintenant aux choses srieuses, en abordant un type de graphique que l'on rencontre trs frquemment : le graphique de type courbe. Ce type de graphique, constitu de points relis entre eux est particulirement appropri pour reprsenter une progression.

Nous allons reprsenter le chiffre d'affaires de l'anne 2006 (toutes catgories confondues).

La production des donnes s'avre un petit peu plus difficile raliser cette fois puisque nous souhaitons :
  • Rcuprer les ventes de l'anne 2006
  • Comptabiliser le chiffre d'affaires gnr par mois

Il nous faudra aussi crer la requte Sql approprie.

Une fois la production de donnes effectue, le reste ne prsente pas de difficult particulire.

Le code PHP :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_line.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tableauAnnees = array();
$tableauNombreVentes = array();
$moisFr = array('JAN', 'FEV', 'MAR', 'AVR', 'MAI', 'JUI', 'JUL', 'AOU', 'SEP', 'OCT', 'NOV', 'DEC');

// *********************
// Production de donnes
// *********************

$sql_ventes_par_mois = <<<EOF
SELECT  
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	COUNT( `ID` ) AS NOMBRE_VENTE, 
	SUM( `PRIX` ) AS PRODUIT_VENTE
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = '2006' 
GROUP BY MOIS
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

// Initialiser le tableau  0 pour chaques mois ***********************
$tableauVentes2006 = array(0,0,0,0,0,0,0,0,0,0,0,0); 

$mysqlQuery = @mysql_query($sql_ventes_par_mois, $mysqlCnx) or die('Pb de requte');

while ($row_mois = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tableauVentes2006[$row_mois['MOIS']-1] = $row_mois['PRODUIT_VENTE']; 
}

// Contrler les valeurs du tableau
// printf('<pre>%s</pre>', print_r($tableauVentes2006,1));

// ***********************
// Cration du graphique
// ***********************

// Cration du conteneur
$graph = new Graph(500,300);

// Fixer les marges
$graph->img->SetMargin(40,30,50,40);    

// Mettre une image en fond
$graph->SetBackgroundImage("images/mael_white.png",BGIMG_FILLFRAME);

// Lissage sur fond blanc (vite la pixellisation)
$graph->img->SetAntiAliasing("white");

// A dtailler
$graph->SetScale("textlin");

// Ajouter une ombre
$graph->SetShadow();

// Ajouter le titre du graphique
$graph->title->Set("Graphique 'courbes' : volume des ventes 2006");

// Afficher la grille de l'axe des ordonnes
$graph->ygrid->Show();
// Fixer la couleur de l'axe (bleu avec transparence : @0.7)
$graph->ygrid->SetColor('blue@0.7');
// Des tirets pour les lignes
$graph->ygrid->SetLineStyle('dashed');

// Afficher la grille de l'axe des abscisses
$graph->xgrid->Show();
// Fixer la couleur de l'axe (rouge avec transparence : @0.7)
$graph->xgrid->SetColor('red@0.7');
// Des tirets pour les lignes
$graph->xgrid->SetLineStyle('dashed');

// Apparence de la police
$graph->title->SetFont(FF_ARIAL,FS_BOLD,11);

// Crer une courbes
$courbe = new LinePlot($tableauVentes2006);

// Afficher les valeurs pour chaque point
$courbe->value->Show();

// Valeurs: Apparence de la police
$courbe->value->SetFont(FF_ARIAL,FS_NORMAL,9);
$courbe->value->SetFormat('%d');
$courbe->value->SetColor("red");

// Chaque point de la courbe ****
// Type de point
$courbe->mark->SetType(MARK_FILLEDCIRCLE);
// Couleur de remplissage
$courbe->mark->SetFillColor("green");
// Taille
$courbe->mark->SetWidth(5);

// Couleur de la courbe
$courbe->SetColor("blue");
$courbe->SetCenter();

// Paramtrage des axes
$graph->xaxis->title->Set("Mois");
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->SetTickLabels($moisFr);

// Ajouter la courbe au conteneur
$graph->Add($courbe);

$graph->Stroke();
?>

Le graphique produit :

le chiffre d'affaires de l'anne 2006
le chiffre d'affaires de l'anne 2006

Revenons la production de donnes.

Il a fallu concevoir une requte susceptible de rcuprer les ventes d'une anne donne (ici 2006), et de les regrouper par mois.

La requte est la suivante :

 
Sélectionnez
SELECT  
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	COUNT( `ID` ) AS NOMBRE_VENTE, 
	SUM( `PRIX` ) AS PRODUIT_VENTE
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = '2006' 
GROUP BY MOIS

Voici un aperu de l'ensemble de donnes gnr :

Donnes produites
Donnes produites

Il a galement t ncessaire de trouver une astuce permettant de prvoir les cas o aucune vente n'a eu lieu pour un mois donn.

Pour ce faire, j'ai initialis un tableau index de 12 valeurs (indice 0 indice 11) par la valeur zro. Lors de la rcupration, les donnes (chiffre d'affaires et nombre de ventes) sont affectes au mois qui convient.

 
Sélectionnez
$tableauVentes2006 = array(0,0,0,0,0,0,0,0,0,0,0,0); 

while ($row_mois = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tableauVentes2006[$row_mois['MOIS']-1] = $row_mois['PROD_VENTE']; 
}

Le reste concerne la mise en oeuvre du graphique et sa personnalisation.

La cration d'une courbe se fait l'aide du constructeur LinePlot($donnees), qui prend en argument un ensemble de donnes (un tableau index), ici notre chiffre d'affaires par mois pour l'anne 2006

 
Sélectionnez
$courbe = new LinePlot($tableauVentes2006);

Une image a t ajoute en fond avec la mthode SetBackgroundImage() :

 
Sélectionnez
$graph->SetBackgroundImage("images/mael_white.png",BGIMG_FILLFRAME);

La position de l'image est dtermin par la constante passe en second argument. Les diffrentes valeurs possibles sont :

CONSTANTE SIGNIFICATION
BGIMG_FILLPLOT L'image est place dans la zone du trac et non dans le conteneur. Elle est redimensionne au besoin
BGIMG_FILLFRAME L'image est place sur l'ensemble de l'image et est redimensionne au besoin
BGIMG_COPY L'image est place telle quelle, sans tre centre ni redimensionne
BGIMG_CENTER L'image est centre sur le graphique mais n'est pas redimensionne

Paramtrer l'anti-aliasing avec une couleur dominante permet d'viter la pixellisation (effet escalier) de la courbe trace (il faut penser spcifier une couleur proche de la couleur de fond) :

 
Sélectionnez
$graph->img->SetAntiAliasing("white");

Nous avons galement fait apparatre un quadrillage en fond du graphique (sur les deux axes) bleu pour l'axe des abscisses et rouge pour l'axe des ordonnes :

 
Sélectionnez
// Afficher la grille de l'axe des ordonnes
$graph->ygrid->Show();
// Fixer la couleur de l'axe (bleu avec transparence : @0.7)
$graph->ygrid->SetColor('blue@0.7');
// Des tirets pour les lignes
$graph->ygrid->SetLineStyle('dashed');

// Afficher la grille de l'axe des abscisses
$graph->xgrid->Show();
// Fixer la couleur de l'axe (rouge avec transparence : @0.7)
$graph->xgrid->SetColor('red@0.7');
// Des tirets pour les lignes
$graph->xgrid->SetLineStyle('dashed');

Comme vous pouvez le constater, nous avons chang l'apparence des points pour obtenir des ronds remplis de vert:

 
Sélectionnez
// Chaque point de la courbe ****
// Type de point
$courbe->mark->SetType(MARK_FILLEDCIRCLE);
// Couleur de remplissage
$courbe->mark->SetFillColor("green");
// Taille
$courbe->mark->SetWidth(5);

Enfin, pour chaque mois, nous avons affich une reprsentation textuelle (un tableau de 12 valeurs cres en dbut de script) pour l'axe des abscisses.

 
Sélectionnez
$moisFr = array('JAN', 'FEV', 'MAR', 'AVR', 'MAI', 'JUI', 'JUL', 'AOU', 'SEP', 'OCT', 'NOV', 'DEC');
...
$graph->xaxis->SetTickLabels($moisFr);

II-F. Graphique "histogrammes" groups

Image non disponible

Dans le mme esprit que le graphique type courbe, revenons aux histogrammes pour tudier une forme particulire : les histogrammes groups.

Comme son nom l'voque, ce type de graphique permet la reprsentation de plusieurs histogrammes groups dans le mme conteneur. Cela peut s'avrer trs utile lorsque l'on souhaite comparer diffrentes valeurs.

Nous allons de nouveau reprsenter le chiffre d'affaires pour l'ensemble des annes concernes (dans notre base de donnes) et non plus pour une anne donne.

Les donnes ne sont pas trs difficiles produire. En effet, une partie du travail a dj t effectue dans l'exemple prcdent (nous reprendrons une partie de ce travail en ajoutant une tape pour rcuprer les annes).

Rcapitulons ce dont nous avons besoin :
  1. Rcuprer les annes disponibles
  2. Pour chaque anne, rcuprer les valeurs de chaque mois
  3. Pour chaque mois, comptabiliser le chiffre d'affaires

Voici le code :

 
Sélectionnez
<?php

include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

// Tableau de donnes (annes et chiffre d'affaires)
$tableauAnnees = array();
$tableauNombreVentes = array();

// **********************
// Extraction des donnes
// **********************

// Les annes
$sql_annees = <<<EOF
SELECT YEAR( `DTHR_VENTE` ) AS ANNEE
FROM VENTES
GROUP BY ANNEE
EOF;

// Pour chaque anne rcuprer le chiffre d'affaires
$sql_ventes_par_mois = <<<EOF
SELECT  
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	COUNT( `ID` ) AS NOMBRE_VENTE, 
	SUM( `PRIX` ) AS PRODUIT_VENTE
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = %s 
GROUP BY MOIS
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql_annees, $mysqlCnx) or die('Pb de requte');

// Faire pour chaque anne
while ($row_annees = mysql_fetch_array($mysqlQuery, MYSQL_ASSOC)) {
	// Initialiser le tableau  0 pour chaques mois 
	$tableauVentesParAnnees[$row_annees['ANNEE']] = array(0,0,0,0,0,0,0,0,0,0,0,0); 
	
	// Rcuprer le chiffre d'affaires par mois de l'anne en cours
	$mysqlQuery2 = @mysql_query(sprintf($sql_ventes_par_mois, $row_annees['ANNEE']), $mysqlCnx) or die('Pb de requte');
	
	while ($row_mois = mysql_fetch_array($mysqlQuery2, MYSQL_ASSOC)) {
		$tableauVentesParAnnees[$row_annees['ANNEE']][$row_mois['MOIS']-1] = $row_mois['PRODUIT_VENTE']; 
	}
}

// **********************
// Cration du graphique 
// **********************

// Cration du graphique conteneur
$graph = new Graph(640,480,'auto');    

// Type d'chelle
$graph->SetScale("textlin");

// Fixer les marges
$graph->img->SetMargin(60,80,30,40);

// Positionner la lgende 
$graph->legend->Pos(0.02,0.05);

// Couleur de l'ombre et du fond de la lgende
$graph->legend->SetShadow('darkgray@0.5');
$graph->legend->SetFillColor('lightblue@0.3');

// Obtenir le mois (localisation fr possible ?)
$graph->xaxis->SetTickLabels($gDateLocale->GetShortMonth());

// Afficher une image de fond
$graph->SetBackgroundImage('images/R0011940.jpg',BGIMG_COPY);

// AXE X
$graph->xaxis->title->Set('Annes');
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetColor('black');
$graph->xaxis->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->SetColor('black');

// AXE Y
$graph->yaxis->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->SetColor('black');
$graph->ygrid->SetColor('black@0.5');

// TITRE: texte
$graph->title->Set("Chiffre d'affaires par anne");

// TITRE: marge et apparence
$graph->title->SetMargin(6);
$graph->title->SetFont(FF_ARIAL,FS_NORMAL,12);

// Couleurs et transparence par histogramme
$aColors=array('red@0.4', 'blue@0.4', 'green@0.4', 'pink@0.4', 'teal@0.4', 'navy@0.4');

$i=0;

// Chaque  histogramme est un lment du tableau:
$aGroupBarPlot = array();

foreach ($tableauVentesParAnnees as $key => $value) {
	$bplot = new BarPlot($tableauVentesParAnnees[$key]);
	$bplot->SetFillColor($aColors[$i++]);
	$bplot->SetLegend($key);
	$bplot->SetShadow('black@0.4');
	$aGroupBarPlot[] = $bplot; 
}

// Cration de l'objet qui regroupe nos histogrammes
$gbarplot = new GroupBarPlot($aGroupBarPlot);
$gbarplot->SetWidth(0.8);

// Ajouter au graphique
$graph->Add($gbarplot);

// Afficher
$graph->Stroke();
?>

Le graphique gnr :

Chiffre d'affaires par anne
Chiffre d'affaires par anne

La principale difficult de la cration de ce graphique rside dans la construction du groupement d'histogramme. En particulier, pour bien dcoupler production de donnes et cration du graphique, il a fallu crer une structure (ici un tableau associatif) susceptible de contenir les donnes produites.

Il faut galement que notre structure soit adapte la restitution des donnes effectue au moment de la mise en oeuvre du graphique.

La forme choisie est un tableau associatif qui possde pour cl chaque anne rcupre dans la base. A chaque anne correspond un tableau index de 12 valeurs (pour chacun des mois de l'anne). Ces valeurs reprsentent le chiffre d'affaires du mois concern.

Voici un aperu du tableau (obtenu avec la fonction print_r($tableau)) :

 
Sélectionnez
Array
(
    [2004] => Array
        (
            [0] => 1200
            [1] => 0
            [2] => 2500
            [3] => 0
            [4] => 600
            [5] => 200
            [6] => 170
            [7] => 0
            [8] => 0
            [9] => 0
            [10] => 2500
            [11] => 1000
        )
...
)

Revenons la cration des histogrammes groups:

 
Sélectionnez
// Chaque  histogramme est une lment du tableau:
$aGroupBarPlot = array();

// Parcourir les lments du tableau (2004, 2005...)
// A chaque anne correpond un tableau de mois
foreach ($tableauVentesParAnnees as $key => $value) {
	$bplot = new BarPlot($tableauVentesParAnnees[$key]);
	$bplot->SetFillColor($aColors[$i++]);
	$bplot->SetLegend($key);
	$bplot->SetShadow('black@0.4');
	$aGroupBarPlot[] = $bplot; 
}

Pour chaque anne (itration dans le foreach) est cr un objet BarPlot. Un paramtre est pass lors de la construction de l'objet. Ce paramtre est le tableau de valeurs correspondant l'anne courante.

 
Sélectionnez
$bplot = new BarPlot($tableauVentesParAnnees[$key]);

Chaque 'BarPlot' est paramtr : couleur de fond, lgende et ombre

 
Sélectionnez
$bplot->SetFillColor($aColors[$i++]);
$bplot->SetLegend($key);
$bplot->SetShadow('black@0.4');

Le BarPlot est ajout un conteneur que nous utiliserons juste aprs.

 
Sélectionnez
$aGroupBarPlot[] = $bplot; 

Enfin, la construction des histogrammes groups avec l'objet GroupBarPlot qui prend en argument le tableau qui contient tous nos BarPlot.

 
Sélectionnez
$gbarplot = new GroupBarPlot($aGroupBarPlot);

La cration d'un graphique histogrammes groups s'avre un peu plus difficile mais ne prsente pas d'obstacle majeurs.

II-G. Graphique "histogrammes" horizontaux

Image non disponible

Abordons maintenant le graphique de type histogrammes horizontaux.

Sa mise en oeuvre est rigoureusement identique celle du type graphique "histogramme" vertical.

Cette fois, nous allons reprsenter graphiquement la rpartition des ventes par chiffre d'affaires entre les diffrents types de produits depuis la premire vente.

Rappelons que nous avons trois types de produits disponibles dans notre table : les logiciels, le matriel et le service.

Pour chaque entre de la table ventes, le type de vente est spcifi. Nous allons nous appuyer sur ce champ pour grouper les rsultats en faisant, pour chaque type de vente, la somme du chiffre d'affaires.

Nous souhaitons galement faire apparatre les dates de la premire et de la dernire vente concernes. Pour cela, nous ferons une autre requte.

Voyons le script :

 
Sélectionnez
<?php

include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tabTypesProduits = array();
$tabChiffreAffaire = array();

// ***********************************
// Extraction des donnes dans la base
// ***********************************

// Chiffre d'affaires par produit
$sql_ventes_par_produits = <<<EOF
SELECT `TYPE_PRODUIT` , SUM( `PRIX` ) AS CHIFFRE_AFFAIRE
FROM ventes
GROUP BY `TYPE_PRODUIT`
EOF;

// Date premire vente et date dernire vente
$sql_max_and_min_date = <<<EOF
SELECT 
	DATE_FORMAT(MIN(`DTHR_VENTE`), '%d/%m/%Y') AS MIN_DATE,
	DATE_FORMAT(MAX(`DTHR_VENTE`), '%d/%m/%Y') AS MAX_DATE 
FROM VENTES
EOF;

// Connexion au serveur mysql
$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

// Slectionner la base de donnes "tuto_jp_graph"
@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

// Lancer la requte SQL
$mysqlQuery = @mysql_query($sql_max_and_min_date, $mysqlCnx) or die('Pb de requte: ' . mysql_error());

$row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC);

$min_date = $row['MIN_DATE']; 
$max_date = $row['MAX_DATE'];

// Lancer l'autre requte
$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requte: ' . mysql_error());

// Rcupration du rsultat
while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tabTypesProduits[] = $row['TYPE_PRODUIT'];
	$tabChiffreAffaire[] = $row['CHIFFRE_AFFAIRE'];
}

// **********************
// Cration du graphique 
// **********************

// Paramtres du graphique conteneur
$graph = new Graph(450,400,'auto');
$graph->SetScale("textlin");
$graph->SetShadow();

// Mise  90 degrs et marges
$graph->Set90AndMargin(70,30,90,30);

// Titre et sous-titre
$graph->title->Set("Rpartition des ventes par type de produit");
$graph->title->SetFont(FF_VERDANA,FS_BOLD,10);
$graph->subtitle->Set(sprintf("Entre le %s et le %s", $min_date, $max_date));

// Axe x  ********************************
$graph->xaxis->SetTickLabels($tabTypesProduits);
$graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL,10);
$graph->xgrid->Show(true,true);

// Marges pour les tiquettes
// Par rapport au bord droit du graphique
$graph->xaxis->SetLabelMargin(10);

// AXE y ********************************
// Echelle
$graph->yaxis->scale->SetGrace(20);
// Angle des tiquettes
$graph->yaxis->SetLabelAngle(45);
$graph->yaxis->SetLabelFormat('%d');
$graph->yaxis->SetFont(FF_VERDANA,FS_NORMAL,8);

// Cration d'une srie d'histogramme
$bplot = new BarPlot($tabChiffreAffaire);

// Alternance de couleur
$bplot->SetFillColor(array("green","red", "blue"));

// Ombres
$bplot->SetShadow();

// Epaisseur des histogrammes
$bplot->SetWidth(0.5);

// Valeurs de chaque histogramme
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD,12);
$bplot->value->SetColor("blue","darkred");
$bplot->value->SetFormat('%d Eur.');

// Ajouter au conteneur
$graph->Add($bplot);

// Afficher
$graph->Stroke();

?>

Voici le graphique gnr :

Chiffre d'affaires par catgorie
Chiffre d'affaires par catgorie

Pour la production de donnes (c'est--dire le chiffre d'affaires par type de produit), nous avons excut la requte suivante :

 
Sélectionnez
SELECT `TYPE_PRODUIT` , SUM( `PRIX` ) AS CHIFFRE_AFFAIRE
FROM ventes
GROUP BY `TYPE_PRODUIT`

Cette requte produit l'ensemble de donnes suivant :

Ensemble de donnes
Ensemble de donnes

Ces valeurs ont t places dans un tableau intermdiaire afin de fournir les donnes ncessaires la cration du graphique. Les types de produits seront utiliss pour afficher la lgende de l'axe des abscisses et les donnes serviront pour les diffrents histogrammes.

 
Sélectionnez
while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tabTypesProduits[] = $row['TYPE_PRODUIT'];
	$tabChiffreAffaire[] = $row['CHIFFRE_AFFAIRE'];
}

// Lgende pour l'axe des x
$graph->xaxis->SetTickLabels($tabTypesProduits);

// Cration d'une srie d'histogrammes
$bplot = new BarPlot($tabChiffreAffaire);

Concernant le paramtrage du graphique proprement dit, nous avons plac le graphique l'horizontale grce l'instruction suivante Set90AndMargin(...) :

 
Sélectionnez
$graph->Set90AndMargin(70,30,90,30);

Il a t possible d'ajouter un sous-titre pour indiquer les dates de premire et de dernire vente (subtitle->Set(...)) :

 
Sélectionnez
$graph->subtitle->Set(sprintf("Entre le %s et le %s", $min_date, $max_date));

Nous avons galement modifi l'chelle avec la mthode SetGrace(...) afin que les histogrammes laissent de la place chaque valeur correspondante.

 
Sélectionnez
$graph->yaxis->scale->SetGrace(20);

Vous pouvez remarquer que les valeurs illustrant les graduations en haut du graphique sont places 45 degrs en utilisant la mthode SetLabelAngle(45) :

 
Sélectionnez
$graph->yaxis->SetLabelAngle(45);

II-H. Graphique "histogrammes" et "courbe"

Image non disponible

Voyons maintenant la possibilit qu'offre JpGraph d'afficher deux graphiques dans le mme conteneur, en l'occurrence un graphique de type histogramme et un graphique de type courbe.

Pour cet exemple nous allons reprsenter pour l'anne 2006 :
  1. Le chiffre d'affaires par mois (histogrammes)
  2. Le nombre de ventes par mois (courbe)

La principale difficult que nous allons rencontrer est la cohabitation de deux graphiques qui n'ont pas la mme chelle.

Comme nous l'avons vu dans un des exemples prcdents, il est possible de rcuprer dans une requte les deux types de donnes ncessaires la production du graphique (chiffre d'affaires et nombre de ventes).

Le script :

 
Sélectionnez
<?php

include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");
include ("../jpgraph/jpgraph_line.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$volume_Ventes2006 = array();
$CA_Ventes2006 = array();
$maxVentes = 0;

// **********************
// Extraction des donnes
// **********************

$sql_ventes_par_produits = <<<EOF
SELECT 
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	COUNT( TYPE_PRODUIT ) AS VOLUME_VENTES, 
	SUM( PRIX ) AS PRODUIT_VENTES
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = 2006
GROUP BY MONTH( `DTHR_VENTE` ) 
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requte: ' . mysql_error());

// Initialisation des tableaux
for ($i=0;$i<=11;$i++) {
	$volume_Ventes2006[$i] = 0;
	$CA_Ventes2006[$i] = 0;	
}

// Rcupration des donnes
while ($row_type_produits = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) { 
	$volume_Ventes2006[$row_type_produits['MOIS']-1] = $row_type_produits['VOLUME_VENTES'];
	$CA_Ventes2006[$row_type_produits['MOIS']-1] = $row_type_produits['PRODUIT_VENTES'];
	
	// Rcuprer le maximum des ventes
	if ($maxVentes < $row_type_produits['VOLUME_VENTES']) $maxVentes = $row_type_produits['VOLUME_VENTES']; 
}

//printf('<pre>%s</pre>', print_r($volume_Ventes2006,1));exit;

// *********************
// Cration du graphique
// *********************

$graph = new Graph(640,480);    
$graph->SetScale("textlin");

$graph->SetMargin(50,40,20,40);

// Dsactiver le cadre autour du graphique
$graph->SetFrame(false);

// Ajouter un onglet
$graph->tabtitle->Set("Volume et chiffre d'affaire des ventes 2006");
$graph->tabtitle->SetFont(FF_ARIAL,FS_BOLD,10);

// Apparence des grilles
$graph->ygrid->SetFill(true,'#DDDDDD@0.5','#BBBBBB@0.5');
$graph->ygrid->SetLineStyle('dashed');
$graph->ygrid->SetColor('gray');
$graph->xgrid->Show();
$graph->xgrid->SetLineStyle('dashed');
$graph->xgrid->SetColor('gray');
$graph->xaxis->SetTickLabels($gDateLocale->GetShortMonth());
$graph->xaxis->SetFont(FF_ARIAL,FS_NORMAL,8);
$graph->xaxis->SetLabelAngle(45);

// *******************************
// Crer un graphique histogramme
// *******************************

$oHisto = new BarPlot($CA_Ventes2006);
$oHisto->SetWidth(0.6);
$oHisto->value->Show();
$oHisto->value->SetFormat('%d');

// dgrad de rouge vers noir  gauche
// Pour chaque barre
$oHisto->SetFillGradient('#440000', '#FF9090', GRAD_LEFT_REFLECTION);

// Bordure autour de chaque histogramme
$oHisto->SetWeight(1);

// Ajouter au graphique
$graph->Add($oHisto);

// ***********************
// Graphique courbe rempli
// ***********************

$oCourbe = new LinePlot($volume_Ventes2006);

// Couleur de remplissage avec transparence
$oCourbe->SetFillColor('skyblue@0.5');

// Couleur de la courbe
$oCourbe->SetColor('navy@0.7');
$oCourbe->SetBarCenter();

// Apparence des points
$oCourbe->mark->SetType(MARK_SQUARE);
$oCourbe->mark->SetColor('blue@0.5');
$oCourbe->mark->SetFillColor('lightblue');
$oCourbe->mark->SetSize(6);

// Affichage des valeurs
$oCourbe->value->Show();
$oCourbe->value->SetFormat('%d');

// Echelle des Y pour le nombre de ventes
$graph->SetYScale(0,'lin', 0, $maxVentes * 2);

$graph->xaxis->title->Set("Mois 2006");
$graph->yaxis->title->Set("Chiffre d'affaire");

// Ajouter un axe Y supplmentaire
$graph->AddY(0,$oCourbe);

// Couleur de l'axe Y supplmentaire
$graph->ynaxis[0]->SetColor('red');
$graph->ynaxis[0]->title->Set("Nombre de ventes");
// Envoyer au navigateur
$graph->Stroke();
?>

Le rsultat :

Anne 2006, chiffre d'affaires et nombre de ventes par mois
Anne 2006, chiffre d'affaires et nombre de ventes par mois

Pour produire les donnes ncessaires, nous avons repris une requte utilise plus haut dans le tutoriel :

 
Sélectionnez
SELECT 
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	COUNT( TYPE_PRODUIT ) AS VOLUME_VENTES, 
	SUM( PRIX ) AS PRODUIT_VENTES
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = 2006
GROUP BY MONTH( `DTHR_VENTE` )

Nous obtenons les donnes suivantes :

Ensemble de donnes
Ensemble de donnes

On trouve dans cet ensemble de donnes tout ce dont on a besoin : le mois, le volume et le chiffre d'affaires des ventes.

Pour la mise en oeuvre du graphique, vous pouvez constater que nous avons dsactiv l'affichage du cadre avec la mthode SetFrame(false) :

 
Sélectionnez
$graph->SetFrame(false);

Enlever le cadre nous permet aussi d'ajouter un onglet au graphique et de le personnaliser :

 
Sélectionnez
$graph->tabtitle->Set('Volume et chiffre d\'affaire des ventes 2006');
$graph->tabtitle->SetFont(FF_ARIAL,FS_BOLD,10);

Le graphique histogramme a t cr et ajout au conteneur comme dans les exemples prcdents.

En revanche, l'ajout au graphique de la courbe est quelque peu diffrent de ce que l'on a eu l'occasion de voir.

On utilise la mthode addY($donnes) :

 
Sélectionnez
// Ajouter un axe Y supplmentaire
$graph->AddY(0,$oCourbe);

L'utilisation de cette mthode permet la cration d'une autre axe des ordonnes (y) et d'ajouter un autre graphique dans le mme conteneur.

Il est possible d'avoir spcifier une autre chelle pour les graphiques ajouts. Cela dpend de l'aspect final. Ici, c'est ce que nous avons fait pour des raisons esthtiques, le graphique courbe recouvrant l'autre graphique.

Dans notre cas de figure, il est possible de changer l'chelle avec la mthode SetYScale() :

 
Sélectionnez
// Echelle des Y pour le nombre de ventes
$graph->SetYScale(0,'lin', 0, $maxVentes * 2);

Cette mthode prend 4 arguments :

Numro d'argument Signification
Arg 1 Indice de l'axe
Arg 2 Type de l'axe (linaire ou logarithmique)
Arg 3 Valeur min
Arg 4 Valeur max

Pour un affichage harmonieux dans le contexte, le nombre de ventes maximum pour un mois a t multipli par deux. Cela a eu l'effet recherch : aplatir le graphique.

Pour finir, l'axe nouvellement cr peut, lui aussi, tre personnalis (couleur et titre) :

 
Sélectionnez
// Couleur de l'axe Y supplmentaire
$graph->ynaxis[0]->SetColor('red');
$graph->ynaxis[0]->title->Set("Nombre de ventes");

II-I. Graphique "histogrammes" accumuls

Image non disponible

Une autre caractristique du graphique type histogramme est la possibilit de reprsenter un histogramme contenant n partie : les histogrammes accumuls. Autre caractristique du graphique type histogramme: la possibilit de reprsenter un histogramme contenant n parties: les histogrammes accumuls.

Pour illustrer cet exemple, nous allons reprendre la reprsentation du chiffre d'affaires 2006 par mois. Mais cette fois-ci, nous ajouterons une information supplmentaire, savoir le chiffre d'affaires gnr pour chaque type de produits.

Par consquent, nous aurons pour chaque mois un histogramme qui reprsente le chiffre d'affaire pour tous les types de produits. L'histogramme sera dcompos en parts qui reprsenteront le chiffre d'affaires gnr pour chaque produit.

En voici un exemple pour le mois de janvier 2006 avec en vert le C.A. matriel, en rouge le C.A. logiciel et en bleu le C.A. services :

Image non disponible

La production de donnes est un peu particulire puisqu'il va nous falloir obtenir 3 ensembles de valeurs, le C.A. pour le matriel, pour le logiciel et pour le service de chaque mois.

Ensuite, comme nous allons le voir dans la mise en oeuvre du graphique, il suffira de crer un ensemble d'histogrammes pour chaque type de produit et de produire un ensemble d'histogrammes accumuls partir des histogrammes prcdemment crs.

Voici le script :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_bar.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tab_service = array();
$tab_logiciel = array();
$tab_materiel = array();
$moisFr = array('JAN', 'FEV', 'MAR', 'AVR', 'MAI', 'JUI', 'JUL', 'AOU', 'SEP', 'OCT', 'NOV', 'DEC');

// **********************
// Extraction des donnes
// **********************

$sql_ventes_par_produits = <<<EOF
SELECT 
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	UCASE( TYPE_PRODUIT ) AS TYPE_PRODUIT, 
	SUM( PRIX ) AS CHIFFRE_AFFAIRES
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = 2006
GROUP BY MOIS, TYPE_PRODUIT
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requte: ' . mysql_error());

// initialiser les tableaux
for ($i=0;$i<12;$i++) {
	$tab_service[$i] = 0;
	$tab_logiciel[$i] = 0;
	$tab_materiel[$i] = 0;
}

// remplir les tableaux
while ($row_type_produits = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) { 
	if ($row_type_produits['TYPE_PRODUIT'] == 'SERVICE') $tab_service[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
	if ($row_type_produits['TYPE_PRODUIT'] == 'MATERIEL') $tab_materiel[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
	if ($row_type_produits['TYPE_PRODUIT'] == 'LOGICIEL') $tab_logiciel[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
}


// **********************
// Cration du graphique 
// **********************
$graph = new Graph(640,480,"auto");    
$graph->SetScale("textlin");
$graph->SetShadow();
$graph->img->SetMargin(60,40,50,40);
$graph->SetMarginColor('#CCCCFF');
$graph->title->Set("Rpartition du chiffre d'affaires 2006 par type de vente");
$graph->title->SetMargin(20);
$graph->title->SetFont(FF_COMIC,FS_BOLD,12);

// Crer les ensembles d'histogrammes
$histo_service = new BarPlot($tab_service);
$histo_service->SetFillGradient('blue', '#9090FF', GRAD_VER);
$histo_service->SetLegend('Service');
$histo_service->value->Show();
$histo_service->value->SetFont(FF_ARIAL, FS_NORMAL,7);
$histo_service->value->SetColor('black');
$histo_service->value->SetFormat('%d');

$histo_logiciel = new BarPlot($tab_logiciel);
$histo_logiciel->SetFillGradient('red', '#FF9090', GRAD_VER);
$histo_logiciel->SetLegend('Logiciel');
$histo_logiciel->value->Show();
$histo_logiciel->value->SetFont(FF_ARIAL, FS_NORMAL,7);
$histo_logiciel->value->SetColor('black');
$histo_logiciel->value->SetFormat('%d');

$histo_materiel = new BarPlot($tab_materiel);
$histo_materiel->SetFillGradient('green', '#90FF90', GRAD_VER);
$histo_materiel->SetLegend('Matriel');
$histo_materiel->value->Show();
$histo_materiel->value->SetFont(FF_ARIAL, FS_NORMAL,7);
$histo_materiel->value->SetColor('black');
$histo_materiel->value->SetFormat('%d');

// Crer l'ensemble d'histogrammes accumuls
$gbplot = new AccBarPlot(array($histo_service, $histo_logiciel, $histo_materiel));

// Afficher les valeurs de chaque histogramme group
$gbplot->value->Show();
$gbplot->value->SetFont(FF_COMIC,FS_NORMAL,8);
$gbplot->value->SetFormat('%d');

// Position de la lgende
$graph->legend->Pos(0.12,0.12,"left","top");

// Ajouter l'ensemble accumul
$graph->Add($gbplot);

// Paramtrer les axes X et Y
$graph->yaxis->title->Set("Chiffre d'affaires");
$graph->yaxis->title->SetMargin(20);
$graph->yaxis->title->SetFont(FF_COMIC,FS_BOLD);

$graph->xaxis->title->Set("Mois");
$graph->xaxis->SetTickLabels($moisFr);
$graph->xaxis->title->SetMargin(4);
$graph->xaxis->title->SetFont(FF_COMIC,FS_BOLD);

// Afficher l'image gnre
$graph->Stroke();
?>

Le graphique gnr :

Image non disponible

Revenons la production des donnes ncessaires la cration du graphique.

Dans notre exemple, il a t fait le choix de faire une seule requte pour extraire toutes les informations ncessaires. Nous aurions tout aussi bien pu effectuer une requte par type de produit (matriel, logiciel et service).

La requte produite retourne pour chaque mois (de l'anne 2006) le chiffre d'affaires des diffrents types de produits. Cela donne l'ensemble de donnes suivant (aperu des les 4 premiers mois) :

Image non disponible

La seconde tape est de sparer les donnes pour crer un tableau par type de produit :

 
Sélectionnez
$tab_service = array();
$tab_logiciel = array();
$tab_materiel = array();

...

// initialiser les tableaux
for ($i=0;$i<12;$i++) {
	$tab_service[$i] = 0;
	$tab_logiciel[$i] = 0;
	$tab_materiel[$i] = 0;
}

// remplir les tableaux
while ($row_type_produits = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) { 
	if ($row_type_produits['TYPE_PRODUIT'] == 'SERVICE') $tab_service[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
	if ($row_type_produits['TYPE_PRODUIT'] == 'MATERIEL') $tab_materiel[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
	if ($row_type_produits['TYPE_PRODUIT'] == 'LOGICIEL') $tab_logiciel[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
}

La couleur du fond a t personnalise en utilisant la mthode SetMarginColor() :

 
Sélectionnez
$graph->SetMarginColor('#CCCCFF');

Chaque histogramme (matriel, logiciel et service) a t produit en crant un objet BarPlot en prenant comme argument les ensembles de donnes correspondants :

 
Sélectionnez
$histo_service = new BarPlot($tab_service);

Aprs avoir gnr les histogrammes par type de produits, nous les avons regroups en crant une instance de l'objet AccBarPlot, lui-mme prenant en argument un tableau des histogrammes tout justes produits.

 
Sélectionnez
// Crer l'ensemble d'histogrammes accumuls
$gbplot = new AccBarPlot(array($histo_service, $histo_logiciel, $histo_materiel));

La position par dfaut de la lgende ne convenait pas (elle recouvrait un des histogrammes). La mthode Pos() a permis de dplacer la lgende gauche.

 
Sélectionnez
$graph->legend->Pos(0.12,0.12,"left","top");

II-J. Graphique "radar"

Image non disponible

Voyons un autre type de graphique : le graphique de type radar. Les valeurs passes ce graphique sont reprsentes par des points placs circulairement autour d'un point central. A chaque valeur correspond un axe.

Reprenons le dernier cas vu, savoir la rpartition du chiffre d'affaires 2006 par type de vente. Nous ne nous attacherons qu' la vente de matriel.

La production de donnes ne pose pas de problme, car le code source est quasiment le mme que celui que l'on a vu plus haut.

La mise en oeuvre du graphique ne prsente pas non plus de difficult particulire.

Le code :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_radar.php");
include ("../jpgraph/jpgraph_log.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');

$tab_materiel = array();
$moisFr = array('JAN', 'FEV', 'MAR', 'AVR', 'MAI', 'JUI', 'JUL', 'AOU', 'SEP', 'OCT', 'NOV', 'DEC');

// **********************
// Extraction des donnes
// **********************

$sql_ventes_par_produits = <<<EOF
SELECT 
	MONTH( `DTHR_VENTE` ) AS MOIS, 
	UCASE( TYPE_PRODUIT ) AS TYPE_PRODUIT, 
	SUM( PRIX ) AS CHIFFRE_AFFAIRES
FROM VENTES
WHERE YEAR( `DTHR_VENTE` ) = 2006 
	AND 
	TYPE_PRODUIT = 'MATERIEL'
GROUP BY MOIS, TYPE_PRODUIT
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requte : ' . mysql_error());

// initialiser le tableau
for ($i=0;$i<12;$i++) {
	$tab_materiel[$i] = 0;
}

// remplir le tableau
while ($row_type_produits = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) { 
	if ($row_type_produits['TYPE_PRODUIT'] == 'MATERIEL') $tab_materiel[$row_type_produits['MOIS']-1] = $row_type_produits['CHIFFRE_AFFAIRES'];
}

// printf('<pre>%s</pre>', print_r($tab_materiel,1));exit;

// *********************
// Cration du graphique
// *********************

// Cration du conteneur type radar
$graph = new RadarGraph (640,480,"auto"); 

// Paramtrage de l'apparence du grahique
$graph->title->Set("C.A. des ventes de matriel 2006");
$graph->title->SetFont(FF_VERDANA,FS_NORMAL,12);
$graph->SetTitles($moisFr);

// Position du graphique par rapport au centre
$graph->SetCenter(0.35,0.55);
// Cacher les marques
$graph->HideTickMarks();
// Couleur de fond
$graph->SetColor('#cccccc@0.3');
$graph->axis->SetColor('blue@0.5'); 
$graph->grid->SetColor('blue@0.5');
$graph->grid->Show();
$graph->axis->title->SetFont(FF_ARIAL,FS_NORMAL,10);
$graph->axis->title->SetMargin(5);

// Crer les points
$plot1 = new RadarPlot($tab_materiel);
// Couleur de la ligne
$plot1->SetColor('red');
// Epaisseur de la ligne qui relie les points
$plot1->SetLineWeight(1);
// Couleur de remplissage
$plot1->SetFillColor('red@0.8');
// Apparence des points
$plot1->mark->SetType(MARK_SQUARE);

// Ajouter les points au graphique
$graph->Add($plot1);

$graph->Stroke();

?>

Voici l'image produite :

Graphique radar : Chiffres d'affaires des ventes 2006
Graphique radar : Chiffres d'affaires des ventes 2006

Comme je le disais, pas grand chose de nouveau pour la mise en oeuvre, la plupart des instructions ncessaires la cration du graphique ayant t dj vues dans les exemples prcdents.

En revanche, le graphique produit ne me convient pas. Les points sont placs conformment aux donnes que j'ai passes, mais j'aurais souhait un affichage plus 'liss' de mes donnes.

JpGraph permet la reprsentation logarithmique d'un graphique, ce qui va nous tre trs utile.

Pour cela, nous utiliserons la mthode SetScale('log') (changement du type de l'chelle) de l'objet cr lors de la construction du graphique :

 
Sélectionnez
// Cration du conteneur type radar
$graph = new RadarGraph (480,480,"auto"); 

// Reprsentation logarithmique
// Permet le lissage en changeant l'chelle
$graph->SetScale("log");

Petite prcision : l'chelle par dfaut est 'lin' comme linear, c'est dire linaire (ce qui tait le cas dans le graphique initialement cr).

Voici le rsultat :

Graphique radar : Chiffre d'affaires des ventes 2006 (reprsentation logarithmique)
Graphique radar : Chiffre d'affaires des ventes 2006 (reprsentation logarithmique)

En changeant l'chelle, nous avons pu modifier l'apparence du graphique sans pour autant modifier les diffrentes valeurs.


prcdentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2007 eric190. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.