Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > PHP > Langage, bibliothèques et fonctions > [Langage] Allez plus loin avec PHP ! > Gérez le multimédia avec PHP ! > Des graphiques avec Artichow ! > Lecture du tutoriel

Des graphiques avec Artichow !

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : Craw
Visualisations : 4 067

Plus d'informations Plus d'informations
Après les images voici les graphiques !
Nous allons apprendre dans ce nouveau chapitre à créer des graphiques avec une nouvelle librairie : Artichow.
J'ai choisi cette librairie car elle est gratuite et aussi performante que les payantes.

Concrètement nous allons utiliser de nouvelles propriétés pour construire un graphique mais nous aurons besoin de nombreuses propriétés que nous avons vues dans le chapitre précédent je vous conseille donc de retourner le lire si vous avez un doute sur un point précis, sans quoi vous ne suivrez plus correctement le cours et ce serait dommage de gâcher tout ce que PHP nous cache. ;)
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Découvrir et installer Artichow

Ce que nous allons faire dans un premier temps est l'installation d'une librairie graphique appelée Artichow. :)
Celle-ci va nous permettre d'utiliser ses fonctions pour construire des graphiques variés : 3D, camemberts, courbes, histogrammes etc...

On pourra aussi y mettre de la couleur, des légendes bref de quoi s'amuser. :-°
Ce chapitre est encore une fois un chapitre de théorie et de pratique, il faudra être très attentif pour suivre le tutoriel.

Voici ce que vous saurez faire à la fin du cours :

Image utilisateur


Bon on commence ! :diable:

Téléchargement et installation de la librairie



Pour que Artichow fonctionne correctement il faut que vous ayez la librairie GD2 en main, si ce n'est pas le cas vous pouvez la télécharger ici.
Il faut aussi avoir la version PHP.4.3.0 de PHP, certaines fonctions seront désactivées si vous n'avez pas la version 4 ou 5 de PHP mais rien de grave tout fonctionnera normalement. ;)

Maintenant occupons-nous de télécharger Artichow :

Télécharger Artichow pour PHP 4 et/ou PHP 5
Si on vous demande un mot de passe le voici : MD5 : d25b771a077df47674c640aa33152c10

Voici le lien de téléchargement seulement pour PHP 5 :

Télécharger Artichow pour PHP 5 uniquement !
Voici le mot de passe en cas de besoin : MD5 : ae2b116e625b19b5ed622255222ebbf4

Voici la version Alpha de Artichow pour PHP 4 et 5 [déconseillé] :

Télécharger Artichow pour PHP 4 et/ou PHP 5
Voici le mot de passe nécessaire à la récupération du code source : MD5 : f999a7dea2e6baa1e6aee63ca54902cb

Cette version de Artichow n'est conseillée que si vraiment vous n'arrivez à télécharger aucune autre version proposée ici ou sur Internet, ne prenez celle-ci que si c'est votre dernier recours. :)
Certaines constantes ne seront pas compatibles avec ceux que je vais vous enseigner dans le cours.
Une fois que vous avez téléchargé cette librairie normalement l'installation est automatique et rapide.
Vous pouvez maintenant vous en servir.

Notions de base

Nous allons commencer en douceur avec le vaste sujet de la couleur, vous pouvez générer de la couleur avec GD mais j'utiliserais tout de même Artichow, on ne va pas que utiliser GD non ? :lol:

La couleur : un vaste sujet



La classe Color



Cette librairie se sert d'une classe particulière pour générer de la couleur : la classe Color, retenez bien son nom.
Je vais vous présenter rapidement cette classe car elle est largement avantagée par rapport aux autres d'où le fait que j'ai choisi de vous enseigner Artichow. :)



Vous verrez que vos graphiques prendront vite vie principalement grâce à cette classe qui va nous servir à créer la couleur. :p

Appliquer une couleur



Pour générer une couleur on va utiliser une fonction un peu particulière qui s'écrit sous la forme $color = new Color(arguments);.
Ici on initialise une variable appellée $color qui pointe sur une fonction qui est obligatoirement appellée new Color sinon ça ne marche pas, cette fonction prendra 4 arguments.

Les trois premiers arguments seront les trois couleurs selon la méthode RVB et le dernier argument sera l'intensité de transparence que vous donnerez à votre couleur, plus celle-ci sera élevée plus la couleur sera transparente et plus celle-ci sera près de 0 et plus la couleur sera opaque, une valeur de 40 est donc considérable. :)

On crée donc une couleur selon la méthode suivante, pour ma part j'ai créé un fichier nommé mongraphique.php dans lequel je placerai tous mes codes. ;)

Code : PHP
1
2
3
4
5
6
7
<?php
$rouge = 0;
$vert = 0;
$bleu = 0;
$transparence = 50;
$color = new Color($rouge, $vert, $bleu, $transparence);
?>


Si vous lancez maintenant votre page vous verrez normalement une bandelette toute noire et c'est normal puisque nous avons réduit à 0 toutes les couleurs, qui dit 0 dit noir. :)

Vous pouvez modifier les valeurs pour vous amuser à changer les couleurs et leur transparence. :)

Les valeurs des couleurs sont des entiers naturels compris entre 0 et 255 tandis que les valeurs de la transparence sont des entiers naturels compris entre 0 et 100.


Je vous montre tout de même le résultat avec une valeur de « rouge » intense rendue transparente à une valeur de 75. :)

Image utilisateur


La méthode XHTML/HTML/CSS



Vous pouvez aussi générer de la couleur avec des valeurs exprimées grâce à un CSS particulier de cette façon :

Code : PHP
1
2
3
4
5
6
<?php
$rouge = 0xAA; 
$vert = 0x20; 
$bleu = 0x00; 
$color = new Color($rouge, $vert, $bleu);
?>


Ici on a mis beaucoup de rouge et un peu de vert sans utiliser la transparence, ce qui revient à ne mettre que du rouge en utilisant à 75% la transparence.

Sachez que toutes les couleurs se produisent à partir de ces trois couleurs en RVB à savoir le Rouge, le Vert et le Bleu. :)


Mais c'est pas pratique de créer des couleurs comme ça et d'abord moi je ne connais même pas les valeurs pour un vert par exemple, comment je fais !? :colere2:


Je comprends votre colère, mais heureusement Artichow a tout prévu ! :)
Il n'existe pas que ces deux méthodes pour produire de la couleur mais il y en a une troisième bien plus simple, je lui ai donnée un surnom : Color In English car c'est vous qui dites les couleurs mais en anglais, comme dans vos pages CSS avec blue; par exemple. ;)
Ce qui est pratique c'est que vous pouvez aussi spécifier si la couleur sera claire, foncée ou encore transparente, c'est pas génial ça ? :p

Voici un exemple de vert foncé rendu transparent sur une valeur de 60 :

Code : PHP
1
2
3
<?php
$green = new DarkGreen(60);
?>


Là aussi vous pouvez modifier les couleurs et leur transparence à votre guise. :)

Attention : il est obligatoire de placer des majuscules devant le nom des couleurs et leur intensité, on écrit Dark et non dark, on écrit Green et non green etc...


Voici tout de même une liste des propriétés pour les couleurs, autrement on ne s'y retrouverait plus.



On va maintenant continuer en traçant notre premier quadrillage, on en a fini avec les couleurs unies, on ira voir les dégradés plus tard dans le tutoriel. :)

Un premier quadrillage



Pour pouvoir tracer un quadrillage on a besoin d'inclure un fichier spécifique à Artichow, voici la ligne de code à placer au début du fichier :

Code : PHP
1
2
3
<?php
require_once "Artichow/Graph.class.php";
?>


Donner une taille à son graphique



Il est important, tout comme avec les images de donner une taille à notre graphique, je dirais même obligatoire :)
Pour cela on utilise la fonction new Graph qui prend 2 arguments : les deux points de repère $x et $y. ;)

Code : PHP
1
2
3
<?php
$graph = new Graph(400, 30);
?>


Moi j'ai utilisé 400 pixels pour ma largeur et 30 pixels pour ma longueur.

Spécifier une bordure



Vous pouvez donner l'ordre de cacher la bordure du graphique ou au contraire de la montrer, pour cela on va avoir besoin d'une fonction un peu particulière qui s'écrit sous la forme $graph->border->ce que l'on veut faire(arguments ou non);

Ce sont nos magnifiques pointeurs que vous connaissez déjà si vous avez suivi les cours de C/C++ de M@teo21 sinon laissez tomber. :)

