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.