Exemple pratique: Graphe des visiteurs d'un site web

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 :

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

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:

Exemple :     📋 Copier 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.