Il existe deux méthodes pour représenter graphiquement des données sur un site. La première consiste à utiliser une librairie telle que GDLib pour obtenir des graphiques de qualité. Cette approche est lourde à mettre en oeuvre et nécessite un serveur puissant si le nombre d’internautes est important. La seconde méthode s’appuie sur les tableaux HTML. Plus facile à réaliser, elle aide à créer des histogrammes. De plus, le poids des pages est dérisoire.Cette mise en oeuvre montre comment créer à la volée deux graphiques et un tableau en puisant les données dans MySQL. Le poids de la page n’excédera pas 6 Ko, bien que tous les graphiques soient dynamiques ! Si vous ne disposez pas déjà d’une plate-forme Apache, PHP, MySQL, téléchargez la distribution Easyphp sur manucorp.com. Comme son nom l’indique, il suffit de quelques clics pour installer cette distribution qui comprend Apache, PHP, MySQL, PHPmyAdmin, et de nombreuses librairies.
1 – Créez la base de données
Dans cet exemple, nous représentons les ventes d’une société sur l’année. La table “ventes” comporte deux champs : “mois” et “ca” (chiffre d’affaires). Pour créer cette table, connectez-vous à MySQL au travers de PHPmyAdmin, créez une nouvelle base intitulée “ventes“, puis une table du même nom.Ajoutez le champ “mois“, en précisant comme type de données “varchar(10)“, puis procédez de même pour créer le champ “ca” qui sera de type “integer(10)“. Lorsque votre structure de base de données est créée, ajoutez les paramètres d’une année, soit manuellement, soit en exécutant une requête “Insert into“. Elle devra avoir la forme : “INSERT IGNORE INTO ventes VALUES(‘Janvier’,’125000′);“.
2 – Récupérez les informations de la base
Lorsque votre base de données est créée, vous devez ensuite récupérer différentes informations utilisables pour les représentations graphiques. Créez un composant du nom de “donnees.php” et connectez-vous à la base à l’aide de l’instruction “mysql_connect()” en précisant le nom du serveur, le login et le mot de passe de l’administrateur. La connexion entre le serveur d’application et la base de données étant établie, sélectionnez la table sur laquelle vous allez travailler à l’aide de “mysql_select_db“. Vous devez ensuite effectuer deux requêtes sur les informations.La première consiste à calculer le chiffre d’affaires total sur l’année ainsi que le meilleur mois de ventes. Vous pouvez effectuer ces deux calculs dans la même requête afin de simplifier le code et d’améliorer les performances. Appuyez-vous pour cela sur une requête du type “SELECT SUM(ca),MAX(ca) FROM ventes“. Exécutez l’ordre à l’aide de l’instruction “mysql_query” puis conservez le résultat dans une variable temporaire que vous appellerez “$res” (pour résultat). Il ne vous reste plus qu’à affecter à la variable “$totalmax” le résultat de “SUM(ca)” et à la variable “$maxca“, le résultat de “MAX(ca)“.Pour faciliter les manipulations, vous allez stocker le reste des données (mois et chiffre d’affaires correspondant) dans un tableau. Commencez par sélectionner les informations dans la base, puis stockez-les dans une variable temporaire. Utilisez ensuite une boucle “While” pour entreposer dans chaque ligne du tableau les critères correspondant à un mois d’activité. Déclarez le tableau “$data” et affectez les mois à “$data[$i][0]” (la première colonne du tableau). Procédez de même pour les chiffres d’affaires que vous stockerez dans “$data[$i][1]” (la seconde colonne du tableau).
3 – Prévoyez la réutilisation du code
Avant d’écrire le code qui est chargé de représenter les informations, vous devez architecturer votre développement de façon à pouvoir le réutiliser dans plus d’une page. Les fonctions PHP ont été conçues pour cela. Il s’agit simplement d’encapsuler un bout de code PHP dans une sorte de container vers lequel on peut transmettre des variables. Celui-ci exécute ensuite ses instructions et renvoie un résultat.Cette approche facilite la maintenance du site et permet de factoriser le code tout en simplifiant les développements. Comme vous allez créer deux fonctions, nommez votre fichier “lib.graphi que.php” pour bien montrer qu’il s’agit d’un fichier qui stocke un ensemble de fonctions portant sur le même thème.
4 – Affichez les données sous forme de graphique
La première fonction va représenter les données dans un histogramme. Pour cela, elle a besoin d’un certain nombre de paramètres : $data (mois et chiffres d’affaires), $maxca (le CA du meilleur mois), $i (le nombre de mois), $cf (la couleur du fond du graphique) et $titre (le titre du graphique). Ces paramètres sont passés dans la ligne “function Graphique($data,$maxca,$i,$cf,$titre)“. Définissez la couleur de fond du graphique à l’aide d’un tableau HTML et de la propriété “bgcolor“. Insérez le titre du graphique entre le premier et le second tableau.Vous êtes maintenant prêt à créer les histogrammes. Ils sont construits dans une colonne HTML (
). Chacune d’elles comporte trois informations : le chiffre d’affaires en K?, le mois et une image. Définissez la hauteur de l’image en pourcentage en calculant le rapport “ca/camax“. Il ne vous reste plus qu’à inclure ce traitement dans une boucle pour traiter l’ensemble des mois. Pour que la fonction retourne un résultat, ajoutez la ligne “return ($graph);“.
5 – Présentez les informations dans un tableau
La création du tableau suit la même logique. Une boucle aide à créer les 12 lignes du tableau en indiquant à chaque fois le mois ($data[$i][0]), le chiffre d’affaires ($data[$i][1]), le pourcentage que représente le chiffre d’affaires du mois par rapport au total de l’année. La boucle “While” parcourt le tableau ligne après ligne.Vous pouvez en profiter pour effectuer quelques traitements conditionnels au passage. Surlignez par exemple le meilleur mois en l’affichant en vert si le CA du mois est égal au plus gros mois de l’année : “if ($maxca==$data[$i][1])“. Vous pouvez aussi ajouter une représentation graphique du rapport chiffre d’affaires du mois sur total de l’année. Ce n’est alors plus la hauteur, mais la largeur de l’image qui sera variable.
6 – Utilisez la librairie
Pour créer la page qui affichera les graphiques, il vous suffit d’inclure les différentes librairies (donnees.php et lib.graphique.php) et d’appeler les fonctions que vous souhaitez utiliser. C’est également dans ce script que vous devez préciser les paramètres de présentation tels que le titre du graphique et/ou du tableau et la couleur de fond.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
