Bonjour à toutes et à tous,

Je suis tout nouveau dans le domaine de chartjs et j'espère que ce forum est le bon. Merci de me rediriger si ce n'est pas le cas.

J'ai un morceau de code qui me permet d'afficher une courbe à partir d'un fichier csv envoyé à client WEB. Le fichier a cette allure et comporte 72 lignes.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
1,-84.05,42.025
2,-65.6,32.8
3,-36.9,18.45
4,-8.2,4.1
5,5.12,-2.56
6,29.72,-14.86
7,53.3,-26.65
8,79.95,-39.975
9,103.52,-51.76
...
Cela fonctionne bien, le code est le suivant :

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
      <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: [],
            datasets: [{
              label: 'Forme d\'onde',
              data: [],
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.5 // Filtrage du signal ; doit être compris entre 0 (pas de filtrage) et 1 (filtrage max)
            }]
          }
        });
 
        function updateChart() {
          fetch('/data')
            .then(response => response.text())
            .then(data => {
              const rows = data.split('\n');
              const labels = [];
              const values = [];
 
              rows.forEach(row => {
                const [label, value] = row.split(',');
                labels.push(label);
                values.push(parseFloat(value));
              });
 
              chart.data.labels = labels;
              chart.data.datasets[0].data = values;
              chart.update();
            });
        }
        setInterval(updateChart, 5000); // Mise à jour toutes les 5 secondes
      </script>
J'ai vu que pour afficher une deuxième courbe, il fallait ajouter un autre datasets. Ce que j'ai fait de la manière suivant :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
            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
            }]
Au résultat, cela m'ajoute un deuxième titre, mais pas de deuxième courbe.

J'ai essayé d'ajouter chart.data.datasets[1].data = values; après chart.data.datasets[0].data = values;. J'ai bien eu une deuxième courbe, mais elle a rerpis les mêmes valeurs que la première.

J'ai l'impression que cela se passe dans cette partie du code, mais je ne vois pas comment faire :

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
        function updateChart() {
          fetch('/data')
            .then(response => response.text())
            .then(data => {
              const rows = data.split('\n');
              const labels = [];
              const values = [];
 
              rows.forEach(row => { // balayage des valeurs de chaque ligne je suppose
                const [label, value] = row.split(',');
                labels.push(label);
                values.push(parseFloat(value));
              });
 
              chart.data.labels = labels;
              chart.data.datasets[0].data = values; // Intégration des valeurs dans la courbe [0] ?
              chart.update();
            });
        }
Merci pour votre aide.

Pierre.