Visualisation des données sur une page web

Fév8

La série d’articles :

Partie 1 : Installation capteur DS18B20 et lecture en ligne de commande
Partie 2 : Lecture des valeurs avec un script Python basique
Partie 3 : Lecture des valeurs avec un script Python avancé et stockage dans une base MySQL
Partie 4 : Visualisation des données sur une page web

Dans la partie 3 de cet article nous avons vu comment stocker la température dans une base MySQL.

Le moment est venu d’afficher de jolies courbes sur une page web.

matériel necessaire :

  • une base MySQL
  • un serveur web avec php 5.6 (pour php 7 voir le commentaire de Bertrand plus bas)

Je vais vous montrer un exemple simple qui vous mettra le pied a l’étrier , ensuite vous n’aurez plus qu’a laisser parler votre imagination.

Temperature

Pour cela je vais utiliser une librairie de graphique qui s’appelle Highcharts. Elle est très connue, gratuite et il y a des tonnes d’info sur le web. Il n’y a rien a installer , on charge simplement la librairie au début de la page html

J’ai créé un exemple très simple en ne gardant que le strict nécessaire afin de rester le plus clair possible. il suffit de coller ce code dans un fichier index.php. ce code est prévu pour 2 sondes. nous supposerons que la table « PiTemp » contient ces champs « date, sonde1,sonde2 »

  • la partie HEAD permet de charger la librairie Highchart et JQuery
  • la partie php permet d’interroger la base et de préparer les données
  • la partie javascript permet d’afficher le graphique. cette partie n’est pas à écrire vous même , il suffit de copier/coller un exemple depuis le site highcharts.com puis de personnaliser vos options
<!DOCTYPE html>
<html>
<head>
    <title>Mes Temperatures</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<?php
// ************* preparation de la connexion a MySQL ****************************
    $hostname = "localhost";
    $database = "maBase";
    $username = "monUser";
    $password = "monPassword";

    function connectMaBase($hostname, $database, $username, $password){
        $Conn = mysql_connect ($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
        mysql_select_db($database, $Conn);
    }

// ************* preparation de la requete **************************************
    $query1 = "SELECT date, sonde1,sonde2 FROM PiTemp
                ORDER BY `date` DESC  LIMIT 4000";

// connexion mysql et lancement requete *****************************************
    connectMaBase($hostname, $database, $username, $password); // on ouvre la base
    $req1 = mysql_query($query1) ; // on lance la requete
    mysql_close(); // on ferme la base

// ********** traitement du resultat ********************************************
    while($data = mysql_fetch_assoc($req1)) {
        $dateD = strtotime($data[date]) * 1000; //transforme la date MySQL en timestamp
        $liste1[] = "[$dateD, $data[sonde1]]"; // format data pour highchart [x,y],[x,y].....
        $liste2[] = "[$dateD, $data[sonde2]]";
    }
    $liste1 = join(',', array_reverse($liste1)); // on inverse l'ordre car la requete SQL sort le resultat a l'envers
    $liste2 = join(',', array_reverse($liste2));

?>
<div id="graphique0"></div>
<script type="text/javascript">
//**ceci est du code Highcharts.com*************************************************************************
//** vous pouvez trouver toutes les decriptions des options sur le site officiel****************************
// temperature
$(function() {
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'graphique0',
            type: 'spline',
            zoomType: 'x',
            backgroundColor: null,
        },
        title: {
            text: 'Temperatures',
            style:{
                color: '#4572A7',
            },
        },
        legend: {
            enabled: true,
            backgroundColor: 'white',
            borderRadius: 14,
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%e. %b',
                year: '%b',
            }
         },
        yAxis: [{
            labels: {
                format: '{value} °C',
                style: {
                    color: '#C03000',
                },
            },
            title: {
                text: '',
                style: {
                    color: '#C03000',
                },
            }
        }],
        tooltip: {
            shared: true,
            crosshairs: true,
            borderRadius: 6,
            borderWidth: 3,
            xDateFormat: '%A %e %b  %H:%M:%S',
            valueSuffix: ' °C',
         },
        plotOptions: {
            spline: {
                marker: {
                    enabled: false,
                },
            },
        },

        series: [{
            name: 'sonde1',
            color: 'red',
            zIndex: 1,
            data: [<?php echo $liste1; ?>] // c'est ici qu'on insert les data
        }, {
            name: 'sonde2',
            color: 'blue',
            zIndex: 2,
            data: [<?php echo $liste2; ?>] // c'est ici qu'on insert les data
        }]
    });
});
</script>

