Les graphiques d’exemple de jpgraph fonctionne donc le serveur supporte l’application Le constructeur prend comme argument un tableau de valeurs entières. Si c’est bien le cas alors tu ne peux pas spécifier de code HTML, ni même un « echo ‘mon texte’; » dans le fichier qui génère ton graphique, l’image serait alors invalide, d’où ton erreur. Pour chaque année itération dans le foreach est créé un objet BarPlot. Le x est juste centré au lieu d’être en haut. Après avoir réglé les erreurs, le script affiche le petit carré avec un X blanc comme si l’image n’existe pas

Passons ensuite à la mise en oeuvre du graphique avec notre librairie. La requête produite retourne pour chaque mois de l’année le chiffre d’affaires des différents types de produits. La méthode Pos a permis de déplacer la légende à gauche. 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. 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.

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 Pour plus de clarté et de simplicité dans les exemples, j’ai fait le choix de regrouper ces données jpgarph une table unique.

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 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 exerciceset Pour ce premier exemple, le graphique sera construit étape par étape.

Le processus en sera volontairement plus détaillé que dans les exemples suivants. Passons ensuite à la mise en oeuvre du graphique avec notre librairie. L’élaboration d’un graphique est assez simple. 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. 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 jpyraph que nous avons passés sont la largeur et la hauteur. Après jpgrph effectué quelques paramétrages, nous passons à la création du secteur proprement dit:.

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. 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 proportionnelleavec 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. 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.

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.

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 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.

Quelques jjpgraph du script initial nous ont permis de personnaliser notre graphique. Revenons sur les différentes instructions utilisées bar.pp cela:. Ensuite, nous avons spécifié la police, le style et la taille avec la méthode SetFont:.

L’effet de séparation d’une des parties du graphique a pu être réalisé à l’aide de la méthode ExplodeSlicequi prend en argument l’index de la partie que l’on souhaite valoriser. La personnalisation des couleurs se fait avec la méthode SetSliceColorsqui prend comme argument un tableau indexé de chaînes de caractères les différentes couleurs.

Les couleurs peuvent également être définies en RGB, notation utilisée en Html, par exemple: FF pour du rouge. Il est également possible de paramétrer la position du graphique, grâce à la méthode SetCenter. Une valeur de 0. 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. 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.

Après avoir étudié le graphique secteur ou camembertvoyons 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. Reprenons le cas précédent: Le graphique en jpgraphh 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: 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 SetScalelogarithmique 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. La construction du graphique proprement dit passe par la création d’un objet de type BarPlot. Le constructeur prend comme bar.ph; un tableau de valeurs entières. Il est également possible de spécifier des légendes pour les deux axes: 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. Passons maintenant aux choses sérieuses, en abordant un type de graphique que l’on rencontre très fréquemment: 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 toutes catégories confondues. Une fois la production de données effectuée, le reste ne présente pas de difficulté particulière. Il a fallu concevoir une requête susceptible de récupérer les ventes d’une année jpgrph iciet de les regrouper par mois. Il a également été nécessaire de trouver une astuce permettant de prévoir les cas où aucune vente n’a bsr.php 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.

La position de l’image est déterminé par la constante passée en second argument. Les différentes valeurs bar.ph sont:. 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:. 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:.

Comme vous pouvez le constater, nous avons changé l’ apparence des points pour jpgrapb des ronds remplis de vert:. 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. Dans le même esprit que le graphique type courbe, revenons aux histogrammes pour étudier une forme particulière: 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, bqr.php 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. 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é. Pour chaque année itération dans le foreach est créé un objet BarPlot. Un paramètre est passé lors de la construction jpgfaph l’objet.

Un débutant et JPgraph

Ce paramètre est le tableau de valeurs correspondant à l’année courante. Enfin, la construction des histogrammes groupés avec l’objet GroupBarPlot qui prend en argument le tableau qui contient tous nos BarPlot.

La création d’un graphique histogrammes groupés s’avère un peu plus difficile mais ne présente pas d’obstacle majeurs. 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 bae.php d’affaires entre les différents types de jpgrapph depuis la première vente.

Rappelons que nous avons trois types de produits disponibles dans notre table: Pour chaque entrée de la table ventes, le type de vente est spécifié.

plugin JpGraph : exemple avancé avec les diagrammes en barres

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. Pour la production de données c’est-à-dire le chiffre d’affaires par type de produitnous avons exécuté la requête suivante:. 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.

jpgrapu Concernant le paramétrage du graphique proprement dit, nous avons placé le graphique à l’horizontale grâce à l’instruction suivante Set90AndMargin Nous avons également modifié l’échelle avec la méthode SetGrace 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 Voyons maintenant la possibilité qu’offre JpGraph d’afficher deux graphiques dans le même conteneuren l’occurrence un graphique de type histogramme et un graphique de type courbe.