Découverte de la bibliothèque Php JpGraph

D�couverte de la librairie Php JpGraph

II. Pr�sentation des principaux graphiques▲

Pour les exemples, nous utiliserons les donn�es fictives d'une entreprise intitul�e � maPetiteEntreprise.com �. Imaginons que l'activit� de cette entreprise est la vente de mat�riel, de logiciel ainsi que de services.

Voici un aper�u des diff�rents graphiques de ce chapitre (histoire de vous mettre l'eau � la bouche...) :

Aper�u	Type de graphique	Description
	Secteur	Nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...)
	Secteur 3D	Nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...)
	Histogrammes	Nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...)
	Courbe	Chiffre d'affaires de l'ann�e 2006 par mois
	Histogrammes group�s	Chiffre d'affaires par mois et par ann�es sur les diff�rents exercices (2004, 2005 ...)
	Histogrammes horizontaux	r�partition des ventes par chiffre d'affaires entre les diff�rents types de produits depuis la premi�re vente
	Histogrammes et courbe	Chiffre d'affaires et unit�s vendues pour l'ann�e 2006
	Histogrammes accumul�s	Chiffre d'affaires 2006 avec r�partition du type de vente
	Radar	Chiffre d'affaires de l'ann�e 2006

II-A. Pr�sentation des donn�es utilis�es▲

Les donn�es sont stock�es dans une base Mysql (la base tutoJpGraph) et dans une table � ventes � qui repr�sente l'ensemble des prestations effectu�es par la soci�t� entre 2004 et 2006. Pour plus de clart� et de simplicit� dans les exemples, j'ai fait le choix de regrouper ces donn�es 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 t�l�charger le fichier Sql de la base utilis�e pour cet article. L'import des donn�es pourra �tre r�alis� � l'aide de l'outil de votre choix (phpMyAdmin, mysql query browser ou autre...).

Le script comprend la cr�ation de la base de donn�es 'tuto_jp_graph', la cr�ation de la table 'ventes' ainsi que l'insertion d'une centaine d'enregistrements.

Dans les exemples, ces m�mes param�tres sont repris (nom de la base et nom de la table).

Base de donn�es tuto_jpgraph et table des ventes

II-B. Graphique "secteur"▲

Nous allons voir comment r�aliser un graphique type secteur (appel� �galement graphique camembert).
Les donn�es repr�sent�es graphiquement sont le nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 et 2006).

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

Ce dont nous avons besoin pour produire les donn�es :

Il faut d'abord r�cup�rer les donn�es, ce que nous allons faire � l'aide d'une requ�te Sql.
Les donn�es � r�cup�rer sont : Le nombre de ventes par ann�e Les ann�es correspondantes
Sachant que JpGraph attend un tableau de donn�es, nous allons int�grer ces valeurs dans deux tableaux qui vont respectivement repr�senter le nombre de ventes et les ann�es concern�es (2004, 2005, 2006).
Extraire de la table des ventes les diff�rentes ann�es nous permettra ensuite d'ajouter une l�gende � 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 cr�ation du graphique :

Cr�er un objet qui repr�sente le type de graphique que nous souhaitons obtenir (ici un PieGraph).
Renseigner diff�rentes propri�t�s du graphique, comme les donn�es n�cessaires � sa repr�sentation, les l�gendes, la position du graphique dans son conteneur et bien d'autres param�tres dont nous aurons un aper�u au cours de cet article.
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 donn�es destin�es � JpGraph
$tableauAnnees = array();
$tableauNombreVentes = array();

// ********************************************************************
// PARTIE : Production des donn�es 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');

// S�lection de la base de donn�es
@mysql_select_db(MYSQL_DATABASE) or die('Pb de s�lection de la base');

// Requ�te
$mysqlQuery = @mysql_query($sql, $mysqlCnx) or die('Pb de requ�te');

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

// ********************************************************************
// PARTIE : Cr�ation du graphique 
// ********************************************************************

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

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

// Cr�er un graphique secteur (classe PiePlot)
$oPie = new PiePlot($tableauNombreVentes);

