<html>
<head>
<title>Phpcovid : Bargraphes similaires au site officiel</title>
<meta name=author content="Bernard Chardonneau">
<meta name=copyleft content="Logiciel et données publiés dans le domaine public">
<meta name=robots content="noindex,follow">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/misenpage.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenu">
<h1>Bargraphes similaires au site officiel</h1>
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.<br>
<br>
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.<br>
<br>
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.<br>
<br>
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.<br>
<br>
Affichées telle quelles, ces 6 images donnent ceci :<br>
<br>
<img src="img-ref/barre_dose1.bmp"> <br>
<img src="img-ref/barre_dose2.bmp"> <br>
<img src="img-ref/barre_dose3.bmp"> <br>
<img src="img-ref/barre_dose4.bmp"> <br>
<img src="img-ref/barre_dose5.bmp"> <br>
<img src="img-ref/barre_dose6.bmp"><br>
<br>
Pour l'instant, on n'exploite que les 5 premières couleurs.<br>
<br>
On va utiliser la possibilité de modifier la proportion largeur/hauteur
d'une image pour afficher les bargraphes.<br>
<br>
On utilise le modèle de fichier HTML <tt>bargraphe-age1.html</tt> dont
la partie droite de la page contient le code suivant :<br>
!vsource exemples-code/droite-bargraphe-age1.html
En l'absence de traitement, ce modèle de fichier HTML donne le résultat
suivant :<br>
<br>
<iframe src="exemples-code/bargraphe-age1.html" width="800" height="220">
</iframe><br>
<br>
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.<br>
<br>
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.<br>
<br>
Le script PHP <tt>bargraphe-age1.php</tt> va devoir mettre la date de
l'état de vaccination à la place de <tt>XXXDATE</tt> puis générer une
liste de bargraphes correspondant aux différentes classes d'âge à la
place de la ligne contenant <tt>XXXLISTE</tt><br>
<br>
On commence par actualiser lorsque c'est nécessaire le fichier csv local
<tt>vacsi-tot-a-fra.csv</tt> avant de l'ouvrir en lecture.<br>
!vsource exemples-code/acces-tot-a-fra.php
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<br>
!vsource exemples-code/affdate.php
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.<br>
!vsource exemples-code/saut-cl-age-inf5.php
On récupère le nombre de doses de vaccin mémorisées dans le fichier csv
local.<br>
!vsource exemples-code/compte-doses.php
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.<br>
<br>
Après avoir lue la ligne du fichier <tt>vacsi-tot-a-fra.csv</tt>
correspondant à une nouvelle classe d'âge, on en extrait les différents
champs (appel de la fonction <tt>explode (...)</tt>), puis on génère le
texte correspondant à la classe d'âge concernée comme on l'avait fait
dans le fichier <tt>table-age.php</tt><br>
<br>
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".<br>
!vsource exemples-code/explore-cl-age.php
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.<br>
<br>
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.<br>
<br>
Les différents taux de vaccination figurent dans les argument 5, 6 et 7
de chaque ligne du fichier csv local.<br>
<br>
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.<br>
<br>
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.<br>
<br>
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).<br>
<br>
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.<br>
<br>
A droite de l'image, on affiche le pourcentage correspondant. On peut
remarquer que des balises <tt><sup>...</sup></tt> 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.<br>
<br>
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.<br>
<pre>
<table border="0" align="center" style="font-size:150%">
XXXLISTE
</table></pre>
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.<br>
<br>
Voici le code PHP de la partie permettant de générer les bargraphes.<br>
!vsource exemples-code/aff-bargraphes1.php
Exemple de code généré le 29 novembre 2021 avec seulement 3 doses de
vaccin :<br>
!vsource exemples-code/table-bargraphe1.html
Et le résultat visuel :<br>
<br>
<iframe src="exemples-code/iframe-table-bargraphe1.html" width="700px"
height="210px"></iframe><br>
<br>
</div>
<div id="menu">
XXXMENU
</div>
</body>
</html>