Lancer un graphique chartjs sans récurrence

International Français
1

Bonjour à toutes et à tous,

Dans un précédent fil, j'ai évoqué mes problème pour afficher plusieurs courbes sur un même graphique. Je l'ai résolu d'un certaine manière.

Maintenant, avec le code que j'ai, dès lors que j'envoie l'adresse du serveur dans mon navigateur, l'affichage des courbes se fait automatiquement et récursivement, je suppose grâce à la fonction setInterval(updateChart, 5000);

Ce que je voudrais, est qu'il n'y ait pas de récursivité, mais un simple affichage , c'est tout. Comment faire ?

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", R"rawliteral(

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ESP32 Routeur photovoltaïque</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>
    <body>
      <h1 style="text-align: center;">ESP32 Routeur photovoltaïque</h1>
      <canvas id="myChart" width="800" height="300"></canvas>
      
      <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: [],
            datasets: [{
              label: 'Forme d\'onde 1',
              data: [],
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.5 // Filtrage du signal ; doit être compris entre 0 (pas de filtrage) et 1 (filtrage max)
            },{
              label: 'Forme d\'onde 2',
              data: [],
              borderColor: 'rgb(192, 192, 75)',
              tension: 0.1
            }]
          }
        });

        function updateChart() {
          fetch('/data')
            .then(response => response.text())
            .then(data => {
              const rows = data.split('\n');
              const labels = [];
              const values0 = [];
              const values1 = [];
              rows.forEach(row => {
                const [label, value0, value1] = row.split(',');
                labels.push(label);
                values0.push(parseFloat(value0));
                values1.push(parseFloat(value1));
              });
              
              chart.data.labels = labels;
              chart.data.datasets[0].data = values0;
              chart.data.datasets[1].data = values1;
              chart.update();
            });
        }
        setInterval(updateChart, 5000); // Mise à jour toutes les 5 secondes
      </script>
    </body>
    </html>
  )rawliteral");

  });
  
  server.on("/data", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/Onde2.csv", "text/csv");
  });

Cordialement.

Pierre.

2

Oui la fonction setInterval, déclenche l'appel périodique de la fonction donnée en paramètre.
Du coup il n'y pas de récursivité.
Si tu veux appeler la fonction updateChart au bout de 5s, il faut plutôt utiliser setTimeout ou si tu veux quand même utiliser setInterval, appeler la fonction clearInterval dans ta fonction updateChart

3

Merci "terwal" pour ces infos supplémentaires.

Je vais ouvrir un autre fil car mon problème est plus large. Je vais tenter de l'expliquer.

Cordialement.

Pierre

4

Désolé d'avoir été si long, je t'ai fait un petit code HTML d'exemple, mais je ne suis pas sûr que c'est exactement ce que tu veux.

Je n'ai quasiment pas changé ton code, j'ai simplement supprimer le tag de lien, pour utiliser directement l'evenement onclick du tag button.
Du coup maintenant lorsque tu cliques sur le bouton cela exécute ta fonction updateChart.
Du coup j'ai aussi supprimer le setinterval qui il me semble n'a plus d'utilité ?
Mais on pourrait rajouter aussi un rafraichissement automatique si besoin.

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ESP32 Routeur photovoltaïque</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>
    <body>
      <h1 style="text-align: center;">ESP32 Routeur photovoltaïque</h1>
      <button onclick="updateChart();" class="button button-data">Rafraichissement des données</button>
      <canvas id="myChart" width="800" height="300"></canvas>
      
      <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: [],
            datasets: [{
              label: "Forme d\'onde 1",
              data: [],
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.5 // Filtrage du signal ; doit être compris entre 0 (pas de filtrage) et 1 (filtrage max)
            },{
              label: "Forme d\'onde 2",
              data: [],
              borderColor: 'rgb(192, 192, 75)',
              tension: 0.1
            }]
          }
        });

        function updateChart() {
          fetch('/data')
            .then(response => response.json())
            .then(data => {
              const labels = data.labels;
              const values0 = data.values0;
              const values1 = data.values1;
              
              chart.data.labels = labels;
              chart.data.datasets[0].data = values0;
              chart.data.datasets[1].data = values1;
              chart.update();
            });
        }
      </script>
    </body>
    </html>
5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.