SharePoint List (with Choice/Checkboxes column) to Google Chart

Question

i am using the following code (Naveen Kaliyaperumaal) helped me with it, to create a pie chart from a SharePoint list choice (checkboxes = multiple answers possible) column. But the charts are still not correct. Every chart created is just equally distributed with 1 per status.

<div id="piechart" style="width:900px;height:500px;"></div>
        <script src="https://www.gstatic.com/charts/loader.js" type="text/javaScript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javaScript"></script>
        <script type="text/javaScript">
            $(document).ready(function () {
                var tempArray = [];
                var chartObj = [['status', 'Number']];

                AjaxCall(_spPageContextInfo.webabsoluteurl + "/_api/web/lists/GetByTitle('IncidentsReports')/fields?$filter=EntityPropertyName eq 'Status'", function (data) {
                    $.each(data.d.results[0].Choices.results, function (index, value) {
                        if (0 > tempArray.indexOf(value)) {
                            tempArray.push(value);
                            chartObj.push([value, 1])
                        } else {
                            chartObj[tempArray.indexOf(value) + 1][1] += 1;
                        }
                    });
                    google.charts.load('current', {
                        'packages': ['corechart']
                    });
                    google.charts.setOnLoadCallback(function () {
                        var data = google.visualization.arrayToDataTable(chartObj);
                        var options = {
                            title: 'test title',
                            is3D: 'true'
                        };
                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                        chart.draw(data, options);
                    });
                });
            });
            function AjaxCall(url, success) {
                $.ajax({
                    url: url,
                    type: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                    },
                    success: success,
                    error: function (error) {
                        console.log(JSON.stringify(error));
                        alert('Something Went Wrong');
                    }
                });
            }
        </script>

EDIT: i changed the $.each part to this

$.each(data.d.results, function (index, row) {
                    // each row
                        $.each(row.Choices.results, function (index2, choice) {
                        // each choice of single row
                         if (0 > tempArray.indexOf(choice)) {
                            tempArray.push(choice);
                            chartObj.push([choice, 1])
                        } else {
                            chartObj[tempArray.indexOf(choice) + 1][1] += 1;
                        }
                        });
                    });

But i still get the same result...

the list looks like:

and the chart:

which is obviously not correct.

Second console log:

Now the final code looks like:

            <div id="piechart" style="width:900px;height:500px;"></div>
        <script src="https://www.gstatic.com/charts/loader.js" type="text/javaScript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javaScript"></script>
        <script type="text/javaScript">
            $(document).ready(function () {
                var tempArray = [];
                var chartObj = [['Orbit', 'Number']];

                AjaxCall(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('test list2')/items", function (data) {

var countOrbit = {};

data.d.results.forEach(function(row) {
    // each row
    row.Orbit.results.forEach(function(choiceOrbit) {
        // each choice of Orbit of single row
        if (countOrbit.hasOwnProperty(choiceOrbit)) {
            countOrbit[choiceOrbit] += 1;
        } else {
            countOrbit[choiceOrbit] = 1;
        }
    });
});


google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {

    var rowsOrbit = [];
    for (var property in countOrbit) {
        if (countOrbit.hasOwnProperty(property)) {
            rowsOrbit.push([property, countOrbit[property]]);
        }
    }


    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Type');
    data.addColumn('number', 'Quantity');
    data.addRows(rowsOrbit);
    var options = {
        title: 'Orbit',
        is3D: 'true'
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
});


            });
            });
            function AjaxCall(url, success) {
                $.ajax({
                    url: url,
                    type: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                    },
                    success: success,
                    error: function (error) {
                        console.log(JSON.stringify(error));
                        alert('Something Went Wrong');
                    }
                });
            }
        </script>

Answer 1

Can you put the response if the data is not private? or at least some elements of it? or with the data changed?

When you do: $.each(data.d.results[0].Choices.results .... you are iterating only the list first row choices results.

EDIT: The ajax call was incorrect, you should make the request. I also edited the code, now should work: endpoint /_api/web/lists/GetByTitle('IncidentsReports')/items --> try: /_api/web/lists/GetByTitle('IncidentsReports')/items?$select=Orbit to get only Orbit Column.

    var countData = {};
    console.log(data.d.results);

    data.d.results.forEach(function(row) {
        // each row
        row.Orbit.results.forEach(function(choice) {
            // each choice of single row
            // not sure if is choice the property...
            console.log(choice);
            if (countData.hasOwnProperty(choice)) {
                countData[choice] += 1;
            } else {
                countData[choice] = 1;
            }
        });
    });


    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(function () {

        var rows = [];
        for (var property in countData) {
            if (countData.hasOwnProperty(property)) {
                rows.push([property, countData[property]]);
            }
        }


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Type');
        data.addColumn('number', 'Quantity');
        data.addRows(rows);
        var options = {
            title: 'test title',
            is3D: 'true'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    });

Answer 2

Amrein Engineering offers a free Google Web Part if you are interested.