// L�gendes qui accompagnent chaque secteur, ici chaque ann�e
$oPie->SetLegends($tableauAnnees);

// position du graphique (l�g�rement � 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 g�n�r�e :

Graphique secteur : nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...)

Quelques mots concernant la production du graphique :

Comme nous l'avons vu au tout d�but du script PHP, il est n�cessaire d'inclure le coeur de la librairie JpGraph ainsi que la librairie n�cessaire � la production du graphique voulu. Dans le cas pr�sent, 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 cr�er notre graphique, nous avons utilis� le constructeur de la classe PieGraph (elle-m�me une extension de la classe Graph). Les arguments que nous avons pass�s 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.

Apr�s avoir effectu� quelques param�trages, nous passons � la cr�ation du secteur proprement dit :

Sélectionnez

$oPie = new PiePlot($tableauNombreVentes);

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

L� encore, nous allons effectuer quelques param�trages, comme la l�gende et la position du graphique.

Sélectionnez

// L�gendes qui accompagnent chaque secteur (ici chaque ann�e)
$oPie->SetLegends($tableauAnnees);

// position du graphique (l�g�rement � droite)
$oPie->SetCenter(0.4);

Il est �galement possible de sp�cifier la fa�on dont les valeurs de chaque part sont restitu�es, soit de fa�on absolue (comme c'est le cas dans notre exemple) soit de fa�on proportionnelle, avec un pourcentage pour chaque part.

Nous avons choisi la repr�sentation absolue. Pour cela, on utilise la m�thode SetValueType() et on passe en argument la constante correspondante.

Sélectionnez

$oPie->SetValueType(PIE_VALUE_ABS);

La m�thode SetFormat('format') permet de formater les valeurs en les repr�sentant sous divers formats comme entier ou flottant, mais aussi d'accompagner les valeurs d'une cha�ne (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 m�thode Stroke() provoque l'affichage du graphique.

Sélectionnez


$graph->Stroke();

Cette m�thode 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 n�anmoins qu'il est tout � fait possible de cr�er une image sur disque dur si cette m�thode ne vous convient pas. Le format par d�faut pour l'image produite par d�faut est Png

II-C. Graphique "secteur 3D"▲

Dans cet exemple, l'objectif est de cr�er le m�me type de graphique et d'en personnaliser l'affichage. Pour m�moire il s'agit du nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...).

Nous allons donc reprendre les donn�es utilis�es pr�c�demment (je ne m'attarderai pas sur la partie PHP, dans laquelle on effectue la r�cup�ration des donn�es).

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 donn�es dans la base de donn�es 
// **************************************************

$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 s�lection de la base');

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

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

// **************************************
// Cr�ation du graphique
// *****************************************

// On sp�cifie 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 ann�es 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);

// Cr�er un camembert 
$pie = new PiePlot3D($tableauNombreVentes);

// Quelle partie se d�tache du reste
$pie->ExplodeSlice(2);

// Sp�cifier des couleurs personnalis�es... #FF0000 ok
$pie->SetSliceColors(array('red', 'blue', 'green'));

// L�gendes qui accompagnent le graphique, ici chaque ann�e 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 :

Quelques modifications du script initial nous ont permis de personnaliser notre graphique. Revenons sur les diff�rentes instructions utilis�es pour cela :

Fichiers n�cessaires � la r�alisation du graphique :

Sélectionnez

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

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

Sélectionnez

$graph->SetShadow();

Ensuite, nous avons sp�cifi� la police, le style et la taille avec la m�thode SetFont() :

Sélectionnez

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

Pour la cr�ation de l'objet repr�sentant notre graphique en 3D, nous avons fait appel � un constructeur diff�rent, rendu possible gr�ce � l'inclusion du fichier jpgraph_pie3d.php.

Sélectionnez

$pie = new PiePlot3D($tableauNombreVentes);

L'effet de s�paration d'une des parties du graphique a pu �tre r�alis� � l'aide de la m�thode 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 m�thode SetSliceColors(), qui prend comme argument un tableau index� de cha�nes de caract�res (les diff�rentes couleurs).

Sélectionnez

// Sp�cifier des couleurs personnalis�es... #FF0000 ok
$pie->SetSliceColors(array('red', 'blue', 'green'));

Les couleurs peuvent �galement �tre d�finies en RGB, notation utilis�e en Html, par exemple : #FF0000 pour du rouge

Il est �galement possible de param�trer la position du graphique, gr�ce � la m�thode SetCenter(). Une valeur de 0.5 correspond � un centrage par rapport au conteneur. Plus la valeur est �lev�e, plus le graphique est d�cal� � droite (et inversement). Dans l'exemple, le graphique est l�g�rement d�centr� � gauche pour laisser de la place � la l�gende.

Sélectionnez

$pie->SetCenter(0.4);

JpGraph permet enfin de personnaliser les valeurs pr�sent�es, puisque nous avons pu sp�cifier 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"▲

Apr�s avoir �tudi� le graphique secteur (ou camembert), voyons maintenant le graphique de type histogramme. Cette sorte de graphique est nomm�e 'Bar' dans la librairie JpGraph.

Pour cr�er un graphique de ce type, il faut, en plus de l'inclusion de la librairie de base de JpGraph (fichier jpgraph.php), proc�der � l'inclusion du fichier jpgraph_bar.php.

Reprenons le cas pr�c�dent : nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...).

Le graphique en histogramme pr�sente les chiffres sous forme de barres verticales (ou horizontales). Dans notre exemple, chaque histogramme repr�sente le nombre de ventes effectu�es pour une ann�e.
Pour ce qui est de la production de donn�es, 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 donn�es dans la base de donn�es
// *************************************************

$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 s�lection de la base');

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

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

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

// *******************
// Cr�ation du graphique
// *******************


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

// R�pr�sentation lin�aire
$graph->SetScale("textlin");

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

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

// Cr�ation du graphique histogramme
$bplot = new BarPlot($tableauNombreVentes);

// Sp�cification 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 ann�es");
$graph->title->SetFont(FF_FONT1,FS_BOLD);

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

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

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

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

?>

Inclusion des fichiers n�cessaires � la r�alisation d'un graphique histogramme :

Sélectionnez

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

Le r�sultat :

Nombre d'unit�s vendues sur les diff�rents exercices (2004, 2005 ...)

Apr�s avoir cr�� notre conteneur comme dans les autres exemples, nous devons fixer la repr�sentation souhait�e pour l'�chelle avec la m�thode SetScale(), logarithmique (log) ou bien lin�aire. Pour l'heure, nous choisirons la repr�sentation lin�aire (la repr�sentation logarithmique sera abord�e � la fin du chapitre).

Sélectionnez

$graph->SetScale("textlin");

La construction du graphique proprement dit passe par la cr�ation d'un objet de type BarPlot. Le constructeur prend comme argument un tableau de valeurs enti�res.

Sélectionnez

// Cr�ation du graphique histogramme
$bplot = new BarPlot($tableauNombreVentes);

La m�thode 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 m�thode Add()

Sélectionnez

$graph->Add($bplot);

Il est �galement possible de sp�cifier des l�gendes pour les deux axes : x pour l'axe horizontal et y pour l'axe vertical.

Sélectionnez

$graph->xaxis->title->Set("Ann�es");
$graph->yaxis->title->Set("Nombre de ventes");

Enfin, la m�thode SetTickLabels() permet de personnaliser les valeurs de l�gende d'un axe (dans notre exemple, les diff�rentes ann�es). Un tableau index� des valeurs correspondantes est n�cessaire en argument.

Sélectionnez

$graph->xaxis->SetTickLabels($tableauAnnees);

II-E. Graphique "courbe"▲

Passons maintenant aux choses s�rieuses, en abordant un type de graphique que l'on rencontre tr�s fr�quemment : le graphique de type courbe. Ce type de graphique, constitu� de points reli�s entre eux est particuli�rement appropri� pour repr�senter une progression.

Nous allons repr�senter le chiffre d'affaires de l'ann�e 2006 (toutes cat�gories confondues).

La production des donn�es s'av�re un petit peu plus difficile � r�aliser cette fois puisque nous souhaitons :

R�cup�rer les ventes de l'ann�e 2006
Comptabiliser le chiffre d'affaires g�n�r� par mois

Il nous faudra aussi cr�er la requ�te Sql appropri�e.

Une fois la production de donn�es effectu�e, le reste ne pr�sente pas de difficult� particuli�re.

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 donn�es
// *********************

$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 s�lection 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 requ�te');

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

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

// ***********************
// Cr�ation du graphique
// ***********************

// Cr�ation 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 d�tailler
$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 ordonn�es
$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);