Moi j'ai décidé de cacher ma bordure (ça fait plus joli) donc je n'aurai aucun argument à mettre dans la parenthèse.

Code : PHP
1
2
3
<?php
$graph->border->hide();
?>


Maintenant on dessine !



On a spécifié la taille de notre graphique et le type de bordure, on peut commencer à entrer des informations pour réaliser notre quadrillage. :)

La fonction getDrawer associée à deux variables va nous être très utile, celle-ci prend un argument s'il le faut sinon aucun, tout comme pour notre bordure.
Voici comment s'emploie cette fonction :

Code : PHP
1
2
3
<?php
$drawer = $graph->getDrawer();
?>


J'ai pour ma part utilisé une variable $drawer qui pointe sur ma variable $graph donc sur mon graphique et ce même graphique pointe sur ma fonction getDrawer. :)

Voici un schéma qui récapitule le tout :

Image utilisateur


Jusqu'ici tout va bien normalement mais là ça va se compliquer légèrement mais si vous suivez bien tout ira bien. :p

Maintenant on va un peu réfléchir, de quoi se compose un quadrillage d'après vous ? De lignes bien entendu, eh bien c'est ce que nous allons tracer pour arriver à un quadrillage.

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
for($i = 7; $i < 400; $i += 15)
{
    $drawer->line(
        new Color(0, 0, 0),
        new Line(
            new Point($i, 0),
            new Point($i, 30)
            )
        );
}
?>


Ce code va donc utiliser la variable $drawer pour dessiner une ligne.
Il utilise aussi une couleur qu'il applique à la ligne comme nous avons vu plus haut, ici la couleur noire.
Ensuite il dit que l'on dessine une nouvelle ligne et on prend deux points pour dire où commence la ligne et où elle s'arrête, si vous avez suivi le tutoriel sur PHP de M@teo21 je n'ai plus besoin de vous dire à quoi correspond la variable $i et ce mot for. :)

Ensuite on trace une deuxième ligne avec le même code mais vous pouvez changer les valeurs dans la boucle si vous voulez pour espacer le tout. :)

Enfin on trace les colonnes avec la fonction filledRectangle.

Code : PHP
1
2
3
4
5
6
7
8
9
<?php
$drawer->filledRectangle(
    new Color(0, 100, 200, 50),
    new Line(
        new Point(0, 0),
        new Point(400, 30)
        )
    );
?>


Ici on dessine une nouvelle ligne mais verticalement ce qui créer les colonnes, je répéte cette ligne avec les valeurs à partir des deux fonctions new Point, là aussi vous pouvez changer les valeurs.

Enfin j'applique le tout à mon graphique et ce sera toujours comme ça qu'il faudra procéder : vous dessinez et vous appliquez, retenez bien ça sinon vous n'aurez rien sous les yeux, cette ligne se place toujours à la fin du code. :)

Code : PHP
1
2
3
<?php
$graph->draw();
?>


La variable $graph ( qui est notre graphique ) pointe sur la fonction draw qui va regrouper tout ce que $drawer a dans sa mémoire pour le distribuer au graphique et donc reconstituer les lignes tracées etc... Le rendu disponible est le suivant si vous avez gardé la couleur "bleu clair" pour votre bandelette :

Image utilisateur


Reprenons maintenant notre schéma de tout à l'heure, voici ce qu'il en est maintenant pour clarifier les choses :

Image utilisateur


Maintenant que vous savez dessiner un quadrillage vous pouvez dessiner plein d'autre chose, vous pouvez aussi agrandir ce quadrillage en modifiant les valeurs car là ça ressemble plus à un mini tableau. :)

Nous allons enfin voir comment faire des dégradés à vos couleurs car pour l'instant ce n'est pas très beau. ;)

Notions avancées

Avant de pouvoir faire un véritable graphique nous allons encore voir quelques notions, sans ça on ne sera pas prêts pour faire de véritables graphiques.

Les dégradés



Comme promis voici les dégradés. :p
Jusqu'ici vous ne saviez faire que des couleurs unies et varier leur transparence et leur opacité mais maintenant vous saurez même réaliser des mélanges notamment grâce aux dégradés.

