Chartjs-Regrouping data chartjs

0πŸ‘

βœ…

It worked, here is the solution:

    $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + add2,



    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {

        if (data.value.length > 0) {

           var reducedObject = {};
            for (var i = 0; i < data.value.length; i++) {
                    if (!reducedObject[data.value[i].ResourceName]) {
                        reducedObject[data.value[i].ResourceName] = 0;
                }
                reducedObject[data.value[i].ResourceName] += parseInt(data.value[i].AssignmentWork);
            }

            var keys = Object.keys(reducedObject);
            var pieLabels = [];
            var pieValues = [];
            for (var i = 0; i < keys.length; i++) {
                    pieValues.push(reducedObject[keys[i]]);
                pieLabels.push(keys[i]);
            }


            var pieData = {
                datasets: [{
                    borderColor: "#80b6f4",
            pointBorderColor: "#80b6f4",
            pointBackgroundColor: "#80b6f4",
            pointHoverBackgroundColor: "#80b6f4",
            pointHoverBorderColor: "#80b6f4",
            pointBorderWidth: 1,
            pointHoverRadius: 1,
            pointHoverBorderWidth: 1,
            pointRadius: 2,
            fill: false,
            borderWidth: 1,
                    data: pieValues

                }],

                labels: pieLabels
            };
            var ctx = document.getElementById("myChart");

                                    if (window.myPieChart2 != undefined)
{
    window.myPieChart2.destroy();
}
//
            window.myPieChart2 = new Chart(ctx, {

                    type: 'line',
                    data: pieData,
                    options: {
    responsive: true,
    legend: { display: false },
      title: {
        display: true,
        text: 'Pourcentage d\'achevement des phases'
      },
    scales: {
      xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent"
                },
                ticks: {
                    maxRotation: 90,
                    minRotation: 90,
                    fontSize:10
                }
            }],
      yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    display: false
                }

            }]
    }
  }


                });
            }
        },
        error: function (data) {

        }
    });

Leave a comment