Graphique multi linéaire avec données dynamiques

Version imprimable

2 pièce(s) jointe(s)

Bonjour à tous
Je viens demander votre aide afin de trouver solution à un problème auquel je fait face.

J'essai de construire un graphique multi linéaire avec des données provenant d'une base de données. Je sais le faire (un peu) en temps normal sauf que la, certains paramètres peuvent varier.
En clair j'ai la base de données ci dessous, les données sont constituées de : agent, mesure et valeur. Chaque agent (agent) prend x nombre (mes) de mesures (val). Ce qui fait que le nombre d'agents peut varier, le nombres de mesures également.
Je souhaiterai récupérer les données et construire un graphique sur lequel seront représentés les valeurs prises par chaque agent lors des différentes mesures.
La je bloque car je n'ai jamais eu affaire à un tel problème et je ne sais pas comment le régler. Je viens donc vous demander votre aide.

J'utilise Chart js pour le graphique.

Ma bdd
Pièce jointe 620291

Le graphique souhaité
Pièce jointe 620294

Les données récupérées (encore merci à @Séb et @darkstar123456 pour l'aide précieuse)

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
Array
(
    [mes1] => Array
        (
            [0] => Array
                (
                    [mes] => mes1
                    [1] => mes1
                    [agent] => agent1
                    [2] => agent1
                    [valeur] => 0.001
                    [3] => 0.001
                )
 
            [1] => Array
                (
                    [mes] => mes1
                    [1] => mes1
                    [agent] => agent2
                    [2] => agent2
                    [valeur] => 0.002
                    [3] => 0.002
                )
 
            [2] => Array
                (
                    [mes] => mes1
                    [1] => mes1
                    [agent] => agent3
                    [2] => agent3
                    [valeur] => 0.003
                    [3] => 0.003
                )
 
        )
 
    [mes2] => Array
        (
            [0] => Array
                (
                    [mes] => mes2
                    [1] => mes2
                    [agent] => agent1
                    [2] => agent1
                    [valeur] => 0.004
                    [3] => 0.004
                )
 
            [1] => Array
                (
                    [mes] => mes2
                    [1] => mes2
                    [agent] => agent2
                    [2] => agent2
                    [valeur] => 0.005
                    [3] => 0.005
                )
 
            [2] => Array
                (
                    [mes] => mes2
                    [1] => mes2
                    [agent] => agent3
                    [2] => agent3
                    [valeur] => 0.006
                    [3] => 0.006
                )
 
        )
 
)

Le code pour le graphique

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
$(function(){
 
  var ctx = $("#line-chartcanvas");
 
  var data = {
    labels: ["mes 1", "mes 2", "mes 3", "mes 4"], //Liste des agents
    datasets: [
      {
        label: "agent 1",
        data: [10, 50, 25, 70, 40], //j'aurai souhaitée pouvoir specifié mes 1 et mes 2
        backgroundColor: "blue",
        borderColor: "lightblue",
        fill: false,
        lineTension: 0,
        radius: 5
      },
      {
        label: "agent 2",
        data: [20, 35, 40, 60, 50],
        backgroundColor: "green",
        borderColor: "lightgreen",
        fill: false,
        lineTension: 0,
        radius: 5
      },
	  {
        label: "agent 3",
        data: [20, 35, 40, 60, 50],
        backgroundColor: "green",
        borderColor: "lightgreen",
        fill: false,
        lineTension: 0,
        radius: 5
      }
    ]
  };
 
  //options
  var options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "Line Graph",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: "#333",
        fontSize: 16
      }
    }
  };
 
  //create Chart class object
  var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: options
  });
});

En espérant avoir su bien expliquer le problème, je vous remercie pour votre aide.

Cordialement

Bonjour,
le résultat obtenir n'est pas un modèle du genre concernant l'exploitation simple des datas !

Si je ne m'abuse cela va donner, côté client, quelque chose comme :

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
const DATA = {
  "mes1": [{
      "mes": "mes1",
      "agent": "agent1",
      "valeur": 0.001,
    },
    {
      "mes": "mes1",
      "agent": "agent2",
      "valeur": 0.002,
    },
    {
      "mes": "mes1",
      "agent": "agent3",
      "valeur": 0.003,
    },
  ],
  "mes2": [{
      "mes": "mes2",
      "agent": "agent1",
      "valeur": 0.004,
    },
    {
      "mes": "mes2",
      "agent": "agent2",
      "valeur": 0.005,
    },
    {
      "mes": "mes2",
      "agent": "agent3",
      "valeur": 0.006,
    }
  ]
};

A partir de là tu peux « triturer » les données pour obtenir quelque chose d'exploitable pour ChartJS.

On peut faire par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// récup. des clés que sont les "mes1, mes2 ..."
const nomLabels = Object.keys(DATA);
// objet pour récupérer les données ordonnées
const result = {};
 
// on boucle pour la récupération
nomLabels.forEach((label) => {
  const obj = DATA[label];
 
  obj.forEach((o) => {
    // on crée l'entrée si elle n'existe pas
    if (!result[o.agent]) {
      result[o.agent] = [];
    }
    // on ajoute la valeur
    result[o.agent].push(o.valeur);
  });
});
// récup. des clé qui sont les "agent"
const nomAgents = Object.keys(result);

Au final tu pourras utiliser les données de la sorte :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var data = {
  labels: nomLabels,
  datasets: [
    {
      label: nomAgents[0],
      data: result[nomAgents[0]],
      backgroundColor: "blue",
      borderColor: "lightblue",
      fill: false,
      lineTension: 0,
      radius: 5
    },
    {
      label: nomAgents[1],
      data: result[nomAgents[1]],
      backgroundColor: "green",
      borderColor: "lightgreen",
      fill: false,
      lineTension: 0,
      radius: 5
    },
  // etc ...

cela devrait le faire mais le plus important étant quand même de formater, côté serveur, les données pour ne pas se mettre en difficulté côté client.

05/06/2022, 14h15
Devas225

Bonjour
Merci énormément d'avoir regardé. Je n'ai pas encore essayé mais déjà une question me vient à l'esprit :

Citation:

... le plus important étant quand même de formater, côté serveur, les données pour ne pas se mettre en difficulté côté client.

Quel serait le formatage idéal coté serveur s'il te plait? Cela me permettrait de faire de bien plus propre et d'apprendre.

En attendant j'essai et je te fait le retour.

Merci
05/06/2022, 15h43
Devas225

J'ai essayé et ca marche!

Grand merci à toi

Citation:

Quel serait le formatage idéal coté serveur s'il te plait?

il n'y en a pas, cela va dépendre de ce que tu veux faire avec ces données et de la manière dont est réalisée ta base de données.

Dans ce cas on pourrait s'attendre à récupérer quelque chose comme
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const DATA = { "nomLabels": [ "mes1", "mes2", "mes3" ], "nomAgents": [ "agent1", "agent2", "agent3" ], "mesures": [ [ 1, 4 ], [ 2, 5 ], [ 3, 6 ] ] }
peut-être plus directement exploitable.