</body>
</html>

28 réflexions sur “Visualisation des données sur une page web”

  1. merci jahislove pour tout ce travail.
    je suis arrivé a cette étape sans difficulté en rajoutant 2 sondes a votre programme initial, c’est exactement ce dont j’avais besoin
    je bidouille un peu et j’utilise votre boulot pour gérer les températures moteur sur un combi VW T3.
    j’ai quelques difficulté avec la courbes.
    le php fonctionne , lecture dans la base s’effectue correctement mais aucun affichage de la courbe
    je cherche , peut être un problème dans le scrip hihtchart.
    je vous remercie a l’avance de l’aide que vous pourriez m’apporter
    dd

    J’aime

    Réponse

    • le plus dur est fait 🙂
      difficile de trouver la cause a distance .comme tu as ajouté des sondes , il y a surement un truc que tu as modifié qui ne va pas.
      quand tu dit que les courbes ne s’affiche pas :
      – si les axes du graphique ne s’affiche pas du tout , c’est que tu as une erreur de syntaxe dans la partie javascript , le plus souvent une virgule oubliée en fin de ligne
      – si les axes sont visibles alors c’est ta structure de données qui n’est pas bonne , vérifie le contenu des variables tableau $liste

      J’aime

      Réponse

  2. GENIAL! ca marche
    merci++++++
    il me reste a installer sur le pi jquery et highcharts car le boitier
    sera installe dans le combi.
    j’espere que je vais m’en sortir!
    j’aimerai vous mettre une copie d’ecran de mon bazard.
    cdlt

    J’aime

    Réponse

      • bonjour Jasislove
        c’est ok , c’est super !
        maintenant je cale! j’aimerai recupérer la dernière valeur de $data[sonde1] dans la base de donnée
        j’essaye de la facon suivante:
        j’ai rajouté les lignes suivantes ??????

        ********* préparation de la requête *****
        $query2 = « SELECT sonde1 FROM PiTemp ORDER BY ‘date’ DESC LIMIT 1 »;

        ******** connexion mysql ***********
        $req2 = mysql_query($query2);

        ******** traitement du résultat *******
        $temperature1 = ??????

        je débute alors je ne sais pas si c’est la bonne méthode
        merci pour votre aide
        cdlt dédé

        J’aime

  3. ta requete est bonne ,
    ******** traitement du résultat *******
    $data = mysql_fetch_assoc($req2); // tu lit chaque ligne du resultat ( ici une seule ligne , si il y en avait eu plusieurs il aurait fallu une boucle while)
    $temperature1 = $data[sonde1]; // $data est un tableau

    J’aime

    Réponse

  5. Vraiment un super boulot, clair, précis, sans fioriture et compréhensible à partir du moment où on a quelques bases …
    Bref, un tuto qu’on suit avec plaisir, et qui est très pédagogique, merci !

    Quand en plus, cela correspond tout pile à ce que je cherchais … Je suis en train d’installer un Raspberry dans un voilier pour entre autres avoir une station météo embarquée, qui stocke des données en local, et qui se synchronise dès qu’il capte un wifi au port …

    Le seul hic, c’est que j’ai un souci pour attaquer la base sql quand elle est sur un serveur externe :
    – pour enregistrer sur mon serveur (dans le script python), ca passe en configurant localhost ou sur un server avec son ip mais pas avec son adresse en @domain.com
    – pour afficher la page web, il n’y a que si la base est déclarée en localhost que cela fonctionne, pas d’ip externe accessible, ni de @domain.com

    Y a t-il une syntaxe spécifique en python ?

    J’aime

    Réponse

  7. Je suis encore bloqué au niveau des graphes.
    Comment fait on pour faire tournez ce dernier code ?
    Je suppose qu’on le fait exécuter dans un navigateur web, mais comment ?
    Doit on ranger le code nommé index.php à un emplacement spécifique ? Et quelle commande doit on lancer dans la barre d’adresse du navigateur je suppose ?

    J’aime

    Réponse

    • il faut déposer le fichier index.php dans le répertoire d’accueil de ton serveur web (en general www ou web )
      ensuite il faut simplement acceder a la page web dans le navigateur avec l’adresse http://IP du serveur/index.php

      par contre cette page index n’affiche que les données qui sont dans la base MySQL , et pas dans SQlite , donc pense a remplir un peu mySQL avant pour avoir des choses a afficher

      J’aime

      Réponse

      • Oui, en faite, il faut enregistrer le programme dans un fichier, index.php (par exemple), et le placer dans /var/www/html.
        Ensuite, dans la barre d’adresse d’un navigateur on tape « 127.0.0.1/index.php » uo bien « localhost/index;php »

        J’aime

  8. Bonjour,
    Bien que dans la basse de données mysql les dates sont en « local time » , dans le graphique les relevés sont basés sur  » Universal time » ce qui fait 2 heures de décalage.
    -> 12H pour moi = 10H sur le graphique.
    C’est possible d’y faire quelque chose ?

    J’aime

    Réponse

  9. merci, je n’avais pas vu ta réponse, et je viens de faire d’ajouter juste avant la ligne 51 $(function() { :
    Highcharts.setOptions({
    global : {
    useUTC : true,
    timezoneOffset: -2 * 60 //GMT +2
    }
    });

    Ça fonctionne également

    J’aime

    Réponse

  13. Bonjour , je suis bien arrivé a avoir une base de données qui fonctionne mais l’affichage je n’ai rien du tout page blanche.
    je ne vois pas pourquoi , j’ai copié le code dans index. php , il y a bien une page qui s’ouvre avec le nom mes temperatures mais rien d’autre.
    Avez vous une idee du probleme
    MErci

    J’aime

    Réponse

    • difficile a dire comme ca .
      si tu as les axes du graphique qui s’affiche mais pas de courbe alors c’est un probleme dans ta liste de données
      si c’est une page blanche c’est plutot un probleme de syntaxe genre un point virgule oublié

      il faut aussi t’assurer que tu arrive bien a lire ta BDD , en affichant le contenu de la variable $liste1 :
      insere un echo $liste1; juste apres $liste2 = join(‘,’, array_reverse($liste2));

      J’aime

      Réponse

  14. Merci de ta réponse et félicitation pour tout ton travail!!
    J’ai entre temps trouver le problème: ça vient de PHP7, il y avait des problèmes de connexion à la base de données.
    Voici ce que j’ai modifié: ‘mysql_connect fonctionne que sur PHP5 sur PHP7 ca devient mysqli_connect
    En gros il faut rajouter des ‘i’ sur les instructions mysql et dans connect il faut aussi faire passer le nom de la table

    // connexion mysql et lancement requete *****************************************
    $link = mysqli_connect(« localhost », « root », « bebert », « test2 »);
    $req1 = mysqli_query($link,$query1) ; // on lance la requete
    mysqli_close(); // on ferme la base

    // ********** traitement du resultat ********************************************
    while($data = mysqli_fetch_assoc($req1)) {
    $dateD = strtotime($data[date]) * 1000; //transforme la date MySQL en timestamp
    $liste1[] = « [$dateD, $data[sonde1]] »; // format data pour highchart [x,y],[x,y]…..
    }
    $liste1 = join(‘,’, array_reverse($liste1)); // on inverse l’ordre car la requete SQL sort le resultat a l’e

    A+

    J’aime

    Réponse

  16. Bonjour Jahislove, je suis avec mes abeilles sur une ruche connectée (projet de 2017 que je reprends). Je vais dans un premier temps me re-familiariser avec Raspberry sur ce serveur WEB que tu décris ci-dessus. Entre temps, de nouvelles mises à jours sont apparues. Je vais passer sur Python 3. J’essaie tout cela avec 2 DS18B20 et un Arduino. Je te dirai si j’ai des difficultés. Encore un grand bravo pour ce travail.
    Marc.

    J’aime

    Réponse

Laisser un commentaire