Discussion :

[ChPr]

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.

[mathieu]

regardez l'exemple suivant, les valeurs des 2 courbes sont aux index `data` :
https://www.chartjs.org/docs/latest/...line/line.html

affichez l'objet qui contient les données pour vérifier qu'il a bien ce format.

[ChPr]

Merci "mathieu" pour ce lien.

Je l'avais déjà vu. Pour autant, je n'arrive pas à voir comment transposer ce qui y est dit dans mon programme.

J'ai écrit :

Code :

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

1
2
3
4
5
6
7
8
              let indx = 0;
              rows.forEach(row => {
                const [label, value] = row.split(',');
                labels.push(label);
                values.push(parseFloat(value));
                chart.data.datasets[indx].data = values;
                ++indx;
              });

du coup, plus rien ne s'affiche.

Est-ce que cette instruction const [label, value] = row.split(',');, appliqué à chaque ligne du fichier csv : n,v1,v2 fait bien qu'à la première passe, label = n et value = v1 et qu'à la deuxième passe, label = n et value = v2 ?

Je pense que je n'ai pas compris comment fonctionne cette boucle rows.forEach(row => { ...

Est-ce que le format du fichier csv tel que décrit précédemment est bon ?

Désolé, je ne vois pas comment faire.

Cordialement.

Pierre.

[ChPr]

Bon, je pense avoir trouvé. En tous cas, mes deux courbes s'affichent. Le code utilisé 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
        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(','); // J'ai supposé que de placer les deux valeurs l'une derrière l'autre fonctionnerait ! Apparemment oui.
                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();
            });
        }

Cordialement.

Pierre.