Ce que l'on va mettre en pratique ici n'est pas très compliqué, car on va utiliser principalement la classe Color il faut donc que vous soyez ami avec celle-ci. ^^
Si ce n'est pas le cas remontez lire le début de ce chapitre.

Il faut savoir que Artichow gère deux types de dégradé qui sont :

Nous allons commencer par étudier les dégradés linéaires.

Les dégradés linéaires



Un dégradé linéaire est un dégradé qui dispose de deux couleurs, il fait en gros un fondu entre deux couleurs, un mélange.
On pourra utiliser ces dégradés pour faire la couleur du fond d'un graphique ou la couleur d'un élément du graphique pourquoi pas.

Pour créer un dégradé linéaire il faut commencer par initialiser deux variables debut et fin qui indique respectivement le début de la première couleur et la fin de la deuxième couleur.
Ensuite on créer notre dégradé en initialisant notre variable $color.

Code : PHP
1
2
3
4
5
6
<?php
$debut = new Black;
$fin = new White;

$color = new LinearGradient($debut,$fin,0);
?>


La fonction new LinearGradient qui veut dire « Nouveau Dégradé Linéaire en français » permet de créer un dégradé linéaire à partir des deux couleurs spécifiées (ici blanc et noir).
On met également un angle (ici 0 degré) pour indiquer comment le dégradé va progresser, 0 degré pour un dégradé vertical (de haut en bas) et 90 degrés pour un dégradé horizontal (de la gauche vers la droite) on peut également varier le degré pour faire un dégradé qui vient du coin droit en haut par exemple au coin gauche en bas. :)

Voici ce que j'obtiens avec le code PHP ci-dessus. :)

Image utilisateur


Les dégradés radials



Le deuxième type de dégradé est donc le dégradé radial. :)
Un dégradé radial est un dégradé qui s'applique sur une figure géométrique, notre objectif sera donc de créer une ellipse avec un dégradé vert jaune linéaire à l'intérieur, bien que le rendu soit très joli, sachez que les dégradés radials prennent beaucoup de mémoire sur votre serveur ftp malheureusement, on se limitera donc souvent aux dégradés linéaires. ;)

Je pense que je n'ai plus besoin de vous dire comment créer un nouveau graphique on l'a vu plus haut, je vais juste expliquer ce qui est nouveau.

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
require_once "Artichow/Graph.class.php";

$graph = new Graph(250, 250);
$graph->border->hide();

$drawer = $graph->getDrawer();

$debut = new Color(125, 250, 0);
$fin = new Color(0, 125, 125);

$drawer->filledEllipse(
    new RadialGradient($debut,$fin),
    new Point(125, 125),
    250, 250
    );

$graph->draw();
?>


Ici on applique une couleur jaune-vert selon la méthode hexadécimale (3 entiers naturels compris entre 0 et 255), la première couleur est appelée par la variable $debut et est verte et la deuxième couleur par la variable $fin et est jaune.

Ensuite on dessine un cercle avec la fonction filledEllipse et on y applique à l'intérieur un dégradé radial, ce dégradé correspond à la couleur jaune-vert contenue dans les variables $debut et $fin, enfin on place les points de repère du début et de la fin du cercle pour pouvoir le tracer et on spécifie deux valeurs d'angle (ici 250 degrés).

Voilà ce que j'obtiens :

Image utilisateur


Maintenant que nous maîtrisons les dégradés, on peut passer à la suite.

Insérer un graphique dans une page HTML/XHTML



La méthode img



Vous pouvez si vous le souhaitez intégrer votre graphique dans une page HTML/XHTML bien que cette solution soit déconseillée car tout le dynamisme du graphique est perdu, mais si vous voulez vraiment le faire une petite méthode très pratique le permet. :)

On insère via une balise <img la page qui contient le graphique (ici mongraphique.php).

Code : HTML
1
<img src="mongraphique.php" alt="Le graphique"/>


Vous pouvez même mettre du texte alternatif avec la balise alt si ça vous enchante. ;)

Passons maintenant à des vrais graphiques.

Créer de vrais graphiques

Jusqu'ici ce que nous avons crée relève du domaine géométrique, nous allons pouvoir et ce en utilisant tout ce que nous avons appris créer de véritables graphiques et je peux vous dire que vous allez bien vous amuser. :)

Une courbe



