Discussion :

[cedricbzh]

Bonjour,

Tout d’abord je tiens à préciser que mon niveau en js est proche de zero...

Dans ma page php, j'appel une fonction pour afficher un graphique, qui fonctionne très bien:

Code HTML :

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

1
2
3
4
5
6
7
8
<div id="courbe">
                    <canvas id="mycanvas">
                        <script type="text/javascript">
                             courbe()
                        </script>
 
                    </canvas>
                </div>

Le code 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
74
75
76
77
78
79
80
81
82
83
84
function courbe(){
Chart.plugins.register({
 
 
});
$(document).ready(function(){
  $.ajax({
    url: "http://localhost/js/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var tempair = [];
      var ph= [];
      var redox= [];
      var pression= [];
      var heure = [];
 
      for(var i in data) {
        tempair.push(data[i].tempair);
        ph.push(data[i].ph);
        redox.push(data[i].redox);
        pression.push(data[i].pression);
        heure.push(data[i].heure);
 
      }
 
      var chartdata = {
        labels: heure,
        datasets : [
          {
            label: 'tempeau ',
	    fill: false,
 
            borderColor: 'rgba(72, 197, 237, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: tempair
 
          },
 
          {
            label: 'Ph ',
	    fill: false,
 
            borderColor: 'rgba(100, 200, 80, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: ph
          },
          {
            label: 'redox ',
	    fill: false,
 
            borderColor: 'rgba(220, 60, 60, 1)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: redox
          },
          {
            label: 'pression ',
	    fill: false,
 
            borderColor: 'rgba(60, 60, 2, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: pression,
		hidden: true
          }
        ]
      };
 
      var ctx = $("#mycanvas");
 
      var myLineChart = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});
}

Ce que je souhaiterais faire, c'est qu'en fonction d'un argument avec la fonction courbe() qu'une partie des données soit masquée à l'affichage du graphique, par exemple:

Code :

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

courbe(ph)

ne m'afficherais pas les données data:pression au chargement du graphique ,
que

Code :

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

courbe(pression)

ne m'afficherais pas les données data: tempair
etc.
J'arrive à masquer certaines données avec hidden:true mais ce n'est pas propre.

Si vous avez des exemples je prend
merci

[NoSmoking]

Bonjour,
reste à savoir si tu veux supprimer ou ne pas afficher les données.

Dans les deux cas tu peux modifier tes chartdata.datasets une fois celles-ci initialisées.

En supposant que le paramètre de ta fonction soit param déclaré comme suit

Code :

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

1
2
3
function courbe(param) {
    // le corps de la fonction
}

cas #1 : suppression

Code :

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

1
2
3
4
5
6
7
if (param) {
    // formatage pour le test
    param = param.trim().toLowerCase();
    const dataChart = chartdata.datasets;
    // si l'on veut supprimer la série
    chartdata.datasets = dataChart.filter((data) => param !== data.label.trim().toLowerCase());
}

cas #2 : ne pas afficher

Code :

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

1
2
3
4
5
6
7
8
9
if (param) {
    // formatage pour le test
    param = param.trim().toLowerCase();
    const dataChart = chartdata.datasets;
    // si l'on veut cacher la série
    dataChart.forEach((data) => {
        data.hidden = param === data.label.trim().toLowerCase();
    });
}

et la suite de ta fonction :

Code :

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

1
2
3
4
5
var ctx = document.getElementById("canvas");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: chartdata
});

[cedricbzh]

super merci, je vais tester ça

[cedricbzh]

C'est bon ça fonctionne, je te remercie

[cedricbzh]

J'essais de masquer les chartdata.datasets avec ton

Code :

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

1
2
3
4
5
6
7
8
9
if (param) {
    // formatage pour le test
    param = param.trim().toLowerCase();
    const dataChart = chartdata.datasets;
    // si l'on veut cacher la série
    dataChart.forEach((data) => {
        data.hidden = param === data.label.trim().toLowerCase();
    });
}

Ca fonctionne très bien avec un seul argument dans la fonction,
mais si je veux en masquer plusieurs, ca ne fonction pas, j'ai l’impression que la fonction forEach() n'es pas adapté.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
  if (param,param2){
    // formatage pour le test
    const dataChart = chartdata.datasets;
    param = param.trim().toLowerCase();
    param2 = param2.trim().toLowerCase();
 
    // si l'on veut cacher la série
    dataChart.forEach((data) => {
        data.hidden = param === data.label.trim().toLowerCase();
        data.hidden = param2 === data.label.trim().toLowerCase();
 
    });

[NoSmoking]

Dans ton cas on va considérer que tu écrire indifféremment

Code :

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

1
2
3
4
5
6
// pas de paramètre
courbe();
// un seul paramètre
courbe("ph");
// plusieurs paramètres, on utilise un Array
courbe(["ph", "redox"]);

La fonction devient dans ce cas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if (param) {
  [].concat(param).forEach((el) => {
    // formatage pour le test
    el = el.trim().toLowerCase();
    const dataChart = chartdata.datasets;
    // si l'on veut cacher la série
    dataChart.forEach((data) => {
      data.hidden = el === data.label.trim().toLowerCase() || data.hidden;
    });
  });
}

[EDIT] correction code pour ajout de || data.hidden prenant en compte l'état précédent,

l'astuce consiste à utiliser, [].concat(param), pour forcer un Array même si l'on a qu'un paramètre.

j'ai l’impression que la fonction forEach() n'es pas adapté.

Voir : Array.prototype.forEach()

[cedricbzh]

J'ai essayer ton code et je pense en comprendre une grande partie, par contre, peu importe l'ordre ou la quantité de paramètre que je mets dans ma fonction courbe(), il n'y que le dernier param qui est pris en compte.

J'ai ajouté un :

Code :

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

      console.log(el);

et pour la fonction :

Code :

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

1
2
3
<script>
 courbe(["tempeau","ph", "redox"]);
 </script>

J'obtiens dans la console :

Code :

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

1
2
3
4
 
tempeau 
ph 
redox

Donc le concat fonctionne

Code :

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

[].concat(param).forEach((el)

Code :

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

1
2
3
 
data.hidden = el === data.label.trim().toLowerCase();
 console.log(data.hidden);

Renvoi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
tempeau 
true
false 
redox
false
true
false
ph
false
true
false

En tout cas je te remercie pour ton aide, et ca me donne envie d'apprendre le js

[NoSmoking]

il n'y que le dernier param qui est pris en compte.

Bougre de nigaud que je suis , j'ai oublié de tenir compte de l'état précédent, il te faut donc modifier comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
if (param) {
    [].concat(param).forEach((el) => {
        // formatage pour le test
        el = el.trim().toLowerCase();
        // « pointe » sur les datas à traiter
        const dataChart = chartdata.datasets;
        // si l'on veut cacher la série
        dataChart.forEach((data) => {
            data.hidden = el === data.label.trim().toLowerCase() || data.hidden;
        });
    });
}

le || data.hidden tient compte de l'état précédent cela aurait pu s'écrire :

Code :

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

1
2
3
4
5
dataChart.forEach((data) => {
    if (!data.hidden) {
        data.hidden = el === data.label.trim().toLowerCase();
    }
});

En regardant on pourrait faire de façon plus concise et limiter le nombre d'itérations, par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
if (param) {
    // conversion en Array et formatage pour le test
    const masque = [].concat(param).map((el) => el.trim().toLowerCase());
    // « pointe » sur les datas à traiter
    const dataChart = chartdata.datasets;
    // masquage si dans la liste
    dataChart.forEach((data) => {
        data.hidden = masque.includes(data.label.trim().toLowerCase());
        // ou autre méthode
        // data.hidden = masque.indexOf(data.label.trim().toLowerCase()) > -1;
    });
}

PS : j'ai corrigé le code du post #6

[cedricbzh]

Excellent ça fonctionne parfaitement.
Merci !