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