Installer, utiliser et personnaliser cette application est très simple.

Présentation

Trois fichiers-texte sont indispensables et doivent donc être téléchargés et copiés dans un dossier :

Fichiers indispensables :

data.js, pour y copier vos tensions (2 Ko avec les tensions fictives de la démo)
analys.js, pour les calculs, le cœur de l'application (8 Ko)
result.htm, pour afficher les résultats (7 Ko)

Enregistrer vos données

Vos données seront enregistrées dans le fichier data.js, via un éditeur de texte (tel que le Bloc-notes).

L'éditeur recommandé est NotePad++, car il offre une coloration syntaxique.
Attention. Ne pas utiliser un traitement de texte (tel que Word, Writer, ...)

Contenu du fichier (data.js) :

/* ["jour","heure",systolique,diastolique,pouls], */

var lignes = [

["2023-11-16","18:20",136,80,52],
["2023-11-15","10:00",126,86,64],
...
["2023-10-01","07:59",130,67,61],
["2023-10-01","05:33",147,85,54] 

];

Une ligne de données se présente sous la forme :

["2023-11-16","18:20",136,80,52],

Une ligne de données représente une mesure de votre tension artérielle.

Une ligne de données est constituée de 5 informations (données) dans l'ordre suivant :

Une date au format "AAAA-MM-JJ" (en année-mois-jour)
Une heure au format "HH:MM" (en heure:minute)
Un nombre entier (positif) représentant la tension systolique (en mmHg)
Un nombre entier (positif) représentant la tension diastolique (en mmHg)
Un nombre entier (positif) représentant le pouls (en battements par minute)

Chaque donnée est séparée par une virgule.
Les cinq données sont encadrées par des crochets, [].
Chaque ligne de données se termine par une virgule.

NB. : La dernière ligne de données ne se termine pas par une virgule.

L'ordre des lignes est chronologique.
La première ligne de données correspond aux données les plus récentes.

Pour y écrire les vôtres, commencez par effacer les lignes liés à la présentation de l'application (ci-dessus en vert clair)

Le formatage des données doit être strictement respecté. L'oubli d'un guillemet, d'une virgule, ... suffit à ce que plus rien ne s'affiche (lorsqu'on clique sur le bouton "Analyser").

Exemple de double faute (qui n'a pas "encore" de conséquences). Indiquer comme heure "6h13" au lieu de "06:13" (car, "6" ne vaut pas "06" et "h" ne vaut pas ":")

Bonne nouvelle. Dès que le fichier est corrigé, les résultats s'affichent à nouveau.

Astuce. Pour gagner du temps et, surtout, éviter une erreur de formatage, copiez la première ligne et collez la au-dessus. Puis, modifier que les cinq valeurs.

      ["2023-11-16","18:20",136,80,52],

Tous les fichiers textes (notamment .htm et .js) sont encodés en UTF-8 (sans BOM).

À l'ouverture du fichier, l'éditeur de texte détecte automatiquement l'encodage.
Vérifier l'encodage.

Par sécurité, vous pensez à faire une sauvegarde mensuelle de vos données (= une copie du fichier data.js).

Analyser ses données

Maintenant que vos données sont enregistrées, vous pouvez les analyser.

Le fichier result.htm affiche les résultats d'une analyse.

Trois filtres sont mis à votre disposition.

Pour activer un filtre, il suffit de le cocher. Puis, indiquer les deux valeurs (pour borner les données à analyser)

Plus des filtres sont activés, plus les données seront filtrées ...
Si aucune donnée ne correspond au filtrage, une boîte de dialogue s'affiche signalant l'absence de résultat.

Après avoir cliqué sur le bouton "Analyser", s'affiche :

Un tableau reprenant la moyenne, le minimum, le maximum :
de la systolique, de la diastolique, de l'écart entre les tensions et des pulsations.

La période indiquée reprend la première date et la dernière date correspondant aux données filtrées (et non celles de l'intervalle de recherche (filtrage)).
Un graphique personnalisable affichant la systolique, la diastolique et l'écart entre les tensions.

Les titres du graphique sont des boutons ON/OFF. Ils affichent ou non la courbe concernée.

Au passage de la souris sur un point de la courbe, s'affiche les valeurs X et Y (date et tension)
Un bouton pour effacer les résultats de l'analyse et permettre une nouvelle analyse.

Si le filtre relatif à la systolique est activé et si au moins une mesure est hors des bornes fixées (par vous), une boîte de dialogue s'affiche indiquant le nombre de mesures hors des limites. Ce qui est utile pour surveiller une sur-tension.

Ici, la systolique a été 5 fois, sur 18 mesures prises, entre 140 et 200 mmHg
(sur la période considérée)

Idem pour la diastolique.

Les deux valeurs par défaut correspondent aux normes.

Normes

L'abscisse représente la diastolique
(L'ordonnée, la systolique)

Personnaliser

Personnaliser les filtres

Les valeurs par défaut des trois filtres peuvent être personnalisées. Il suffit de modifier le code HTM du fichier result.htm, via un éditeur de texte.

Aperçu du code HTML

En faisant une recherche avec les mots "Filtre période", "Filtre systolique" ou "Filtre diastolique", vous trouverez rapidement la zone de code HTML à modifier.

Vous ne devriez modifier que les "value=".

Une date est au format AAAA-MM-JJ. Un nombre est un entier positif.
Une valeur est toujours entourée de guillemets (y compris un nombre).

Personnaliser mensuellement le "Filtre période" vous fera gagner du temps.

Personnaliser le graphique

Les valeurs X (dates) du graphique peuvent facilement être personnalisées. Il suffit de modifier le code JS du fichier analys.js, via un éditeur de texte.

Code JS affichant la date et l'heure de la mesure :

    //x1.push(x[i][0].substr(8));   // date réduite à JJ
    x1.push(x[i][0]+" à "+x[i][1]); // AAAA-MM-JJ à HH:MM

Code JS n'affichant que le jour de la mesure :

    x1.push(x[i][0].substr(8));   // date réduite à JJ
    //x1.push(x[i][0]+" à "+x[i][1]); // AAAA-MM-JJ à HH:MM

Si vous savez ce que vous faites, vous pouvez enregistrer d'autres modifications. Afficher la courbe des pulsations, la couleur des courbes, ...

Travailler hors connexion

Pour utiliser l'application hors connexion Internet, le fichier result.htm doit être modifié.

Code HTML qui requiert une connexion Internet :

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script src="https://www.w3schools.com/lib/w3.js"></script>

Code HTML qui ne requiert pas une connexion Internet :

    <link rel="stylesheet" href="w3P.css" />
    <script src="chart.js"></script>
    <script src="w3P.js"></script>

Les fichiers chart.js, w3P.js et w3P.css doivent alors être présents dans le dossier d'installation de cette application.

Smartphone

L'application peut être téléchargée sur un smartphone, sur une tablette, ...

Ceci peut être utile pour votre médecin.

Divers

Tension artérielle optimale inférieure : < 120 mmHg  et < 80 mmHg
Tension artérielle normale             : [120-129]  et [80-84] mmHg
Tension artérielle normale élevée      : [130-139]  et [85-89] mmHg

On parle d'hypertension artérielle quand les valeurs dépassent 140/90 mmHg,
mais aussi si une seule des deux valeurs dépasse la limite.

La tension artérielle est maximale au réveil.

Plus d'informations sur la tension artérielle.

Tester

Cocher et décocher des filtres, modifier leurs valeurs, puis cliquer sur le bouton "Analyser".
Puis, cliquez sur les titres du graphique.