Nous allons commencer par le plus simple une courbe, nous allons mettre en pratique le dessin d'une ligne qui va se répéter plusieurs fois et sur plusieurs inclinaisons.

Pour mettre en pratique tout ce que nous avons vu je vous propose un petit exercice, dans la première partie je vous donne quelques informations et dans la deuxième partie se trouve la correction de l'exercice, ne regardez la correction que si vous ne savez vraiment pas comment faire, mais essayez au moins. ;)

Informations utiles



Vous devez créer donc une courbe composée de 4 lignes noires.
Vous placerez une légende à gauche de cette courbe et une image de fond ou une couleur unie / dégradée de votre choix.
Un abscisse au centre est facultatif.

La ligne suivante sera à placer au début du fichier car Artichow en a besoin pour faire des courbes :

Code : PHP
1
2
3
<?php
require_once "Artichow/LinePlot.class.php";
?>


Vous donnerez une taille de 400*400 pixels.
Vous pouvez donner une information à votre courbe si vous le souhaitez que nous n'avons pas encore vu : l'anti-aliasing, cette option permet d'afficher des courbes plus réelles mais consomme beaucoup de mémoire sur votre serveur ftp, voici la ligne de code :

Code : PHP
1
2
3
<?php
$graph->setAntiAliasing(TRUE);
?>


Vous afficherez la légende avec ce code que nous n'avons pas encore vu :

Code : PHP
1
2
3
<?php
$values = array(1, 4, 5, -2.5, 3);
?>


Vous ferez en sorte de placer un dégradé linéaire à 0 degrès composé de deux couleurs : gris et blanc.
Voici un code PHP que nous n'avons pas encore vu pour la notion des graphiques, il va vous permettre de pouvoir placer des légendes décimales comme 2,5 par exemple sans ce code aucun décimal n'est possible.

Code : PHP
1
2
3
<?php
$plot->yAxis->setLabelPrecision(1);
?>


Vous espacerez les courbes de vos axes.
Vous ajouterez le tout à votre graphique, voici le code qui le permet :

Code : PHP
1
2
3
<?php
$graph->add($plot);
?>


Enfin vous affichez votre graphique avec un code PHP que nous avons déjà vu. :)
Je vous laisse maintenant travailler, s'il le faut passez des heures dessus mais c'est vital de s'entrainer, sans ça vous ne pourrez pas suivre la suite du tutoriel, croyez-moi. ;)

Je vous ai donné en plus les quelques codes que j'ai volontairement écarté pendant le tutoriel pour ne pas trop vous embrouiller, ce que nous avons vu est déjà très bien et ce sont des informations solides à retenir, s'il le faut relisez bien ce chapitre et même le précédent si vous l'avez oublié. :)

La correction



Voici venu l'heure de la correction.

Secret (cliquez pour afficher)
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
   require_once "Artichow/LinePlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
   
   $values = array(1, 4, 5, -2.5, 3);
   $plot = new LinePlot($values);
   $plot->setBackgroundGradient(
      new LinearGradient(
         new Color(210, 210, 210),
         new Color(250, 250, 250),
         0
      )
   );
   $plot->yAxis->setLabelPrecision(1);
   $plot->setSpace(5, 5, NULL, NULL);
   
   $graph->add($plot);
   $graph->draw();
?>


Ce que nous avons fait est simple et rien ne doit normalement vous surprendre.
Nous avons inséré la page nécessaire à Artichow pour développer notre courbe et crée un graphique de 400*400pixels, ensuite on a crée les légendes avec les codes que je vous ai donné ci-dessus et un simple dégradé linéaire gris-blanc, après on a affiché notre courbe avec $graph->draw();, cette ligne est absolument à retenir elle est importante, sans ça vous ne verrez rien je vous l'avais déjà dit. ;)

Voici le résultat avec une image de fond en plus :

Image utilisateur


Maintenant on peut faire plusieurs autres types de graphique. :)
Mais je ne saurais vous laisser partir sans vous enseigner quelques autres tactiques, nous allons toujours travailler sur cette courbe sous forme d'exercice, cette fois ci nous allons personnaliser notre courbe, nous allons voir comment placer des images à chaque sommet d'une courbe par exemple. ;)

Exercice



