Créer un graphique avec chartjs avec multiple courbe.

Résolu
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -  
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -
J'ai un donnée sous forme de tableau data qui contient un donnée1, donnée2 qui contient un tableau A1,A2 qui contient eux aussi des tableaux valeur_x et valeur_y comme ci_dessous:
array:21 [▼
"Donnée1" => array:4 [▼
"A1" => array:2 [▼
"valeur_x" => array:99 [▼
32 => "07:39:26"
33 => "07:23:41"
34 => "07:44:44"
54 => "08:46:04"
]
"valeur_y" => array:99 [▼
0 => 36.0
1 => 35.0
2 => 17.0
3 => 32.0
]
]
"A2" => array:2 [▼
"valeur_x" => array:13 [▼
0 => "06:47:47"
1 => "06:15:52"
2 => "06:53:25"
3 => "07:24:42"
]
"valeur_y" => array:13 [▼
0 => 29.0
1 => 6.0
2 => 35.0
]
]
"A3" => array:2 [▼
"valeur_x" => array:10 [▼
0 => "06:54:22"
1 => "07:32:59"
2 => "06:28:50"
3 => "07:28:37"
]
"valeur_y" => array:10 [▼
0 => 23.0
1 => 15.0
2 => 4.0
3 => 22.0
]
]
"Donnée2" => array:5 [▼
"A1" => array:2 [▼
"valeur_x" => array:36 [▶]
"valeur_y" => array:36 [▶]
]
"A2" => array:2 [▶]
"A3" => array:2 [▶]
"A4" => array:2 [▶]
"A5" => array:2 [▶]

Ce que je souhaite c'est de mettre ce donnée dans un chartjs afin d'obtenir un graphe comme Pour l'instant j'ai réussi à mettre la valeur_x et valeur_y dans le tableau A1 seulement mais ce que je souhaite c'est que le tableau affiche la valeur A1,A2,.... comme le shéma ci-dessous:


Voici mon code html qui contient un id dynamique:

<canvas class="test" id="1" width="400" height="400"></canvas>

et le script: 

for(data in datas){
  var ctx = document.getElementById(data).getContext('2d');  
  for( donnee in datas[data]){

      var data_y = datas[data][donnee ].valeur_x;
      var label_x = datas[data][donnee ].valeur_y; 

            var chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                      label: 'Distance (km)',
                      labels: label_x,
                      datasets: [
                        {
                          data: data_y,
                          fillColor: "rgba(231,26,13,0.75)",
                          strokeColor: "#e71a0d",
                          pointColor: "#fff",
                          pointStrokeColor: "#e71a0d",
                          label: 'Résultat',
                          lineTension: 0
                        },
                        {
                        fillColor: "rgba(23,234,7,0.5)",
                        strokeColor: "#17ea07",
                        pointColor: "#fff",
                        pointStrokeColor: "#17ea07",
                        data: [0, 64, 128, 256, 512, 1024, 2048]
                        }
                      ]
                    },
                    options: {
                      scales: {
                        yAxes: [{
                          ticks: {
                            beginAtZero: true
                          }
                        }]
                      }
                    }
                  });
 
  }
}


Pouvez vous m'aider à rectifier mon code s'il vous plaît, j'ai déjà documenté comment fonctionne le chardjs multiple valeur mais j'ai pas réussi à le résoudre.
A voir également:

5 réponses

Réponse 1 / 5
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
Est ce que quelqu'un peut me donner un petit pouce s'il vous plaît je suis un peu perdu! merci d'avance.
0
JC_8280 Messages postés 78 Date d'inscription   Statut Membre Dernière intervention  
 
Bonsoir,
Je suis débutant, alors je n'ai pas la prétention de t'aider, mais as tu essayer en graphique SVG?
Slt.
0
Réponse 2 / 5
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour! merci de m'avoir répondu, j'utilise le plugin chartjs, ca marche bien sauf je suis un peu perdu sur l'algo qui permet de résoudre le problème de la création du double courbe dynamique en javascript.
0
Réponse 3 / 5
JC_8280 Messages postés 78 Date d'inscription   Statut Membre Dernière intervention  
 
Je n'ai pas l'intention de te faire abandonner chartjs, mais pour info j'ai réussi mon problème de graphique comme suit en SVG: 