// Cr�er 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();

// Param�trage 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 :

Revenons � la production de donn�es.

Il a fallu concevoir une requ�te susceptible de r�cup�rer les ventes d'une ann�e donn�e (ici 2006), et de les regrouper par mois.

La requ�te 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 aper�u de l'ensemble de donn�es g�n�r� :

Il a �galement �t� n�cessaire de trouver une astuce permettant de pr�voir 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 z�ro. Lors de la r�cup�ration, les donn�es (chiffre d'affaires et nombre de ventes) sont affect�es 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 cr�ation d'une courbe se fait � l'aide du constructeur LinePlot($donnees), qui prend en argument un ensemble de donn�es (un tableau index�), ici notre chiffre d'affaires par mois pour l'ann�e 2006

Sélectionnez

$courbe = new LinePlot($tableauVentes2006);

Une image a �t� ajout�e en fond avec la m�thode SetBackgroundImage() :

Sélectionnez

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

La position de l'image est d�termin� par la constante pass�e en second argument. Les diff�rentes valeurs possibles sont :

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

Param�trer l'anti-aliasing avec une couleur dominante permet d'�viter la pixellisation (effet escalier) de la courbe trac�e (il faut penser � sp�cifier une couleur proche de la couleur de fond) :

Sélectionnez

$graph->img->SetAntiAliasing("white");

Nous avons �galement fait appara�tre un quadrillage en fond du graphique (sur les deux axes) bleu pour l'axe des abscisses et rouge pour l'axe des ordonn�es :

Sélectionnez

// Afficher la grille de l'axe des ordonn�es
$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 repr�sentation textuelle (un tableau de 12 valeurs cr�es en d�but 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" group�s▲

Dans le m�me esprit que le graphique type courbe, revenons aux histogrammes pour �tudier une forme particuli�re : les histogrammes group�s.

Comme son nom l'�voque, ce type de graphique permet la repr�sentation de plusieurs histogrammes group�s dans le m�me conteneur. Cela peut s'av�rer tr�s utile lorsque l'on souhaite comparer diff�rentes valeurs.

Nous allons de nouveau repr�senter le chiffre d'affaires pour l'ensemble des ann�es concern�es (dans notre base de donn�es) et non plus pour une ann�e donn�e.

Les donn�es ne sont pas tr�s difficiles � produire. En effet, une partie du travail a d�j� �t� effectu�e dans l'exemple pr�c�dent (nous reprendrons une partie de ce travail en ajoutant une �tape pour r�cup�rer les ann�es).

R�capitulons ce dont nous avons besoin :

R�cup�rer les ann�es disponibles
Pour chaque ann�e, r�cup�rer les valeurs de chaque mois
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 donn�es (ann�es et chiffre d'affaires)
$tableauAnnees = array();
$tableauNombreVentes = array();

// **********************
// Extraction des donn�es
// **********************

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

// Pour chaque ann�e r�cup�rer 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 s�lection de la base');

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

// Faire pour chaque ann�e
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); 
	
	// R�cup�rer le chiffre d'affaires par mois de l'ann�e en cours
	$mysqlQuery2 = @mysql_query(sprintf($sql_ventes_par_mois, $row_annees['ANNEE']), $mysqlCnx) or die('Pb de requ�te');
	
	while ($row_mois = mysql_fetch_array($mysqlQuery2, MYSQL_ASSOC)) {
		$tableauVentesParAnnees[$row_annees['ANNEE']][$row_mois['MOIS']-1] = $row_mois['PRODUIT_VENTE']; 
	}
}

// **********************
// Cr�ation du graphique 
// **********************

// Cr�ation 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 l�gende 
$graph->legend->Pos(0.02,0.05);

// Couleur de l'ombre et du fond de la l�gende
$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('Ann�es');
$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 ann�e");

// 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 �l�ment 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; 
}

// Cr�ation 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 g�n�r� :

La principale difficult� de la cr�ation de ce graphique r�side dans la construction du groupement d'histogramme. En particulier, pour bien d�coupler production de donn�es et cr�ation du graphique, il a fallu cr�er une structure (ici un tableau associatif) susceptible de contenir les donn�es produites.

Il faut �galement que notre structure soit adapt�e � la restitution des donn�es effectu�e au moment de la mise en oeuvre du graphique.

La forme choisie est un tableau associatif qui poss�de pour cl� chaque ann�e r�cup�r�e dans la base. A chaque ann�e correspond un tableau index� de 12 valeurs (pour chacun des mois de l'ann�e). Ces valeurs repr�sentent le chiffre d'affaires du mois concern�.

Voici un aper�u 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 cr�ation des histogrammes group�s:

Sélectionnez

// Chaque  histogramme est une �l�ment du tableau:
$aGroupBarPlot = array();

// Parcourir les �l�ments du tableau (2004, 2005...)
// A chaque ann�e 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 ann�e (it�ration dans le foreach) est cr�� un objet BarPlot. Un param�tre est pass� lors de la construction de l'objet. Ce param�tre est le tableau de valeurs correspondant � l'ann�e courante.

Sélectionnez

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

Chaque 'BarPlot' est param�tr� : couleur de fond, l�gende 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 apr�s.

Sélectionnez

$aGroupBarPlot[] = $bplot;

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

Sélectionnez

$gbarplot = new GroupBarPlot($aGroupBarPlot);

La cr�ation d'un graphique histogrammes group�s s'av�re un peu plus difficile mais ne pr�sente pas d'obstacle majeurs.

II-G. Graphique "histogrammes" horizontaux▲

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 repr�senter graphiquement la r�partition des ventes par chiffre d'affaires entre les diff�rents types de produits depuis la premi�re vente.

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

Pour chaque entr�e de la table ventes, le type de vente est sp�cifi�. Nous allons nous appuyer sur ce champ pour grouper les r�sultats en faisant, pour chaque type de vente, la somme du chiffre d'affaires.

Nous souhaitons �galement faire appara�tre les dates de la premi�re et de la derni�re vente concern�es. Pour cela, nous ferons une autre requ�te.

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 donn�es 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 premi�re vente et date derni�re 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');

// S�lectionner la base de donn�es "tuto_jp_graph"
@mysql_select_db(MYSQL_DATABASE) or die('Pb de s�lection de la base');

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

$row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC);

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

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

// R�cup�ration du r�sultat
while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tabTypesProduits[] = $row['TYPE_PRODUIT'];
	$tabChiffreAffaire[] = $row['CHIFFRE_AFFAIRE'];
}

// **********************
// Cr�ation du graphique 
// **********************

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

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

// Titre et sous-titre
$graph->title->Set("R�partition 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);

// Cr�ation d'une s�rie 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 g�n�r� :

Pour la production de donn�es (c'est-�-dire le chiffre d'affaires par type de produit), nous avons ex�cut� la requ�te suivante :

Sélectionnez

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

Cette requ�te produit l'ensemble de donn�es suivant :

Ces valeurs ont �t� plac�es dans un tableau interm�diaire afin de fournir les donn�es n�cessaires � la cr�ation du graphique. Les types de produits seront utilis�s pour afficher la l�gende de l'axe des abscisses et les donn�es serviront pour les diff�rents histogrammes.

Sélectionnez

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

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

// Cr�ation d'une s�rie d'histogrammes
$bplot = new BarPlot($tabChiffreAffaire);

Concernant le param�trage du graphique proprement dit, nous avons plac� le graphique � l'horizontale gr�ce � 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 premi�re et de derni�re 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 m�thode 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 plac�es � 45 degr�s en utilisant la m�thode SetLabelAngle(45) :

Sélectionnez

$graph->yaxis->SetLabelAngle(45);

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

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

Pour cet exemple nous allons repr�senter pour l'ann�e 2006 :

Le chiffre d'affaires par mois (histogrammes)
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 m�me �chelle.

Comme nous l'avons vu dans un des exemples pr�c�dents, il est possible de r�cup�rer dans une requ�te les deux types de donn�es n�cessaires � 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 donn�es
// **********************

$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 s�lection de la base');

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

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

// R�cup�ration des donn�es
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'];
	
	// R�cup�rer 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;

// *********************
// Cr�ation du graphique
// *********************

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

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

// D�sactiver 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);

// *******************************
// Cr�er un graphique histogramme
// *******************************

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

// d�grad� 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 suppl�mentaire
$graph->AddY(0,$oCourbe);

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

Le r�sultat :

Ann�e 2006, chiffre d'affaires et nombre de ventes par mois

Pour produire les donn�es n�cessaires, nous avons repris une requ�te utilis�e 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 donn�es suivantes :

On trouve dans cet ensemble de donn�es 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 d�sactiv� l'affichage du cadre avec la m�thode 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 pr�c�dents.

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

On utilise la m�thode addY($donnes) :

Sélectionnez

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

L'utilisation de cette m�thode permet la cr�ation d'une autre axe des ordonn�es (y) et d'ajouter un autre graphique dans le m�me conteneur.

Il est possible d'avoir � sp�cifier une autre �chelle pour les graphiques ajout�s. Cela d�pend de l'aspect final. Ici, c'est ce que nous avons fait pour des raisons esth�tiques, le graphique courbe recouvrant l'autre graphique.

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

Sélectionnez

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

Cette m�thode prend 4 arguments :

Num�ro d'argument	Signification
Arg 1	Indice de l'axe
Arg 2	Type de l'axe (lin�aire 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 suppl�mentaire
$graph->ynaxis[0]->SetColor('red');
$graph->ynaxis[0]->title->Set("Nombre de ventes");

II-I. Graphique "histogrammes" accumul�s▲

Une autre caract�ristique du graphique type histogramme est la possibilit� de repr�senter un histogramme contenant n partie : les histogrammes accumul�s. Autre caract�ristique du graphique type histogramme: la possibilit� de repr�senter un histogramme contenant n parties: les histogrammes accumul�s.

Pour illustrer cet exemple, nous allons reprendre la repr�sentation du chiffre d'affaires 2006 par mois. Mais cette fois-ci, nous ajouterons une information suppl�mentaire, � savoir le chiffre d'affaires g�n�r� pour chaque type de produits.

Par cons�quent, nous aurons pour chaque mois un histogramme qui repr�sente le chiffre d'affaire pour tous les types de produits. L'histogramme sera d�compos� en parts qui repr�senteront le chiffre d'affaires g�n�r� pour chaque produit.

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

La production de donn�es est un peu particuli�re puisqu'il va nous falloir obtenir 3 ensembles de valeurs, le C.A. pour le mat�riel, 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 cr�er un ensemble d'histogrammes pour chaque type de produit et de produire un ensemble d'histogrammes accumul�s � partir des histogrammes pr�c�demment cr��s.

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 donn�es
// **********************

$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 s�lection de la base');

$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requ�te: ' . 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'];
}


