Pie chart avec javascript

Fermé
achrefBIG Messages postés 30 Date d'inscription samedi 2 janvier 2021 Statut Membre Dernière intervention 3 juin 2021 - Modifié le 22 févr. 2021 à 22:04
Bonjour,

J'ai un problème concernant la récupération de valeurs de count à partir d'un controleur vers un pie chart.

Dans le champ data de dataset, il n'accepte pas les valeurs récupérés à partir du controleur. Comment résoudre ce problème svp



@RequestMapping("/")
 public String viewFaultsPage(Model model, String keyword) {
  
     List<FaultDetails> faultDetails = faultMetierImpl.consultFaultDetails();
     if (keyword != null) {
     model.addAttribute("faultDetails", faultMetierImpl.findByKeyword(keyword));
     }
     else {
      model.addAttribute("faultDetails", faultDetails);
     }
     
     List<FaultAvailability> faultAvailability = faultMetierImpl.consultFaultAvailabilities();
     model.addAttribute("faultAvailability", faultAvailability);
     
     List<FaultRequest> faultRequest = faultMetierImpl.consultFaultRequests();
     model.addAttribute("faultRequest", faultRequest);
     
     Long countTLI = faultMetierImpl.countSeverity("TLI");
     Long countMEL = faultMetierImpl.countSeverity("MEL");
     Long countNSRE = faultMetierImpl.countSeverity("NSRE");
     model.addAttribute("countTLI",countTLI);
     model.addAttribute("countMEL",countMEL);
     model.addAttribute("countNSRE", countNSRE);
     return "chartjs";
 
 }






<script>
  $(function (){
   
    //- DONUT CHART -
    // Get context with jQuery - using jQuery's .get() method.
   
    var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
    var donutData        = {
      labels: [
          'TLI',
          'MEL',
          'NSRE',
      ],
      datasets: [
        {
          data: [${countTLI} ,${countMEL} , ${countNSRE}],
          
          backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
        }
      ]
    }
    var donutOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(donutChartCanvas, {
      type: 'doughnut',
      data: donutData,
      options: donutOptions
    })


    //- PIE CHART -
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
    var pieData        = donutData;
    var pieOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(pieChartCanvas, {
      type: 'pie',
      data: pieData,
      options: pieOptions
    })
  })
</script>