microfolie/WebContent/js/chart.js

function displayfileData(allData) {

   allData.forEach( (usager) => {
      let identite = usager.identite;     
      let situation = usager.situation;   
      let frequentation = usager.frequentation;     
      let espace = usager.espace;   
      let telephone = usager.telephone;    

      document.querySelector("#data-container").innerHTML +=
      "<div class='usager'>" +
      "<h3 class='usager-identite'>" + identite + "</h3>" +
      "<p class='frequentation'> à visité " + frequentation + " fois </p>" +
      "<p class='situation'>Situation: " + situation + "</p>" +
      "<p class='espace'>Espace: " + espace + "</p>" +
      "<p class='telephone'>Telephone: " + telephone + "</p>" +
      "<div>";
   });
}

function freqBySpace(allData) {
   //console.log(allData);
   var accueilArr = [];
   var espace1Arr = [];
   var espace2Arr = [];
   var espace3Arr = [];
   var espace4Arr = [];
   var espace5Arr = [];
   var espace6Arr = [];
   
   allData.forEach( (usager) => {
      //console.log(book.format);
      switch (usager.espace) {
         case "Espace accueil":
            //console.log("in E!");
            accueilArr.push(usager.frequentation);
            break;
         case "realite virtuelle":
            //console.log("in H!");
            espace1Arr.push(usager.frequentation);
            break;
         case "musee numerique":
            //console.log("in P!");
            espace2Arr.push(usager.frequentation);
            break;
         case "cyber base":
             //console.log("in H!");
             espace3Arr.push(usager.frequentation);
             break;
          case "shooting photo":
             //console.log("in P!");
             espace4Arr.push(usager.frequentation);
             break;
          case "jeux videos":
              //console.log("in H!");
              espace5Arr.push(usager.frequentation);
              break;
           case "espace scenique":
              //console.log("in P!");
              espace6Arr.push(usager.frequentation);
              break;
         default:
            break;
      }
   });

   //console.log(ebookArr, hardcoverArr, paperbackArr);

   var sumAccueilFreq = getArrayAverage(accueilArr);
   var sumEspace1Freq = getArrayAverage(espace1Arr);
   var sumEspace2Freq = getArrayAverage(espace2Arr);
   var sumEspace3Freq = getArrayAverage(espace3Arr);
   var sumEspace4Freq = getArrayAverage(espace4Arr);
   var sumEspace5Freq = getArrayAverage(espace5Arr);
   var sumEspace6Freq = getArrayAverage(espace6Arr);

   console.log(sumAccueilFreq, sumEspace1Freq, sumEspace2Freq,sumEspace3Freq,sumEspace4Freq,sumEspace5Freq,sumEspace6Freq);

   return {
      "title": "Fréquentation des espaces de microfolies",
      "key": "Total fréquentation",
      "espaceFormat": ["Espace accueil", "realite virtuelle", "musee numerique", "cyber base", "shooting photo", "jeux videos", "espace scenique"],
      "avePrice": [sumAccueilFreq, sumEspace1Freq, sumEspace2Freq, sumEspace3Freq, sumEspace4Freq, sumEspace5Freq, sumEspace6Freq]
   };
}

function getArrayAverage(arr) {
   total = 0;
   arr.forEach( (frequentation) => {
      total += frequentation;
   });
   //var average = (total / arr.length).toFixed(2);
   return total;
}

function createChartToDOM(titleInfo, xLabelInfo, legendKeyLabel, dataInfo) {
   var data = {
      //labels: [],
      labels: xLabelInfo,
      datasets: [{
         label: legendKeyLabel,
         borderColor: "rgb(255, 99, 132)",
         backgroundColor: "rgba(255, 99, 132, 0.5)",
         borderWidth: 1,
         data: dataInfo,
         fill: false,
      }]
   }

   var options = {
      scales: {
         xAxes: [{
            //display: false,
            ticks: {}
         }],
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: 'FREQUENTATION ',
               fontSize: 18,
               fontColor: "#333",
            },
            ticks: {
               beginAtZero: true
            }
         }],
         xAxes: [{
            scaleLabel: {
               display: true,
               labelString: 'ESPACES',
               fontSize: 18,
               fontColor: "#333",
            }
         }]
      },
      elements: {
         line: {
            tension: 0.1, // disables bezier curves
         }
      },
      layout: {
         padding: {
             left: 10,
             right: 10,
             top: 0,
             bottom: 0
         }
      },
      /*
      title: {
         display: true,
         fontSize: 36,
         fontFamily: "monospace",
         fontColor: "#333",
         text: titleInfo,
         bottom: 30
      },
      */
      legend: {
         display: false,
      }
   }

   // CREATES AND DISPLAYS CHARTJS OBJECt
   var context = document.getElementById("myChart").getContext("2d");
   var myChart = new Chart(context, {
      type: "bar",
      data: data,
      options: options
   });
}