Actualiser des graphiques à intervalles réguliers

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

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 : 228
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 : 226
Taille : 7,6 Ko

Nom : actualisation.png
Affichages : 226
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, 10h28

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, 12h04

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, 13h06

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, 13h24

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, 18h37

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.

**Derko** · 09/02/2022, 12h12

Salut NoSmoking,
merci pour ton intérêt

Je n'ai pas répondu tout de suite car je voulais essayer ce que tu préconisais. Je suis dessus depuis 4h ce matin. J'avoue que c'est en train de me rendre fou. Ça fait 10 jours que je suis sur ça. Et à chaque fois que j'ai l'impression d'avancer d'un pas, je recule de deux.
Bref, je lis, je test mais je crois que je ne comprends pas ce que je dois faire...

Je suis arrivé à ceci :
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
 
<!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>
    </head>
    <body>
        <!-- DEBUT du DIV actualisé -->
        <div class="refresh">         
            <?php
                include("fonctions/traitementData.php");
                $perfs = traitementData();      
            ?>
            <!-- DEBUT Affichage des Performances du serveur -->
            <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>
                        </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[3]; ?></h4>                            
                            <canvas id="cpuChart"></canvas>                                    
                        </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[6]; ?></h4>
                            <canvas id="ramChart"></canvas>
                        </div>
                    </div>        
                </div>
            </div>                  
            <!-- FIN Affichage des Performances du serveur -->
        </div>        
        <!-- FIN du DIV actualisé -->
 
        <!-- Script qui renvoie les graphiques avec les valeurs requises -->
        <script src="js/refreshChart.js"></script>
        <!-- Script qui actualise le div "refresh" -->   
        <script src="js/perfServer.js"></script>        
    </body>
</html>

traitementData.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
31
32
33
34
35
36
 
<?php
    function traitementData()
    {
        // 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 refreshChart()
        $res = $perfs[0];
        $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');
 
        $proc = $perfs[1];
        $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');
 
        $mem = $perfs[2];
        $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');
 
        $tablePerfServ = array($res, $reseau, $reseauMax, $proc, $processeur, $processeurMax, $mem, $ram, $ramMax);
?>
        <script>
                refreshChart(<?php echo $tablePerfServ; ?>);
        </script>
<?php
        return $tablePerfServ;
    }    
?>

refreshChart.js

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
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
 
function refreshChart(perf)
{
    const graphReseau = document.getElementById('reseauChart').getContext('2d');
    const chartReseau = new Chart(graphReseau, {
        type: 'doughnut',
        data: {
            labels: [
                'Reseau USED', 
                'Not Used',
            ],
            datasets: [
                {
                    data: [perf[1], perf[2]],
                    label: '',
                    backgroundColor: [
                        'rgb(124, 190, 51)',
                        'rgb(58, 58, 58)',
                    ],
                    borderColor: 'rgba(0, 0, 0, 0.50)',
                }
            ]
        }
    });
 
    const graphCpu = document.getElementById('cpuChart').getContext('2d');
    const chartCpu = new Chart(graphCpu, {
        type: 'doughnut',
        data: {
            labels: [
                'CPU USED', 
                'Not Used',
            ],
            datasets: [
                {
                    data: [perf[4], perf[5]],
                    label: '',
                    backgroundColor: [
                        'rgb(124, 190, 51)',
                        'rgb(58, 58, 58)',
                    ],
                    borderColor: 'rgba(0, 0, 0, 0.50)',
                }
            ]
        }
    });
 
    const graphRam = document.getElementById('ramChart').getContext('2d');
    const chartRam = new Chart(graphRam, {
        type: 'doughnut',
        data: {
            labels: [
                'RAM USED', 
                'Not Used',
            ],
            datasets: [
                {
                    data: [perf[7], perf[8]],
                    label: '',
                    backgroundColor: [
                        'rgb(124, 190, 51)',
                        'rgb(58, 58, 58)',
                    ],
                    borderColor: 'rgba(0, 0, 0, 0.50)',
                }
            ]
        }
    });
 
    chartReseau.update();
    chartCpu.update();
    chartRam.update();
}

