Exemple pratique: Graphe des visiteurs d'un site web

PHP cours tutorial

Graphique des visiteurs de votre site

Vous vous demandez peut être pour quoi dessiner avec php alors qu’il existe des applications plus performante pour faire ça ?

Il y a de nombreuses raisons de créer des images dynamiquement.

Cela peut permettre par exemple de :

  • créer des graphiques à partir de données stockées dans une base de données.
  • créer une image personnalisée pour chaque visiteur (contenant par exemple son login)
  • réduire la taille d'une image que l'un de vos membres vient de vous envoyer via un formulaire
  • etc. …

Dans cet exemple pratique nous allons voir comment créer un graphique des visiteurs de votre site sur une année.

Mais tout d’abord un petit rappel n’est jamais de trop

Rappel des fonctions de dessin


Tout d'abord, dessiner  en informatique, implique des coordonnées. Voici donc un schémas pour comprendre ça.
Le coin supérieur gauche de l'image est aux coordonnées (x=0, y=0), le coin inférieur droit est (x=largeur_image, y=hauteur_image).
Par exemple, pour une image de 200 x100 points, on a :

Graphique des visiteurs

Pour dessiner il faut donc  donner des coordonnées aux différentes fonctions de dessin.

Voici une liste de fonctions pour dessiner toutes sortes de formes ou placer du texte sur votre image nouvellement créée.
Pour chaque fonction, vous trouverez une courte description et sa syntaxe.
L'objectif n'est pas ici de donner un exemple pour chaque fonction, mais plutôt une explication rapide. .

Syntaxe

Description

$img = ImageCreate ($largeur, $hauteur)

Crée une image vide (256 couleurs) $img de largeur $largeur et de hauteur $hauteur. (Utiliser de préférence le format PNG)

$img = ImageCreateTrueColor ($largeur, $hauteur)

Identique  à ImageCreate mais l'image n'est plus limitée à 256 couleurs. (Utiliser de préférence le format JPEG)

$color = ImageColorAllocate ($img, $rouge, $vert, $bleu)

Place dans la variable $color une couleur dont les composantes sont $rouge, $vert, $bleu (compris entre 0 et 255).

ImageEllipse ($img, $x, $y, $l, $h, $color)

Dessine dans l'image $img une ellipse en partant du point ($x,$y), de largeur $l, de hauteur $h et de couleur $color.

ImageFilledEllipse ($img, $x, $y, $l, $h, $color)

Identique à ImageEllipse mais l'ellipse est remplie par la couleur $color

ImageFill ($img, $x, $y, $color)

Colorie dans l'image $img avec la couleur $color un rectangle placé entre ($x,$y) et le coin inférieur droit de l'image.

ImageLine ($img, $x1, $y1, $x2, $y2, $color)

Trace dans $img une ligne de couleur $color entre les points ($x1,$y1) et ($x2,$y2)

ImagePolygon ($img, $points, $num_points, $color)

Trace un polygone dans $img dont la liste des points est donnée dans le tableau $points ($points[0]=$x0, $points[1]=$y0, $points[2]=$x1, $points[3]=$y1, etc...), $num_points est le nombre de points dans le tableau et $color la couleur.

ImageFilledPolygon ($img, $points, $num_points, $color)

Identique à ImagePolygon mais le polygone est rempli par la couleur $color

ImageRectangle ($img, $x1, $y1, $x2, $y2, $color)

Trace dans $img un rectangle de coin supérieur gauche ($x0, $y0) et de coin inférieur droit ($x1, $y1) de couleur $color

ImageFilledRectangle ($img, $x1, $y1, $x2, $y2, $color)

Identique à ImageRectangle mais le rectangle est rempli par la couleur $color

ImageSetStyle ($img, $style)

ImageSetBrush ($img, $brush)

Ces fonctions permettent de changer le style de tracé des lignes, consultez la documentation officielle et surtout l'exemple pour la fonction ImageSetStyle qui montre également comment utiliser ImageSetBrush

ImageSetPixel ($img, $x, $y, $color)

Dessine dans $img un point de coordonnées ($x,$y) et de couleur $color

ImageSetThickness ($img, $epaisseur)

Change l'epaisseur des lignes tracées par toutes les fonctions.

ImageString ($img, $police, $x, $y, $chaine, $color)

Dessine dans $img la chaîne de caractère $chaine à partir du point ($x,$y) avec la couleur $color et avec la taille de police de caractère $police (compris entre 0 et 5)

ImageStringUp ($img, $police, $x, $y, $chaine, $color)

Identique à ImageString mais la chaîne de caractères est dessinée verticalement

Exemple : graphique des visiteurs


Pour appliquer ces  notions, voici un  exemple très simple.

On veut créer un histogramme graphique sous forme de "batons" représentant le nombre de visites sur votre site web sur les 12 mois de l'année.

Imaginons donc que le nombre de visites pour chacun des 12 mois est placé dans le tableau $visites que vous avez récupéré de votre base de données   MySQL.

  • Les visites, l'image et les couleurs

    On commence donc par créer un tableau contenant les visites sur 12 mois (donc 12 valeurs) .

Voici le tableau :

 $visites = array(88, 142, 288, 322, 676, 829, 536, 556, 693, 352, 427, 888).

puis on crée ensuite une image 400x300 comme suit :

 $im = ImageCreate (400, 300) 

et on crée trois couleurs :

  1. Couleur pour le fond de l'image


    $colorFond = ImageColorAllocate ($im, 150, 255,120);

  2. Couleur pour le texte et les tracés


      $noir = ImageColorAllocate ($im, 0, 0, 0);

     
  3. Couleur pour les bâtons

    $bleu = ImageColorAllocate ($im, 0, 0, 255); 

     
  • On dessine les axes
    On place l'axe horizontal du temps (un simple trait noir) en bas de l'image, en laissant une marge de 10 points.
    On écrit en dessous les  mois en utilisant la boucle for  et la fonction ImageString. Les numeros de mois sont placés tous les 30 points en partant de la gauche de l'image.

// Trait horizontal pour représenter l'axe du temps    
    ImageLine ($im, 10, $hauteurImage-10, $largeurImage-10, $hauteurImage-10, $noir);
    // on affiche le numéro des 12 mois
    for ($mois=1; $mois<=12; $mois++) {
        ImageString ($im, 0, $mois*30, $hauteurImage-10, $mois, $noir);
    }     

 
Enfin on trace un trait vertical représentant l'axe vertical du nombre de visites.

// Trait vertical pour représenter le nombre de visites
    ImageLine ($im, 10, 10, 10, $hauteurImage-10, $noir);

  • On dessine les bâtons

    Pour dessiner les bâtons.
    Tout d'abord, pour le nombre de visites maximal  nous prenons arbitrairement 1000.

visitesMax=1000

Pour chacun des mois, il faut calculer la hauteur du rectangle que l'on veut tracer.

Pour cela nous utilisons la formule suivante :

        hauteur = (nombreVisite * hauteurImage)/visitesMax)


Maintenant on peut  tracer chaque rectangle en utilisons encor une fois la boucle for, en commençant par son point supérieur gauche et en finissant par son point inférieur droit.
ET on ajoute le nombre de visites au dessus de chaque rectangle.

 Le nombre maximum de visites
    $visitesMax = 1000;
    
  tracé des bâtons

 
    for ($mois=1; $mois<=12; $mois++) {
        $hauteurImageRectangle = round(($visites[$mois-1]*$hauteurImage)/$visitesMax);
        ImageFilledRectangle ($im, $mois*30-7, $hauteurImage-$hauteurImageRectangle, $mois*30+7, $hauteurImage-10, $bleu);
        ImageString ($im, 0, $mois*30-7, $hauteurImage-$hauteurImageRectangle-10, $visites[$mois-1], $noir);
    }    

 et c'est fini...

on affiche notre image représentant le gaphique des visiteurs
    ImagePng ($im); 


    On affiche les numéros des 12 mois


    for ($mois=1; $mois<=12; $mois++) {
        ImageString ($im, 0, $mois*30, $hauteurImage-10, $mois, $noir);
    }

En fin regroupons tous ces bouts de code pour avoir le code de notre graphe en entier comme suit:

Sélectionner le code

	  <?php
	      $visites = array(138, 254, 381, 652, 896, 720, 140, 556, 663, 331, 407, 768);
	      header ("Content-type: image/png");
	      $largeurImage = 400;
	      $hauteurImage = 300;
	      $im = ImageCreate ($largeurImage, $hauteurImage)
	              or die ("Erreur lors de la création de
	  l'image");        
	      $colorFond = ImageColorAllocate ($im, 255, 255, 255);
	      $noir = ImageColorAllocate ($im, 0, 0, 0); 
	      $bleu = ImageColorAllocate ($im, 0, 0, 255);
	  // On dessine un trait vertical pour représenter l'axe du temps   
	      ImageLine ($im, 10, $hauteurImage-10, $largeurImage-10,
	  $hauteurImage-10, $noir);
	      // On affiche le numéro des 12 mois
	      for ($mois=1; $mois<=12; $mois++) {
	          ImageString ($im, 0, $mois*30, $hauteurImage-10, $mois, $noir);
	      }
	      // on dessine un trait vertical pour représenter le nombre de visites
	      ImageLine ($im, 10, 10, 10, $hauteurImage-10, $noir);     
	             // le nombre maximum de visites
	      $visitesMax = 1000;
	      // tracé des bâtons
	      for ($mois=1; $mois<=12; $mois++) {
	          $hauteurImageRectangle =
	  round(($visites[$mois-1]*$hauteurImage)/$visitesMax);
	          ImageFilledRectangle ($im, $mois*30-7,
	  $hauteurImage-$hauteurImageRectangle, $mois*30+7,
	  $hauteurImage-10, $bleu);      
	          ImageString ($im, 0, $mois*30-7,
	  $hauteurImage-$hauteurImageRectangle-10, $visites[$mois-1],
	  $noir);
	      }
	      // et c'est fini...
	      ImagePng ($im);
	  ?> 
            
 

Exécutez le script ci dessus et appréciez le résultat.

N’est ce pas intéressant ?

Conclusion :

La librairie GD pourrait être très  utile.

Cependant, attention à ne pas créer des images trop grandes.

Si vous avez créé de grandes images le temps de chargement de votre page sera important ce qui nuira à son  indexation par les moteurs de recherche.

Avec ces quelques connaissances, vous pouvez imaginer pleins de choses.

Par carabde 20 Aout 2014