<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="500" height="50" viewBox="0 0 500 50">
    <rect width="330" height="50" style="fill:rgb(178, 178, 212);stroke-width:1;stroke:rgb(0,0,0)" />
    <line x1="0" y1="25" x2="330" y2="25" style = "stroke:rgb(0, 0, 0);stroke-width:1" />
    <line x1="20" y1="0" x2="20" y2="50" style = "stroke:rgb(0, 0, 0);stroke-width:1" />
    <line x1="15" y1="5" x2="330" y2="5" style="stroke: red;stroke-width:0.4;"/>
    <line x1="15" y1="45" x2="330" y2="45" style="stroke: red;stroke-width:0.4;"/>
    <line x1="15" y1="11" x2="330" y2="11" style="stroke: rgb(40, 240, 40);stroke-width:0.4;"/>
    <line x1="15" y1="39" x2="330" y2="39" style="stroke: rgb(40, 240, 40);stroke-width:0.4;"/>
    <text x="2" y="24" style="fill: rgb(0, 0, 255);font-size:6px">20.00</text>
    <text x="2" y="7.0" style="fill: rgb(255, 0, 0);font-size:5px">20.20</text>
    <text x="2" y="47.0" style="fill: rgb(255, 0, 0);font-size:5px">19.80</text>
    <text x="2" y="13.0" style="fill: rgb(40, 240, 40);font-size:5px">20.13</text>
    <text x="2" y="41.0" style="fill: rgb(40, 240, 40);font-size:5px">19.87</text>
    <line x1="70" y1="0" x2="70" y2="50" stroke-dasharray="3,3" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <line x1="120" y1="0" x2="120" y2="50" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <line x1="170" y1="0" x2="170" y2="50" stroke-dasharray="3,3" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <line x1="220" y1="0" x2="220" y2="50" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <line x1="270" y1="0" x2="270" y2="50" stroke-dasharray="3,3" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <line x1="320" y1="0" x2="320" y2="50" style = "stroke:rgb(0, 0, 0);stroke-width:0.35" />
    <text x="20" y="49" style="fill: rgb(0,0,0);font-size:5px;">0</text>
    <text x="70" y="49" style="fill: rgb(0,0,0);font-size:5px;">5</text>
    <text x="120" y="49" style="fill: rgb(0,0,0);font-size:5px;">10</text>
    <text x="170" y="49" style="fill: rgb(0,0,0);font-size:5px;">15</text>
    <text x="220" y="49" style="fill: rgb(0,0,0);font-size:5px;">20</text>
    <text x="270" y="49" style="fill: rgb(0,0,0);font-size:5px;">25</text>
    <text x="320" y="49" style="fill: rgb(0,0,0);font-size:5px;">30</text>
    <path d="M30 20.5 L40 18 L50 20 L60 25 L70 17.5 L80 21 L90 18.5
    L100 15 L110 8 L120 38 L130 19 L140 30 L150 8 L160 8 L170 38 L180 19 L190 30 L200 8" style="stroke: blue;stroke-width:1;fill:none"></path>
</svg> 

</body>
</html>




Et pour éditer le SVG en JavaScript, il faut faire : 


let ns='http://www.w3.org/2000/svg';
function drawLine(str_name,id_graphe,clName,graphe,x1,y1,x2,y2){
  let name = document.createElementNS(ns,"line");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x1",x1);
  name.setAttribute("y1",y1);
  name.setAttribute("x2",x2);
  name.setAttribute("y2",y2);
  graphe.appendChild(name);
}

function ecriture(str_name,id_graphe,clName,graphe,x1,y1,val){
  let name = document.createElementNS(ns,"text");
  name.setAttribute("id",id_graphe+str_name);
  name.setAttribute("class",clName);
  name.setAttribute("x",x1);
  name.setAttribute("y",y1);
  name.innerHTML=val;
  graphe.appendChild(name);
}


Pour avoir plusieurs courbes , il faut créer plusieurs éléments path. 

  <path d="M30 20.5 L40 18 L50 20 L60 25 L70 17.5 L80 21 L90 18.5
    L100 15 L110 8 L120 38 L130 19 L140 30 L150 8 L160 8 L170 38 L180 19 L190 30 L200 8" style="stroke: blue;stroke-width:1;fill:none"></path>


Bon courage.
0
Réponse 4 / 5
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
Encore merci pour votre aide, en supposant que j'opte pour le svg, pouvez vous m'aider comment fait-on pour intégrer dynamiquement dans mes données tableau dans ce graphe?
array:21 [▼
"Donnée1" => array:4 [▼
"A1" => array:2 [▼
"valeur_x" => array:99 [▼
32 => "07:39:26"
33 => "07:23:41"
34 => "07:44:44"
54 => "08:46:04"
]
"valeur_y" => array:99 [▼
0 => 36.0
1 => 35.0
2 => 17.0
3 => 32.0
]
]
"A2" => array:2 [▼
"valeur_x" => array:13 [▼
0 => "06:47:47"
1 => "06:15:52"
2 => "06:53:25"
3 => "07:24:42"
]
"valeur_y" => array:13 [▼
0 => 29.0
1 => 6.0
2 => 35.0
]
]
"A3" => array:2 [▼
"valeur_x" => array:10 [▼
0 => "06:54:22"
1 => "07:32:59"
2 => "06:28:50"
3 => "07:28:37"
]
"valeur_y" => array:10 [▼
0 => 23.0
1 => 15.0
2 => 4.0
3 => 22.0
]
]
"Donnée2" => array:5 [▼
"A1" => array:2 [▼
"valeur_x" => array:36 [▶]
"valeur_y" => array:36 [▶]
]
"A2" => array:2 [▶]
"A3" => array:2 [▶]
"A4" => array:2 [▶]
"A5" => array:2 [▶]

afin d'obtenir une shéma comme ci-après?:
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
Bien je n'ai pas trouvé du solution à mon problème donc je veux fermer ce sujet et ouvrir un autre de même type car celui ci semble être un peu difficile à expliquer.
0

Discussions similaires

Paris multiple : explications de 2/3, 3/4, 2/4, 2/5, etc.
florent.c -
Aide -

85 réponses