Je sais que ce n'est pas la solution étant donné que cela ne fonctionne pas du tout.
Que ce soit lors de la première connexion ou après une actualisation, aucun graphique ne s'affichent.
Je ne comprends pas. Et je pense que je ne comprendrais pas par moi-même à moins de trouver un exemple concret (exemple que je ne trouve nul part après une centaine (sans mentir) d'heures de recherches). Ou une explication complète et détaillée de la marche à suivre.
Je sais que j'en demande peut-être beaucoup, mais je ne vois pas d'autres alternatives...

Cordialement,
Derko.

**Derko** · 09/02/2022, 17h25

Ok, j'ai compris un truc :
Grace à :

Code :

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

1
2
3
 
chartReseau.data.datasets[0].data = [<?php echo $perfs[1]; ?>, <?php echo $perfs[2]; ?>];
chartReseau.update();

Je n'ai en fait pas besoin d'envoyer de valeurs à ma fonction refreshChart()

Du coup j'ai fait comme ceci :

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
 
<!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>
    </head>
    <body>
        <!-- DEBUT du DIV actualisé -->
        <div class="refresh">         
            <?php
                include("fonctions/traitementData.php");
                $perfs = traitementData();      
            ?>
 
            <!-- DEBUT Affichage des Performances du serveur -->
            <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>
                        </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[3]; ?></h4>                            
                            <canvas id="cpuChart"></canvas>                                    
                        </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[6]; ?></h4>
                            <canvas id="ramChart"></canvas>
                        </div>
                    </div>        
                </div>
            </div>                  
            <!-- FIN Affichage des Performances du serveur -->
 
 
        </div>        
        <!-- FIN du DIV actualisé -->
        <script src="js/chart.js"></script>
        <script>
            chartReseau.data.datasets[0].data = [<?php echo $perfs[1]; ?>, <?php echo $perfs[2]; ?>];
            chartReseau.update();
            chartCpu.data.datasets[0].data = [<?php echo $perfs[4]; ?>, <?php echo $perfs[5]; ?>];
            chartCpu.update();
            chartRam.data.datasets[0].data = [<?php echo $perfs[7]; ?>, <?php echo $perfs[8]; ?>];
            chartRam.update();
        </script>
        <!-- Script qui actualise le div "refresh" -->   
        <script src="js/perfServer.js"></script>        
    </body>
</html>

chart.js :

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
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
 
const graphReseau = document.getElementById('reseauChart').getContext('2d');
const chartReseau = new Chart(graphReseau, {
    type: 'doughnut',
    data: {
        labels: [
            'Reseau USED', 
            'Not Used',
        ],
        datasets: [
            {
                data: [0, 0],
                label: '',
                backgroundColor: [
                    'rgb(124, 190, 51)',
                    'rgb(58, 58, 58)',
                ],
                borderColor: 'rgba(0, 0, 0, 0.50)',
            }
        ]
    }
});
 
const graphCpu = document.getElementById('cpuChart').getContext('2d');
const chartCpu = new Chart(graphCpu, {
    type: 'doughnut',
    data: {
        labels: [
            'CPU USED', 
            'Not Used',
        ],
        datasets: [
            {
                data: [0, 0],
                label: '',
                backgroundColor: [
                    'rgb(124, 190, 51)',
                    'rgb(58, 58, 58)',
                ],
                borderColor: 'rgba(0, 0, 0, 0.50)',
            }
        ]
    }
});
 
const graphRam = document.getElementById('ramChart').getContext('2d');
const chartRam = new Chart(graphRam, {
    type: 'doughnut',
    data: {
        labels: [
            'RAM USED', 
            'Not Used',
        ],
        datasets: [
            {
                data: [0, 0],
                label: '',
                backgroundColor: [
                    'rgb(124, 190, 51)',
                    'rgb(58, 58, 58)',
                ],
                borderColor: 'rgba(0, 0, 0, 0.50)',
            }
        ]
    }
});

traitementData.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
31
 
<?php
    function traitementData()
    {
        // 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()
        $res = $perfs[0];
        $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');
 
        $proc = $perfs[1];
        $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');
 
        $mem = $perfs[2];
        $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');
 
        $tablePerfServ = array($res, $reseau, $reseauMax, $proc, $processeur, $processeurMax, $mem, $ram, $ramMax);
        return $tablePerfServ;
    }    
?>

En gros :
- L'index appel la fonction traitementData()
- L'index charge les graphiques depuis chart.js
- Les graphiques apparaissent avec les valeurs retournées par traitementData()
- Actualisation du div grâce à la page perfServer.js
- Les données sont actualisées mais les graphiques disparaissent.

Donc retour à la case départ, MAIS au moins j'ai compris qu'avec les lignes :

Code :

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

1
2
3
 
chartReseau.data.datasets[0].data = [<?php echo $perfs[1]; ?>, <?php echo $perfs[2]; ?>];
chartReseau.update();

Je n'avais pas besoin de créer une fonction refreshChart().

Je sens que je ne suis plus très loin mais je bloque toujours sur ce même problème...
ET CA M’ÉNERVE !!!!!
Mais j'y crois ! Oh oui j'y crois !!!!!!!

**NoSmoking** · 09/02/2022, 18h34

ET CA M’ÉNERVE !!!!!

il faut rester

Reprenons tranquillement.

Création du fichier HTML dans lequel on va finir par tout retrouver, on verra cela en fin.

Concernant le processus
• Affichage de la page.
• Exécution du script quand celle-ci est chargée, donc pas besoin de mélanger PHP-HTML-JS.

Dans le script, il faut considérer trois étapes :

Création de graphiques
Requête pour récupérer les infos
Mise à jour des informations recueillies

• Création de graphiques vides dans un premier temps :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// créaton des graphiques vides
const optDatasets =  [{
      data: [],
      label: '',
      backgroundColor: [
        'rgb(124, 190, 51)',
        'rgb(58, 58, 58)',
      ],
      borderColor: 'rgba(0, 0, 0, 0.50)',
    }];
 
const graphReseau = document.getElementById('reseauChart')
  .getContext('2d');
const chartReseau = new Chart(graphReseau, {
  type: 'doughnut',
  data: {
    labels: [
      'Reseau USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});
const graphCpu = document.getElementById('cpuChart')
  .getContext('2d');
const chartCpu = new Chart(graphCpu, {
  type: 'doughnut',
  data: {
    labels: [
      'CPU USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});
const graphRam = document.getElementById('ramChart')
  .getContext('2d');
const chartRam = new Chart(graphRam, {
  type: 'doughnut',
  data: {
    labels: [
      'RAM USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});

... la configuration est juste factorisée.

• Requête pour récupérer les infos :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// function de requête
function getAjaxDatas() {
  const url = "recup_datas.php";
  const delai = 2000;
  fetch(url)
    .then(response => response.json())
    .then(datas => {
      // update des Charts
      updateGraphique(datas);
      // rappel de la function après délai
      setTimeout(getAjaxDatas, delai);
    });
};

... on ne peut plus simple, il faut que le fichier qui contient la routine de récupération des données s'appelle recup_datas.php dans l'exemple ci-dessus.
Les données récupérées sont transmises à la fonction de mise à jour.

• Mise à jour des informations recueillies:

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
// function de mise à jour
function updateGraphique(datas) {
  // récup des titres
  const title = [
    `Network Used : ${datas[0][0]}`,
    `CPU Used : ${datas[1][0]}`,
    `RAM Used : ${datas[2][0]}`
  ];
  // affectation et mise à jour
  chartReseau.data.datasets[0].data = datas[0];
  chartReseau.update();
  chartReseau.canvas.previousElementSibling.textContent = title[0];
 
  chartCpu.data.datasets[0].data = datas[1];
  chartCpu.update();
  chartCpu.canvas.previousElementSibling.textContent = title[1];
 
  chartRam.data.datasets[0].data = datas[2];
  chartRam.update();
  chartRam.canvas.previousElementSibling.textContent = title[2];
}

... dans le cas présent on considère que tu reçois quelque chose comme

Code :

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

1
2
3
4
5
[
  [val1, val2],
  [val1, val2],
  [val1, val2]
]

... à aménager si ce n'est pas le bon format.
Dans cette fonction on fait les mises à jour des données mais également des titres et ... tout ce que l'on souhaite.

Là on n'a rien mélangé, chaque fonction à un rôle bien défini.

Pour lancer la mise à jour il suffit, en fin de script, de faire l'appel à la fonction getAjaxDatas() et tout s'enchainera.

On récapitule sous forme d'un fichier complet :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>
</head>
<body>
<header>
  <h1 class="text-center">Mon serveur</h1>
</header>
<section class="container">
  <!-- DEBUT Affichage des Performances du serveur -->
  <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">Network Used :</h4>
          <canvas id="reseauChart"></canvas>
        </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">CPU Used :</h4>
          <canvas id="cpuChart"></canvas>
        </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">RAM Used : </h4>
          <canvas id="ramChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
// function de requête
function getAjaxDatas() {
  const url = "recup_datas.php";
  const delai = 2000;
  fetch(url)
    .then(response => response.json())
    .then(datas => {
      // update des Charts
      updateGraphique(datas);
      // rappel de la function après délai
      setTimeout(getAjaxDatas, delai);
    });
};
// function de mise à jour
function updateGraphique(datas) {
  // récup des titres
  const title = [
    `Network Used : ${datas[0][0]}`,
    `CPU Used : ${datas[1][0]}`,
    `RAM Used : ${datas[2][0]}`
  ];
  // affectation et mise à jour
  chartReseau.data.datasets[0].data = datas[0];
  chartReseau.update();
  chartReseau.canvas.previousElementSibling.textContent = title[0];
 
  chartCpu.data.datasets[0].data = datas[1];
  chartCpu.update();
  chartCpu.canvas.previousElementSibling.textContent = title[1];
 
  chartRam.data.datasets[0].data = datas[2];
  chartRam.update();
  chartRam.canvas.previousElementSibling.textContent = title[2];
}
// créaton des graphiques vides
const optDatasets =  [{
      data: [],
      label: '',
      backgroundColor: [
        'rgb(124, 190, 51)',
        'rgb(58, 58, 58)',
      ],
      borderColor: 'rgba(0, 0, 0, 0.50)',
    }];
 
const graphReseau = document.getElementById('reseauChart')
  .getContext('2d');
const chartReseau = new Chart(graphReseau, {
  type: 'doughnut',
  data: {
    labels: [
      'Reseau USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});
const graphCpu = document.getElementById('cpuChart')
  .getContext('2d');
const chartCpu = new Chart(graphCpu, {
  type: 'doughnut',
  data: {
    labels: [
      'CPU USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});
const graphRam = document.getElementById('ramChart')
  .getContext('2d');
const chartRam = new Chart(graphRam, {
  type: 'doughnut',
  data: {
    labels: [
      'RAM USED',
      'Not Used',
    ],
    datasets: optDatasets
  }
});
// lance la mise à jour
getAjaxDatas();
</script>
</body>
</html>

Je te laisse finaliser, regrouper, externaliser, et si tu veux tester simplement tu pourrais utiliser un fichier recup_datas.php simple comme par exemple :

Code php :

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

1
2
3
4
5
6
7
8
<?php
$value = rand(10,100);
$result [] = [$value, 100-$value];
$value = rand(10,100);
$result [] = [$value, 100-$value];
$value = rand(10,100);
$result [] = [$value, 100-$value];
echo json_encode($result);

**Derko** · 10/02/2022, 09h28

Envoyé par NoSmoking

il faut rester

C'était une extériorisation écrite, pour éviter à mes voisins d'appeler la police :p

Franchement NoSmoking, je ne sais pas quoi dire...
Après plusieurs heures de recherches et de tests pour comprendre ton code :

CA FONCTIONNE PARFAITEMENT !

Quel soulagement d'arriver enfin à quelque chose !

Vraiment, merci du fond du cœur.

D'ailleurs, quand mon projet sera terminé, j'ai pensé à une page spéciale pour remercier toutes les personnes qui m'ont aidé. Ce n'est pas grand chose, mais à moins qu'un jour tu es besoin d'aide pour un déménagement, je ne vois pas comment te témoigner ma gratitude autrement

J'affiche le code ci-dessous pour ceux que le résultat peut intéresser :

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
<!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>
 
        <!-- DEBUT Affichage des Performances du serveur -->
        <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">Net Used : </h4>
                        <canvas id="reseauChart"></canvas>
                    </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">CPU Used : </h4>                            
                        <canvas id="cpuChart"></canvas>                                    
                    </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">RAM Used : </h4>
                        <canvas id="ramChart"></canvas>
                    </div>
                </div>        
            </div>
        </div>                  
        <!-- FIN Affichage des Performances du serveur -->        
 
        <!-- Création des grahiques vide -->
        <script src="js/chart.js"></script>
        <!-- On met à jour les graphiques -->
        <script src="js/refreshChart.js">getAjaxDatas();</script>
        <script>console.log(getAjaxDatas());</script> 
    </body>
</html>

chart.js

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// créaton des graphiques vides
const optDatasets =  [{
    data: [],
    label: '',
    backgroundColor: [
      'rgb(124, 190, 51)',
      'rgb(58, 58, 58)',
    ],
    borderColor: 'rgba(0, 0, 0, 0.50)',
  }];
 
// Graph Réseau
const graphReseau = document.getElementById('reseauChart');
const chartReseau = new Chart(graphReseau, {
  type: 'doughnut',
  data: {
    labels: [
      'Net USED',
      'Free',
    ],
    datasets: optDatasets
  }
});
 
// Graph CPU
const graphCpu = document.getElementById('cpuChart');
const chartCpu = new Chart(graphCpu, {
  type: 'doughnut',
  data: {
    labels: [
      'CPU USED',
      'Free',
    ],
    datasets: optDatasets
  }
});
 
// Graph RAM
const graphRam = document.getElementById('ramChart');
const chartRam = new Chart(graphRam, {
  type: 'doughnut',
  data: {
    labels: [
      'RAM USED',
      'Free',
    ],
    datasets: optDatasets
  }
});

refreshChart.js

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
31
32
33
34
35
36
37
38
39
// function de requête
function getAjaxDatas() 
{
    const url = "fonctions/traitementDatas.php";
    const delai = 5000;
    fetch(url)
        .then(response => response.json())
        .then(datas => {
            // update des Charts
            updateGraphique(datas);
            // rappel de la function après délai
            setTimeout(getAjaxDatas, delai);
 
      });
  };
 
 
// function de mise à jour
function updateGraphique(datas) 
{
    // récup des titres
    const title = [
        `Network Used : ${datas[0][0]}`,
        `CPU Used : ${datas[1][0]}`,
        `RAM Used : ${datas[2][0]}`
    ];
    // affectation et mise à jour
    chartReseau.data.datasets[0].data = datas[0];
    chartReseau.update();
    chartReseau.canvas.previousElementSibling.textContent = title[0];
 
    chartCpu.data.datasets[0].data = datas[1];
    chartCpu.update();
    chartCpu.canvas.previousElementSibling.textContent = title[1];
 
    chartRam.data.datasets[0].data = datas[2];
    chartRam.update();
    chartRam.canvas.previousElementSibling.textContent = title[2];
  }

traitementsDatas.php

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
<?php
    // On appel la fonction PHP perfServer() qui permet de récupérer les valeurs requises pour la suite du traitement
    include("../fonctions/perfServer.php");
    $perfs = perfServer();     
 
    $net = $perfs[0];
    $netMax = (100-$perfs[0]);    
    $cpu = $perfs[1];
    $cpuMax = (100-$perfs[1]);
    $ram = $perfs[2];
    $ramMax = (100-$perfs[2]);    
 
    $resultPerfs [] = [$net, $netMax];
    $resultPerfs [] = [$cpu, $cpuMax];
    $resultPerfs [] = [$ram, $ramMax];
 
    echo json_encode($resultPerfs);   
?>

perfServer.php

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
    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;
                // On retoune un pourcentage du réseau. 1650000 = mon débit max
                $reseau = (($reseau*100)/1650000);
                $reseau = round($reseau, 2, 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 ajoute les valeurs dans la BDD en appelant la fonction ajoutPerfBdd
        ajoutPerfBDD($perfServer);
        // On retourne le tableau
        return $perfServer;
    }
 
    function ajoutPerfBdd($perf)
    {
        include("../includes/database.php"); 
        $ajoutPerfs = $bdd->prepare('INSERT INTO perfserver(date, reseau, processeur, ram) VALUES (:date, :reseau, :processeur, :ram)');
        $ajoutPerfs->execute(array(
        'date' => date("d-m-Y \- H:i:s"),
        'reseau' => $perf[0],
        'processeur' => $perf[1],
        'ram' => $perf[2]));
    }
?>

perfServer.ps1

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
$varCheminRepertoireScript = [System.IO.Path]::GetDirectoryName($MyInvocation.MyCommand.Definition)
$currentScriptName = $MyInvocation.MyCommand.Name #Récupération du nom du script en cours
 
#On ne prend que le nom du script sans l'extention. Pour cela on chercher la position d'un point en partant de la droite et on prend tout ce qui est à sa gauche
$currentScriptName = $currentScriptName.substring(0,$($currentScriptName.lastindexofany(".")))
 
#Création du fichier vierge
$EmplacementFichier = "$varCheminRepertoireScript\$($currentScriptName)_Log.csv"
$MonFichier = New-Item -type file $EmplacementFichier -Force
 
(Get-Counter).CounterSamples | Export-Csv $MonFichier

Voila, tout est là

Je pense qu'il peut y avoir quelques petites améliorations pour une optimisation maximale, mais ça fonctionne parfaitement.
Pour toutes questions sur les scripts, n'hésitez pas à me contacter en MP.
Je vais pouvoir avancer dans mon projet tout en continuant l'apprentissage de JS et AJAX.

Merci encore à tous ceux qui m'ont aidé sur cette partie.

Je vous souhaite une excellente journée et une très bonne fin de semaine.
Très cordialement,
Derko.

**Derko** · 10/02/2022, 10h28

ALERTE ! (lol)

J'ai un petit soucis.

Quand j'ajoute les lignes suivantes à ma page perfServer.php :

Code php :

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

1
2
3
4
5
6
// Je test si l'utilisateur est l'admin, pour que lui seul puisse ajouter les données dans la BDD (histoire d'éviter les doublons et une accumulation de lignes inutiles)
if($_SESSION['rangID'] >= 60)
{
      // On ajoute les valeurs dans la BDD en appelant la fonction ajoutPerfBdd
      ajoutPerfBDD($perfServer);
}

Cela me renvoie l'erreur (via la console.log()) :

Nom : erreurAppelChart.js.png
Affichages : 156
Taille : 2,7 Ko

Et du coup mes graphiques ne s'affichent plus (que je sois connecté avec le compte admin ou un autre plus faible) et plus rien de s'actualise.

Ce qui me rend perplexe car je ne vois pas en quoi cela impact la collecte de données oO

Une idée ?

perfServer.php (page avant modif) :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
    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;
                // On retoune un pourcentage du réseau. 1650000 = mon débit max
                $reseau = (($reseau*100)/1650000);
                $reseau = round($reseau, 2, 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 ajoute les valeurs dans la BDD en appelant la fonction ajoutPerfBdd
        ajoutPerfBDD($perfServer);
 
        // On retourne le tableau
        return $perfServer;
    }
 
    function ajoutPerfBdd($perf)
    {
            date_default_timezone_set('Europe/Paris');
            include("../includes/database.php"); 
            $ajoutPerfs = $bdd->prepare('INSERT INTO perfserver(date, reseau, processeur, ram) VALUES (:date, :reseau, :processeur, :ram)');
            $ajoutPerfs->execute(array(
            'date' => date("d-m-Y \- H:i:s"),
            'reseau' => $perf[0],
            'processeur' => $perf[1],
            'ram' => $perf[2]));
    }

perfServer.php (page après ajout IF) :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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;
            // On retoune un pourcentage du réseau. 1650000 = mon débit max
            $reseau = (($reseau*100)/1650000);
            $reseau = round($reseau, 2, 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);
 
    // Je test si l'utilisateur est l'admin, pour que lui seul puisse ajouter les données dans la BDD (histoire d'éviter les doublons et une accumulation de lignes inutiles)
    if($_SESSION['rangID'] >= 60)
    {
        ajoutPerfBDD($perfServer);
    }      
 
    // On retourne le tableau
    return $perfServer;
}
 
function ajoutPerfBdd($perf)
{
        date_default_timezone_set('Europe/Paris');
        include("../includes/database.php"); 
        $ajoutPerfs = $bdd->prepare('INSERT INTO perfserver(date, reseau, processeur, ram) VALUES (:date, :reseau, :processeur, :ram)');
        $ajoutPerfs->execute(array(
        'date' => date("d-m-Y \- H:i:s"),
        'reseau' => $perf[0],
        'processeur' => $perf[1],
        'ram' => $perf[2]));
}

**NoSmoking** · 10/02/2022, 18h18

2 points :

Point #1

Code html :

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

1
2
3
4
5
<!-- Création des grahiques vide -->
<script src="js/chart.js"></script>
<!-- On met à jour les graphiques -->
<script src="js/refreshChart.js">getAjaxDatas();</script>
<script>console.log(getAjaxDatas());</script>

j'aurais mis tout dans le même fichier JS, pour info, tes écritures ne sont pas correctes, si tu mets un attribut src à une balise <script> ce qui est contenu à l'intérieur n'est pas exécuté.

Point #2

Pour rappel :

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Concerant l'erreur : JSON.parse: unexpected character at line 1 column 1 of the JSON data, cela vient surement du fait que tu as une erreur dans ta page PHP et que le retour n'est par conséquent pas un format JSON valide.

Lance ta page directement dans le navigateur, tu devrais avoir toutes les infos pour régler ce souci, tu risque d'avoir un retour qui doit ressembler à :

Code html :

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

<br />\n<b>Fatal error</b>:  ...description de l'erreur

**Derko** · 11/02/2022, 08h22

D'acc merci encore à toi.
Je clos le sujet pour éviter tout soucis avec les règles du forum

Bonne continuation !
Cordialement,
Derko.

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

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager