Bargraphes similaires au site officiel
Comme indiqué dans le titre, cette page est destinée à montrer comment réaliser facilement des bargraphes qui ont le même aspect que sur le site officiel.Plus précisément, une fois la page du site officiel téléchargée et partiellement visible dans la fenêtre du navigateur web, il faut cliquer sur "Couverture vaccinale par classe d’âge" pour faire apparaître une série de bargraphes qui va mettre sur certains ordinateurs largement plus de 10 secondes à s'afficher.
Le but de cette page est de montrer comment réaliser la même chose en une fraction de secondes en utilisant les possibilités du langage HTML.
Pour réaliser ces bargraphes, 6 images ont été préparées et enregistrées dans le sous-répertoire img-ref. Il s'agit d'images BMP rectangulaires de 500x50 pixels et de couleur unie. Au début, les couleurs pour la première et la deuxième dose de vaccin reprenaient celles du site officiel. Comme ce site n'indique rien pour les doses supplémentaires, une troisième et une quatrième couleur ont été choisies en fonction des deux autres. Puis, comme avec la 5ème dose l'étagement des couleurs était de plus en plus mauvais, il a été refait en prévoyant à l'avance une 6ème dose.
Affichées telle quelles, ces 6 images donnent ceci :
Pour l'instant, on n'exploite que les 5 premières couleurs.
On va utiliser la possibilité de modifier la proportion largeur/hauteur d'une image pour afficher les bargraphes.
On utilise le modèle de fichier HTML bargraphe-age1.html dont la partie droite de la page contient le code suivant :
<div id="contenu">
<h1>Vaccination COVID 19 en France<br>
par classes d'âge au XXXDATE</h1>
<br>
<table border="0" align="center">
<tr>
<td width="120px">Légende :</td>
<td bgcolor="#B0E0FF" width="20px"> </td>
<td width="100px">1<sup>ère</sup> dose</td>
<td bgcolor="#40A0FF" width="20px"> </td>
<td width="100px">2<sup>ème</sup> dose</td>
<td bgcolor="#0060FF" width="20px"> </td>
<td width="100px">3<sup>ème</sup> dose</td>
<td bgcolor="#0040C0" width="20px"> </td>
<td width="100px">4<sup>ème</sup> dose</td>
<td bgcolor="#002080" width="20px"> </td>
<td>5<sup>ème</sup> dose</td>
</tr>
</table>
<br>
<br>
<table border="0" align="center" style="font-size:150%">
XXXLISTE
</table>
En l'absence de traitement, ce modèle de fichier HTML donne le résultat
suivant :On remarque que la liste des bargraphes apparaîtra dans une table alignée au centre de la zone d'affichage principale de la page web.
Cette manière de procéder permettra à la fois d'avoir les bargraphes relativement centrés dans la partie droite de la page, tout en gardant ces bargraphes de longueur différentes alignés entre eux du coté gauche.
Le script PHP bargraphe-age1.php va devoir mettre la date de l'état de vaccination à la place de XXXDATE puis générer une liste de bargraphes correspondant aux différentes classes d'âge à la place de la ligne contenant XXXLISTE
On commence par actualiser lorsque c'est nécessaire le fichier csv local vacsi-tot-a-fra.csv avant de l'ouvrir en lecture.
// vérifier si le fichier csv à utiliser est à jour
// l'actualiser si nécessaire
testmaj_tot_a_fra ();
// l'ouvrir en lecture
$ficcsv = DIR_CSV."/vacsi-tot-a-fra.csv";
$descscv = fopen ($ficcsv, "r");
Ensuite, si l'ouverture du fichier s'est bien passée, on récupère et on
affiche la date présente au début de ce fichier après l'avoir mise au
format jj/mm/aaaa
// lire la date mémorisée (format aaaa/mm/jj)
$datefic = trim (fgets ($descscv, 20));
// la retourner au format jj/mm/aaaa
$datefic = substr ($datefic, 8, 2)."/".substr ($datefic, 5, 2)."/".substr ($datefic, 0, 4);
// recopier le début de fichier html en mettant la date dans le titre
copmaj ($descfic, "XXXDATE", $datefic);
On recopie la suite du fichier HTML jusqu'à l'endroit où on peut rentrer
les différents bargraphes et on saute les classe d'âge jusqu'à 4 ans
(11 ans à la mise en ligne du site en octobre 2021) pour lesquelles le
taux de vaccination est infime.
// recopier le fichier html jusqu'à la liste
copie_jusque_chaine ($descfic, "XXXLISTE");
// sauter les classes d'âge jusqu'à 4 ans
do
{
// lire une ligne du fichier csv local
$ligne = trim (fgets ($descscv, LG_MAX_CSV));
// récupérer l'âge maximum sans 0 à gauche du chiffre
$agemax = (substr ($ligne, 0, 2) + 0);
}
while ($ligne && $agemax < 4);
On récupère le nombre de doses de vaccin mémorisées dans le fichier csv
local.
// trouver le nombre de doses mémorisées
$args = explode (";", $ligne, 20);
$nb_doses = (count ($args) - 2) / 2;
On va alors traiter les autres classes d'âge. Chaque classe d'âge
commence un an après l'âge limite de la classe d'âge précédente.Après avoir lue la ligne du fichier vacsi-tot-a-fra.csv correspondant à une nouvelle classe d'âge, on en extrait les différents champs (appel de la fonction explode (...)), puis on génère le texte correspondant à la classe d'âge concernée comme on l'avait fait dans le fichier table-age.php
On va alors générer 3 bargraphes correspondant aux différentes doses de vaccin, puis on recommence avec la classe d'âge suivante jusqu'à ce qu'on ait traité celle qui concerne les personnes "à partir de 80 ans".
// répéter
do
{
// âge de début de la prochaine classe d'âge
$agemin = $agemax + 1;
// lire une ligne du fichier csv local
$ligne = trim (fgets ($descscv, LG_MAX_CSV));
// récupérer les différents champs de la ligne
$args = explode (";", $ligne, 8);
// extraire l'âge maximum
$agemax = $args [0];
// générer la tranche d'âge
if ($agemin < 80)
$ages = "De ".$agemin." à ".$agemax." ans";
else
$ages = "À partir de ".$agemin." ans";
(....)
}
// jusqu'à ce que toutes les classes d'âge soient traitées
while ($ligne && $agemax < 80);
La présentation des taux de vaccination pour une classe d'âge commence
par l'affichage d'un titre indiquant de quelle classe d'âge il s'agit.Ensuite, on va afficher les bargraphes correspondant aux taux de vaccination pour les différentes doses. Une boucle va réaliser autant de fois qu'il y a de doses, le même type de traitement avec des paramètres différents.
Les différents taux de vaccination figurent dans les argument 5, 6 et 7 de chaque ligne du fichier csv local.
Pour chaque dose du vaccin, on va afficher une image rectangulaire de la couleur indiquée dans la légende pour cette dose de vaccin.
On utilise la possibilité offerte par le langage HTML et les navigateurs web de redimensionner les images, y compris en modifiant la proportion largeur/hauteur.
La largeur d'affichage choisie est de 500 pixels pour un taux de vaccination de 100 % (soit une résolution d-affichage de 0,2 % par pixel).
Avant d'afficher le bargraphe, on calcule le nombre de pixels que l'image devra avoir en largeur. Mais on doit préciser également une hauteur fixe (40 pixels) pour cette image, sinon, largeur et hauteur seront modifiées dans les même proportions.
A droite de l'image, on affiche le pourcentage correspondant. On peut remarquer que des balises <sup>...</sup> encadrent le pourcentage indiqué. Si on ne le fait pas, ces pourcentages sont affichés plus bas et donc mal centrés par rapport à l'image.
Cependant l'emploi de ces balises a comme effet secondaire d'afficher les pourcentages en caractères plus petits. Pour y remédier, une taille de caractères de 150 % a été déclarée dans le modèle de fichier HTML pour la table qu'on est en train de remplir.
<table border="0" align="center" style="font-size:150%">
XXXLISTE
</table>
Et comme il est souhaitable que les titres qui mentionnent les classes
d'âge soient plus gros, il n'y a pas besoin de modifier une autre fois
la fonte utilisée pour leur affichage.Voici le code PHP de la partie permettant de générer les bargraphes.
// ligne de titre
echo ' <tr><td align="center">'.$ages."</td></tr>\n";
// génération des deux bargraphes
for ($dose = 1; $dose <= $nb_doses; $dose++)
{
// les taux sont dans les éléments 5 à 7 de $args
$numarg = $nb_doses + 1 + $dose;
// franciser le taux
$taux = str_replace (".", ",", $args [$numarg])." %";
// et calculer la largeur en pixels nécessaire pour le bargraphe
$largeur = round ($args [$numarg] * 5);
// générer la ligne html avec un bargraphe et le taux indiqué
echo ' <tr><td><img src="'.DIR_IMG_REF."/barre_dose".$dose.'.bmp" ';
echo 'height="40px" width="'.$largeur.'px"> ';
echo "<sup>".$taux."</sup></td></tr>\n";
}
// séparation entre 2 classes d'âge
echo " <tr><td><br></td></tr>\n";
Exemple de code généré le 29 novembre 2021 avec seulement 3 doses de
vaccin :
<tr><td align="center">À partir de 80 ans</td></tr>
<tr><td><img src="img-ref/barre_dose1.bmp" height="40px" width="436px"> <sup>87,1 %</sup></td></tr>
<tr><td><img src="img-ref/barre_dose2.bmp" height="40px" width="427px"> <sup>85,3 %</sup></td></tr>
<tr><td><img src="img-ref/barre_dose3.bmp" height="40px" width="232px"> <sup>46,3 %</sup></td></tr>
<tr><td><br></td></tr>
Et le résultat visuel :