// **********************
// Cr�ation 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("R�partition du chiffre d'affaires 2006 par type de vente");
$graph->title->SetMargin(20);
$graph->title->SetFont(FF_COMIC,FS_BOLD,12);

// Cr�er 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('Mat�riel');
$histo_materiel->value->Show();
$histo_materiel->value->SetFont(FF_ARIAL, FS_NORMAL,7);
$histo_materiel->value->SetColor('black');
$histo_materiel->value->SetFormat('%d');

// Cr�er l'ensemble d'histogrammes accumul�s
$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 l�gende
$graph->legend->Pos(0.12,0.12,"left","top");

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

// Param�trer 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 g�n�r�e
$graph->Stroke();
?>

Le graphique g�n�r� :

Revenons � la production des donn�es n�cessaires � la cr�ation du graphique.

Dans notre exemple, il a �t� fait le choix de faire une seule requ�te pour extraire toutes les informations n�cessaires. Nous aurions tout aussi bien pu effectuer une requ�te par type de produit (mat�riel, logiciel et service).

La requ�te produite retourne pour chaque mois (de l'ann�e 2006) le chiffre d'affaires des diff�rents types de produits. Cela donne l'ensemble de donn�es suivant (aper�u des les 4 premiers mois) :

La seconde �tape est de s�parer les donn�es pour cr�er 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� personnalis�e en utilisant la m�thode SetMarginColor() :

Sélectionnez

$graph->SetMarginColor('#CCCCFF');

Chaque histogramme (mat�riel, logiciel et service) a �t� produit en cr�ant un objet BarPlot en prenant comme argument les ensembles de donn�es correspondants :

Sélectionnez

$histo_service = new BarPlot($tab_service);

Apr�s avoir g�n�r� les histogrammes par type de produits, nous les avons regroup�s en cr�ant une instance de l'objet AccBarPlot, lui-m�me prenant en argument un tableau des histogrammes tout justes produits.

Sélectionnez

// Cr�er l'ensemble d'histogrammes accumul�s
$gbplot = new AccBarPlot(array($histo_service, $histo_logiciel, $histo_materiel));

La position par d�faut de la l�gende ne convenait pas (elle recouvrait un des histogrammes). La m�thode Pos() a permis de d�placer la l�gende � gauche.

Sélectionnez

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

II-J. Graphique "radar"▲

Voyons un autre type de graphique : le graphique de type radar. Les valeurs pass�es � ce graphique sont repr�sent�es par des points plac�s circulairement autour d'un point central. A chaque valeur correspond un axe.

Reprenons le dernier cas vu, � savoir la r�partition du chiffre d'affaires 2006 par type de vente. Nous ne nous attacherons qu'� la vente de mat�riel.

La production de donn�es ne pose pas de probl�me, car le code source est quasiment le m�me que celui que l'on a vu plus haut.

La mise en oeuvre du graphique ne pr�sente pas non plus de difficult� particuli�re.

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 donn�es
// **********************

$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 s�lection de la base');

$mysqlQuery = @mysql_query($sql_ventes_par_produits, $mysqlCnx) or die('Pb de requ�te : ' . 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;

// *********************
// Cr�ation du graphique
// *********************

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

// Param�trage de l'apparence du grahique
$graph->title->Set("C.A. des ventes de mat�riel 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);

// Cr�er 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

Comme je le disais, pas grand chose de nouveau pour la mise en oeuvre, la plupart des instructions n�cessaires � la cr�ation du graphique ayant �t� d�j� vues dans les exemples pr�c�dents.

En revanche, le graphique produit ne me convient pas. Les points sont plac�s conform�ment aux donn�es que j'ai pass�es, mais j'aurais souhait� un affichage plus 'liss�' de mes donn�es.

JpGraph permet la repr�sentation logarithmique d'un graphique, ce qui va nous �tre tr�s utile.

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

Sélectionnez

// Cr�ation du conteneur type radar
$graph = new RadarGraph (480,480,"auto"); 

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

Petite pr�cision : l'�chelle par d�faut est 'lin' comme linear, c'est � dire lin�aire (ce qui �tait le cas dans le graphique initialement cr��).

Voici le r�sultat :

Graphique radar : Chiffre d'affaires des ventes 2006 (repr�sentation logarithmique)

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

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.