Actualiser des graphiques à intervalles réguliers

**Derko** · 08/02/2022, 10h42

Bonjour,
~~désolé pour le titre, il n'est pas très exhaustif.~~

Je détail un peu plus :
J'ai une page index.php qui appelle une fonction PHP qui va appeler un script PowerShell (windows) qui lui va écrire dans un fichier CSV. Ce fichier je le lis avec ma fonction PHP, je traite les données. Ces données je les envois en Jquery à ma fonction JS qui elle va traiter les données pour les transformer en graphique et les renvoyer à mon index.php. Dans le même temps, j'ai une autre fonction JS qui va actualiser, toutes les x secondes, le <div class="refresh"> dans lequel sont contenus mes graphiques. Pour info, j'utilise l'API chart.js pour générer mes graphiques.

Étape 1 : première connexion à index.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>My Server</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="js/chart.js"></script>
        <script src="js/perfServer.js">
        </script>
    </head>
    <body>  
        <!-- DEBUT Affichage des Performances du serveur -->
        <div class="refresh">         
            <?php
                // On appel la fonction PHP perfServer() qui renvoie un tableau contenant les valeurs requises pour afficher les graphiques
                include("fonctions/perfServer.php");
                $perfs = perfServer(); 
 
                // On encode les valeurs php en JSON pour les envoyer à la fonction JavaScript afficherChart() 
                $reseau = json_encode($perfs[0], JSON_NUMERIC_CHECK);
                $reseauMax = json_encode(2000000-$perfs[0], JSON_NUMERIC_CHECK);
                $canvasIdReseau = json_encode('reseauChart');
                $labelReseau = json_encode('Reseau Used');
 
                $processeur = json_encode($perfs[1], JSON_NUMERIC_CHECK);
                $processeurMax = json_encode(100-$perfs[1], JSON_NUMERIC_CHECK);
                $canvasIdProcesseur = json_encode('cpuChart');
                $labelProcesseur = json_encode('CPU Used');
 
                $ram = json_encode($perfs[2], JSON_NUMERIC_CHECK);
                $ramMax = json_encode(100-$perfs[2], JSON_NUMERIC_CHECK);
                $canvasIdRam = json_encode('ramChart');
                $labelRam = json_encode('RAM Used');      
            ?>
 
            <!-- On affiche les 3 graphiques Reseau, CPU et RAM grace à la fonction JavaScript afficherChart() -->
            <div class="row">            
                <div class="col-xl-4 col-sm-4 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title"><?php echo 'Network Used : '.$perfs[0]; ?></h4>
                            <canvas id="reseauChart"></canvas>
                            <script>
                                afficherChart(<?php echo $reseau.', '.$reseauMax.', '.$canvasIdReseau.', '.$labelReseau; ?>);
                            </script>                        
                        </div>
                    </div>
                </div>
 
                <div class="col-xl-4 col-sm-4 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title"><?php echo 'CPU Used : '.$perfs[1]; ?></h4>                            
                            <canvas id="cpuChart"></canvas>
                            <script> 
                                afficherChart(<?php echo $processeur.', '.$processeurMax.', '.$canvasIdProcesseur.', '.$labelProcesseur; ?>);                                
                            </script>         
                        </div>
                    </div>
                </div>
 
                <div class="col-xl-4 col-sm-4 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title"><?php echo 'RAM Used : '.$perfs[2]; ?></h4>
                            <canvas id="ramChart"></canvas>
                            <script> 
                                afficherChart(<?php echo $ram.', '.$ramMax.', '.$canvasIdRam.', '.$labelRam; ?>);                                
                            </script>
                        </div>
                    </div>        
                </div>
            </div>
        </div>                   
        <!-- FIN Affichage des Performances du serveur -->        
    </body>
</html>

On obtient le résultat suivant :
Nom : premiereCo.png
Affichages : 301
Taille : 58,6 Ko

Cette page index.php, appelle 3 fonctions :

# Une fonction JS perfServer.js : perfServer() qui actualise le contenu de mon <div class="refresh"> toutes les x secondes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
const parser = new DOMParser();
setTimeout(async function queryLoop() {
        const query = await fetch(location.href)
        const response = await query.text();
        const newDiv = parser.parseFromString(response, 'text/html').querySelector('div.refresh');
        const div = document.querySelector('.refresh');
        div.replaceWith(newDiv);
        setTimeout(queryLoop, 5000);
    },
    5000
);

# Une fonction PHP perfServeur.php : perfServeur() qui récupère des données via un script PowerShell, traite ces données et les renvoie à mon index.php dans le <div class="refresh">

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function perfServer()
{
    // On lance le script PowerShell perfServer.ps1 qui va écrire la commande Get-Counter dans le fichier perfServ_LOG.csv
    $output = shell_exec('powershell -executionpolicy remotesigned -command "& {"fonctions/perfServer.ps1"; exit $err}"');
 
    $handle = fopen("fonctions/perfServer_Log.csv", "r");
    $lineNumber = 1;                
 
    while (($raw_string = fgetcsv($handle, 1000, ',', '"')) !== false) 
    {
        if($lineNumber == 3)
        {
            $reseau = $raw_string[2];
            $reseau = str_replace(",", ".", $reseau);
            $reseau = (float) $reseau;
            $reseau = round($reseau, 0, PHP_ROUND_HALF_UP);                                             
        }
        elseif($lineNumber == 4)
        {
            $processeur = $raw_string[2];
            $processeur = str_replace(",", ".", $processeur);
            $processeur = (float) $processeur;
            $processeur = round($processeur, 2, PHP_ROUND_HALF_UP);
        }
        elseif($lineNumber == 5)
        {
            $ram = $raw_string[2];
            $ram = str_replace(",", ".", $ram);
            $ram = (float) $ram;
            $ram = round($ram, 2, PHP_ROUND_HALF_UP);
        }                    
        $lineNumber++;
    }
    fclose($handle);
 
    // On récupère les valeurs dans un tableau
    $perfServer = array($reseau, $processeur, $ram);
    // On retourne le tableau
    return $perfServer;
}

