Caché une courbe en fonction d'un argument dans la fonction

Version imprimable

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:

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:

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:

courbe(ph)

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

Code:

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

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:

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

cas #1 : suppression

Code:

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:

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:

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

02/05/2020, 12h44
cedricbzh

super merci, je vais tester ça
02/05/2020, 22h23
cedricbzh

C'est bon ça fonctionne, je te remercie

J'essais de masquer les chartdata.datasets avec ton

Code:

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:

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();
 
    });

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

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:

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.

Citation:

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

Voir : Array.prototype.forEach()

03/05/2020, 21h06
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:

console.log(el);

et pour la fonction :
Code:

1 2 3 <script> courbe(["tempeau","ph", "redox"]); </script>
J'obtiens dans la console :
Code:

1 2 3 4 tempeau ph redox
Donc le concat fonctionne

Code:

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

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

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

Citation:

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

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

Code:

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:

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:

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

05/05/2020, 07h02
cedricbzh

Excellent ça fonctionne parfaitement.
Merci !