How to get right information from barChart

Question

I am using the below code to create a barchart in sharepoint. The code is working but doesn't return the right information. The field "Reply" can contain three values: Nill Reply, Partly answered and Completely Answered. I want to display how many items have Nill Reply, how many have Partly answered and how many Completely answered. So he should count each of the three values and create the bar accordingly. How to get this in my code?

<script type="text/javascript">

var barChart;
var barColors = [];
var xValues = [];
var yValues = [];
var myYear;
var today = new Date();
myYear = today.getFullYear();

        var requestUri = "/_api/web/Lists/GetByTitle('MyList')/items?$orderby= nummer desc";

     $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + requestUri,
            type: "GET",
            async:false,
        headers: {
                "accept": "application/json;odata=verbose",
        },
                success: function (data) {
                    $.each(data.d.results, function (i, item){
                        var stat = item.MijnStatus;
                        var ltiov = item.LTIOV;
                        var reply = item.Reply;
                        var periode = item.Jaar;
                if (periode == myYear && stat =="Completed") {
                    console.log(ltiov);
                    console.log(reply);
                                         if (reply != null){
                                            xValues.push(item.Reply);
                                          }
                                         if (ltiov != null){
                                            yValues.push(item.LTIOV);
                                          }
                    var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                            barColors.push(randomColor);

                }
                    })
            fnGenerateChart(xValues, yValues);
                },
                error: function () {
                    alert("Something went wrong");
                }                     
            });    

  function fnGenerateChart(xValues, yValues) {
      var barChart = new Chart("barChart", {
          type: "bar",
          data: {
              labels: xValues,
              datasets: [{
                  data: yValues,
                  label: 'Reply on the question',
                  backgroundColor: barColors
              }]
          }
      });
  }

</script>

Answer 1

Technically this is off-topic here because it's a question about how to get something done in JavaScript that doesn't really have anything to do with SharePoint, but here you go anyway...

So, it looks like you are only concerned with the replies for the items that are marked "Completed" and are from this year. That's fine, but then you are pushing every single reply value into your xValues array, but the xValues are clearly used as the labels, and so there should really only be a list of the unique possible reply values there, i.e. only one of each possible value. Not all of them.

Then, the yValues should be the count of each of those replies, but you are pushing some completely different data into the yValues array - you are pushing all the values of item.LTIOV into the yValues, not counting the replies and putting those numbers into the yValues.

So I would change your success function to be something like this:

success: function (data) {

    // filter out the ones that are completed this year
    // if the Jaaar field is text and not a number, you might need to do
    //
    // myYear = myYear.toString()
    //
    // to convert myYear to text before doing this filtering
    var completedThisYear = data.d.results.filter(item => item.Jaar === myYear && item.MijnStatus === "Completed");

    // get the _unique_ reply values from the items completed this year
    var xValues = [...new Set(completedThisYear.map(item => item.Reply))];

    // count how many of each reply there was
    xValues.forEach(value => {
        var itemsWithThatReply = completedThisYear.filter(item => item.Reply === value);
        var count = itemsWithThatReply.length;
        yValues.push(count);
        // add your color
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        barColors.push(randomColor);
    });

    fnGenerateChart(xValues, yValues);
}