Nous allons principalement utiliser ce que nous venons de voir avec le fichier LinePlot.class.php :)
Vous devrez rajouter sur l'abscisse les sept jours de la semaine, chaque trait représente un jour et des smileys à chaque sommet des courbes avec la valeur de la légende à gauche au dessus de ces têtes dans un cadre dégradé de blanc rouge linéaire à 0 degré.

Vous donnerez une taille de 300*400 pixels à votre graphique et un fond gris.
Vous rendrez vos courbes réelles si vous le souhaitez vraiment car je vous rappelle que cela prend beaucoup de place dans la mémoire.
Vous mettrez une légende de votre choix à gauche (des nombres entiers et décimaux).
Vous cacherez la ligne qui relie les valeurs avec ce code :

Code : PHP
1
2
3
<?php
$plot->hideLine(TRUE);
?>


Ce code est simple à comprendre, il se base de la même façon que pour cacher la bordure de notre graphique (d'ailleurs vous cacherez sa bordure si vous le souhaitez) sauf qu'ici on cherche à cacher une ligne en la rendant réaliste.

N'oubliez jamais les majuscules dans une fonction qui utilise les pointeurs, je vous l'ai déjà dis mais je tiens à vous le répéter.


Vous mettrez en valeur la courbe via ce code qui contient une fonction encore inconnue pour vous :

Code : PHP
1
2
3
<?php
$plot->setFillColor(new Color(180, 180, 180, 75));
?>


La fonction setFillColor permet de mettre en valeur tous les arguments et fonctions qui suivent dans les parenthèses suivantes, ici les couleurs avec leur transparence, cela fait ressortir et ravive votre graphique.

Vous modifierez la couleur du fond de la grille avec ce code PHP.

Code : PHP
1
2
3
<?php
$plot->grid->setBackgroundColor(new Color(235, 235, 180, 60));
?>


Vous ferez en sorte de pouvoir placer deux chiffres après la virgule, pour cela on utilise le même code de tout à l'heure mais on modifie quelque chose, je vous laisse le faire. ;)

Pour afficher les smileys à chaque sommet vous utiliserez ce code PHP :

Code : PHP
1
2
3
4
<?php
$plot->mark->setType(Mark::IMAGE);
   $plot->mark->setImage(new FileImage("smiley.png"));
?>


Si vous avez PHP 4 et/ou 5 remplacez Mark::IMAGE par MARK_IMAGE :)

Enfin avec un array vous définissez les jours de la semaine sur l'abscisse comme demandé dans la consigne.
Vous ferez une couleur dégradé linéaire de rose-violet à 70 degrés. :)
Vous ferez toutes les autres modifications nécessaires pour afficher et reconstituer votre graphique.

Correction



Secret (cliquez pour afficher)
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
 
   require_once "Artichow/LinePlot.class.php";
   
   $graph = new Graph(400, 300);
   $graph->setAntiAliasing(TRUE);
   
   $values = array(1, 7, 3, 2.5, 5, -4.5, -5);
   $plot = new LinePlot($values);
   $plot->setBackgroundColor(new Color(240, 240, 240));
   
   $plot->hideLine(TRUE);
   $plot->setFillColor(new Color(180, 180, 180, 75));
   
   $plot->grid->setBackgroundColor(new Color(235, 235, 180, 60));
   
   $plot->yAxis->setLabelPrecision(2);
   
   $days = array(
      'Lundi',
      'Mardi',
      'Mercredi',
      'Jeudi',
      'Vendredi',
      'Samedi',
      'Dimanche'
   );
   $plot->xAxis->setLabelText($days);
      
   $plot->setSpace(6, 6, 10, 10);
   
   $plot->mark->setType(Mark::IMAGE);
   $plot->mark->setImage(new FileImage("smiley.png"));
   
   $plot->label->set($values);
   $plot->label->move(0, -23);
   $plot->label->setBackgroundGradient(
      new LinearGradient(
         new Color(250, 250, 250, 10),
         new Color(255, 200, 200, 30),
         0
      )
   );
   $plot->label->border->setColor(new Color(20, 20, 20, 20));
   $plot->label->setPadding(3, 1, 1, 0);
   
   $graph->add($plot);
   $graph->draw();
   
?>


Si vous n'avez pas vraiment réussi ou pas du tout je vous comprends, nous avons vu quelques fonctions mais pas les fonctions que nous utilisons dans des gros graphiques mais en mettant en pratique les fonctions que nous avons vues nous pourrons créer des merveilles. :)

