Problème bloquant sur front

Sujet résolu

27 novembre 2018 à 15:38:51

Bonjour à tous,

J'ai un problème en voulant utiliser un framework pour réaliser un graphique sur mon ihm:

Voici le code de la page index:

<!DOCTYPE HTML>
<html>
<head>
<script>
    var requestURL = "ressources/json/file.json";
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType ='json';
    request.send();

    request.onload = function() {
        var res = request.response;



        var options = {
        animationEnabled: true,
        title:{
            text: "Title"
        },
        axisY:{
            title:"Note",
            maximum: "10"
        },
        toolTip: {
            shared: true,
            reversed: true
        },
        dataPointMaxWidth: 600,
        data:
            [{

                type: "stackedColumn",
                name: "score1",
                showInLegend: "true",
                yValueFormatString: "0.## pts",
                dataPoints: [
                    { y: 4, label: "USA"},
                    { y: 4, label: "Chine" },
                    { y: 4, label: "Russie" },
                    { y: 3, label: "Mexique" },
                    { y: 4, label: "Iran" },
                    { y: 0, label: "Japon" }
                ]
            },
            {
                type: "stackedColumn",
                name: "score2",
                showInLegend: "true",
                yValueFormatString: "0.## pts",
                dataPoints: [
                    { y: 4, label: "USA"},
                    { y: 4, label: "Chine" },
                    { y: 4, label: "Russie" },
                    { y: 3, label: "Mexique" },
                    { y: 4, label: "Iran" },
                    { y: 0, label: "Japon" }
                ]
            },
            {
                type: "stackedColumn",
                name: "score3",
                showInLegend: "true",
                yValueFormatString: "0.## pts",
                dataPoints: [
                    { y: 4, label: "USA"},
                    { y: 4, label: "Chine" },
                    { y: 4, label: "Russie" },
                    { y: 3, label: "Mexique" },
                    { y: 4, label: "Iran" },
                    { y: 0, label: "Japon" }
                ]
            },
            {
                type: "stackedColumn",
                name: "score4",
                showInLegend: "true",
                yValueFormatString: "0.## pts",
                dataPoints: [
                    { y: 4, label: "USA"},
                    { y: 4, label: "Chine" },
                    { y: 4, label: "Russie" },
                    { y: 3, label: "Mexique" },
                    { y: 4, label: "Iran" },
                    { y: 0, label: "Japon" }
                ]
            }]
    };

    $("#chartContainer").CanvasJSChart(options);
    }

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>

Au début du script ci-dessus, je récupère un tableau json dans le fichier file.json:

{  
   "Bresil":{  
      "score1":3.8,
      "score2":1.2,
      "score3":5,
      "score4":0.4
   },
   "canada":{  
      "score1":3.5,
      "score2":0,
      "score3":3.5,
      "score4":1.1
   },
   "Irak":{  
      "score1":4,
      "score2":1,
      "score3":5,
      "score4":0
   },
   "Koree":{  
      "score1":4,
      "score2":0,
      "score3":4,
      "score4":0
   },
   "Belgique":{  
      "score1":3,
      "score2":0,
      "score3":3,
      "score4":2
      
   },
   "Maroc":{  
      "score1":4,
      "score2":0,
      "score3":4,
      "score4":2,
   }
}

Mon graphique s'affiche bien quand j'entre les données en dur (cf. mon index)

Mais je voudrais remplir dynamiquement (via le tableau json) mon graphique.

Hélas, j'ai eu beau retourner le problème dans tous les sens impossible de créér une boucle qui parcourerait mon tableau issu du fichier json)

C'est un peu trop "touchy" pour moi là donc si l'un d'entre vous aurait une piste à me donner je lui en serais fort reconnaissant.

Salutations.

Au pire tu meurs...

piero5673

27 novembre 2018 à 15:53:32

Dans le cas où tu fais ton fichier file.json :pourquoi ne pas ranger les données selon le score, comme tu l'utilise dans le paramètre data :

{
 score1: {
  USA: 0,
  Bresil: 1,
  ...
 },
 ...
}

Pour transformer un objet en tableau, tu as les méthodes Object.keys() (tableau des clefs de l'objet) et Object.values() (tableau des valeurs de l'objet)

sasha034

27 novembre 2018 à 16:12:01

Merci Piero pour ta réponse.

Justement je ne vois pas comment implémenter l'utilisation d'un tel tableau.. :waw:

Impossible d'implémenter une boucle dans la "var option" pour pouvoir parcourir mon tableau de pays et remplir les "dataPoints" dynamiquement...

-
Edité par sasha034 27 novembre 2018 à 16:15:04

Au pire tu meurs...

piero5673

27 novembre 2018 à 16:29:28

Avec le json que tu as, en effet, c'est bien casse pieds. Donc si tu part avec un json comme ça :

{
 score1: {
  Bresil: 3.8,
  Canada: 3.5,
  Irak: 4,
  Koree: 4,
  Belgique: 3,
  Maroc: 4
 },
 ...
}

Tu peux faire un truc comme ça :

const data = Object.keys(tonJson).map(scoreName => ({
  type: "stackedColumn",
  name: scoreName,
  showInLegend: true,
  yValueFormatString: "0.## pts"
  dataPoints: Object.keys(tonJson[scoreName]).map(country => ({label: country, y: tonJson[scoreName][country]}))
}))

Explications : data c'est un map du tableau des clefs de ton json. Donc pour chaque clef (score), on renvoie un objet (les éléments du tableau data). Cet objet a une clef dataPoints qui est un map de ton json.score (c'est la partie

{
  Bresil: 3.8,
  Canada: 3.5,
  Irak: 4,
  Koree: 4,
  Belgique: 3,
  Maroc: 4
 }

). Donc pour chaque clef de cet objet (cette clef est aussi le label des dataPoints), on vas chercher la valeur qui corresponds (y)

j'avoue qu'après avoir lu mes explications, ça m'a pas l'air très clair. Si tu ne comprends pas je peux te recoder ça de façon moins compacte.

-
Edité par piero5673 27 novembre 2018 à 16:33:00

sasha034

27 novembre 2018 à 16:49:49

Merci encore d'avoir pris le temps de me présenter une solution.

Je vais essayer de l'adapter à mon code.

Je te ferai un retour d'ici demain max.

Au pire tu meurs...

sasha034

4 décembre 2018 à 15:50:43

Salut Piero et navré pour mon retard mais j'ai un autre problème bloquant à résoudre.

J'ai retenu ta solution qui me parait adaptée à mon problème.

Merci encore.

Au pire tu meurs...