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