Chartjs-Display chartjs bar chart with dynamic data

by

0👍

✅

I solved the problem

 window.addEventListener('load',function() {
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectData/[en-US]/Tasks?$select=TaskName,TaskPercentCompleted&$filter=ProjectName%20eq%20%27Bay%20Plaza%27%20and%20TaskIsSummary%20eq%20true%20and%20TaskIsProjectSummary%20eq%20false",
    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {
        if (data.value.length > 0) {

            var pieValues = [];
            var pieLabels = [];

            for (var i = 0; i < data.value.length; i++) {
                pieValues.push(parseInt(data.value[i].TaskPercentCompleted));
                pieLabels.push(data.value[i].TaskName);
            }
            var pieData = {
                datasets: [{
                    data: pieValues,
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                }],

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

            var myPieChart = new Chart(ctx, {
                    //type: 'pie',
                    type: 'bar',
                    data: pieData,
                    options: {
    responsive: true,
    legend: { display: false },
      title: {
        display: true,
        text: 'Nom de tâche par pourcentage'
      },
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 90,
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }


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

Leave a comment