Voici le résultat en image pour ma part :

Image utilisateur


Vous pouvez supprimer la bordure pour faire plus joli, vous savez comment faire maintenant. ;)

Vous pouvez rajouter une autre courbe dans votre graphique, il suffit juste de déclarer une seconde variable qui créera une courbe, vous savez aussi comment faire. :)

Et pour les autres types de graphique ?



Alors comme ça vous êtes gourmand et une courbe ne vous suffit pas ? :-°
Il suffit d'inclure au début de votre fichier les fichiers suivants et de changer donc les valeurs nécessaires pour modifier le type de graphique.

Pour faire un histogramme :

Code : PHP
1
2
3
<?php
require_once "Artichow/BarPlot.class.php";
?>


Pour faire un camembert :

Code : PHP
1
2
3
<?php
require_once('Artichow/Pie.class.php');
?>


Vous pouvez ainsi combiner plusieurs types de graphique dans un seul graphique, pour cela insérez autant de fichiers nécessaires dans votre page pour que ce soit réalisable. :)

Q.C.M.

Quelle librairie devons-nous utiliser pour réaliser des graphiques ?
Quel est le nom de la classe qui permet de générer de la couleur avec Artichow ?
Que permet de faire cette fonction-pointeur ?

Code : PHP
1
$graph->draw();
Quels sont les deux types de dégradé existants sous Artichow ?
Que fait ce code ?

Code : PHP
1
2
3
4
5
6
7
8
9
$debut = new Color(125, 0, 250);
   $fin = new Color(255, 255, 125);
   
   
   $color = new LinearGradient(
      $debut,
      $fin,
      90
   );

Statistiques de réponses au QCM


C'est enfin fini pour les graphiques, il faut dire que ce chapitre était plutôt bien complet. :waw:

Pour tout retenir j'ai décidé de vous faire en conclusion une petite liste de ce que nous avons pu voir pendant ce chapitre. :)

Les couleurs



1) Gérer la transparence, l'opacité, et la spécification des couleurs. | Les acquis.
--> On utilise trois méthodes pour générer de la couleur avec Artichow : RVB / hexadécimal, XHTML/HTML/CSS et le nom des couleurs en Anglais.
Les valeurs de transparence sont comprises entre 0 et 100 et les couleurs entre 1 et 255. On utilise des entiers naturels.
Pour la troisième méthode, Clear rend une couleur transparente, Dark une couleur opaque et la couleur seule une couleur normale. ;)

Les quadrillages et figures géométriques



2) Tracer une ligne, construire un quadrillage, afficher un graphique à l'écran. | Les acquis.
--> On trace un quadrillage en incluant tout d'abord un fichier spécifique à Artichow :
Code : PHP
1
require_once "Artichow/Graph.class.php";

On trace une ligne avec $drawer->line(
On trace une colonne avec $drawer->filledRectangle(
On affiche un graphique à l'écran avec $graph->draw();

Les dégradés et les pointeurs



3) Savoir faire n'importe quel dégradé, travailler avec les pointeurs dans les fonctions. | Les acquis.
--> Différencier les deux types de dégradé : Linéaire et Radial.
Mettre des majuscules dans les fonctions-pointeurs (exemple : $graph->getDrawer();)

Les types de graphique



4) Connaître leur nom et leur propriété, savoir réaliser une courbe et la personnaliser. | Les acquis.
--> Histogramme = Bar
Camembert = Pie
Courbe = Plot
Combiner deux types de graphique dans un graphique en insérant les fichiers nécessaires.

Attention : pour que vos graphiques marchent il faut toujours insérer ceci en début de page lorsque vous ferez des graphiques :


Code : PHP
1
require_once "Artichow/Graph.class.php";


Cette fois on en a vraiment fini avec ces graphiques. :)
Vous pouvez prendre votre temps, vous pouvez réviser vos deux chapitres avant d'attaquer le suivant. :)
Le chapitre suivant sera plutôt costaud, vous découvrirez les variables d'environnement, c'est un tutoriel indispensable pour faire la suite. :)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut Retour en haut


Créé : le 05/11/2007 à 15:59:51
Modifié : le 22/08/2008 à 15:52:09
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 462 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.2074s (0.1934s)