# Et une fonction JS chart.js : afficherChart() qui récupère les valeurs renvoyées par ma fonction PHP ci-dessus (après conversion de ces valeurs en JSON) pour créer des graphiques en temps réel et les affiche dans le fameux <div class=refresh"> de mon index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function afficherChart(perf, perfMax, canvas, label)
{
    const labels = [
        label,
        'Not Used'
    ];
    const data = {
        labels: labels,                                        
        datasets: [{
            data: [perf, perfMax],
            label: '',
            backgroundColor: [
                'rgb(124, 190, 51)',
                'rgb(58, 58, 58)'],
            borderColor: 'rgba(0, 0, 0, 0.50)',                                            
        }]
    };
    const config = {
        type: 'doughnut',
        data: data,
        options: {
        }
    };
    const myChart = new Chart(
        document.getElementById(canvas),
        config
    );
 
    return myChart;
}

L'actualisation du <div> fonctionne très bien, les valeurs sont bien récupérées toutes les x secondes.
Mais mes graphiques ne s'affichent que lors de la première connexion à ma page index.php et, du moment que l'actualisation du <div> a lieu, ils disparaissent.
Nom : actualisation.png
Affichages : 298
Taille : 7,6 Ko

Nom : actualisation.png
Affichages : 298
Taille : 7,6 Ko

Je n'arrive pas du tout à déterminer d'où cela provient. Est-ce un soucis avec ma fonction d'actualisation, un soucis d'appel de mes graphique ?
J'aurais tendance à accuser ma fonction d'actualisation mais plus par instinct que par réelle compréhension du problème. Car je me dis que cette fonction renvoie du text/html et non du JS.

Si quelqu'un a la patience de lire ce post, de le comprendre et de m'expliquer, ça serait super

Je vous remercie pour votre temps et je vous souhaite une très bonne semaine !
Cordialement,
Derko.

**SpaceFrog** · 08/02/2022, 11h28

après la mise à jour du div tu dois relancer ton initialisation ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 const myChart = new Chart(
        document.getElementById(canvas),
        config
    );

**Derko** · 08/02/2022, 13h04

Bonjour SpaceFrog,
merci pour ton intérêt

Je ne comprends pas ta réponse.
A mes yeux, l'initialisation se fait lors de l'actualisation du div car celui-ci contient justement les lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script>
     afficherChart(<?php echo $variable1.', '.$variable2.', '.$variable3.', '.$variable4; ?>);
</script>

Et donc rappel ma fonction afficherChart() à chaque actualisation.

A quel niveau ma logique coince ?

**SpaceFrog** · 08/02/2022, 14h06

Il s'agit sasn doute d'un souci de chronologie.
essaye de décaler plutot la mise à jour du div après le chargement du div ?

**Derko** · 08/02/2022, 14h24

Apparemment tu me parles par énigme pour que je comprenne par moi-même, ça me va !

Du coup, si j'ai bien compris ce que tu cherches à me dire, j'ai déplacé l'appel de mon script d'actualisation <script src="js/perfServer.js"></script> tout à la fin de ma page index.php. Juste avant la balise </body>.

Si c'était bien à cela que tu pensais, cela ne fonctionne pas.
Si ce n'était pas ça, pourrais-je avoir un autre indice ? Parce que je sèche :p

**NoSmoking** · 08/02/2022, 19h37

Bonjour,

Envoyé par Derko

A mes yeux, l'initialisation se fait lors de l'actualisation du div car celui-ci contient justement les lignes :

non ton contenu est bien remplacé mais le script n'est pas interprété.

Ton approche n'est pas la bonne !

Au départ tu crées tes graphiques et tu les références

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const chartReseau = new Chart(ctx, {...};
const chartCpu = new Chart(ctx, {...};
const chartRam = new Chart(ctx, {...};

Ensuite tu fais un appel Ajax vers la page qui va traiter/récupérer les données, par exemple recup_datas.php, qui elle va appeler ta fonction perfServer() et retourner un résultat formaté pour exploitation côté client.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
{
  "reseau": {
    // tes données
  },
  "ram": {
    // tes données      
  },
  "cpu": {
    // tes données      
  }
}

Côté client maintenant il ne te reste plus qu'à utiliser ces données, de les affecter à tes différentes « Charts » et à demander l' update de celles-ci : Updating Charts.

En aucun cas il ne te faut charger/relire la page d'origine complète ou alors structurer celle-ci pour qu'elle ne te renvoie que les données à mettre en graphique.

Actualiser des graphiques à intervalles réguliers [Chart.js]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager