Discussion :

[Devas225]

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


Le graphique souhaité


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

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
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 :

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

[NoSmoking]

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 :

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
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 :

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
// 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 :

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
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.

[Devas225]

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

... 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

[Devas225]

J'ai essayé et ca marche!

Grand merci à toi

[NoSmoking]

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 :

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
const DATA = {
  "nomLabels": [
    "mes1",
    "mes2",
    "mes3"
  ],
  "nomAgents": [
    "agent1",
    "agent2",
    "agent3"
  ],
  "mesures": [
    [ 1, 4 ],
    [ 2, 5 ],
    [ 3, 6 ]
  ]
}

peut-être plus directement exploitable.