2

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: list screenshot

and the chart: chart

which is obviously not correct.

console data

Second console log:

console2

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>
  • I would mark it as solved and i would open a new question, well explained because even with the edit i am not pretty sure about what you want to do. Glad that it worked btw! – Mikel Oct 9 '18 at 16:40
2

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);
    });
  • the response is in the picture below the code – Fabian M Sep 26 '18 at 9:27
  • i tried your code, but it isnt working :( – Fabian M Sep 26 '18 at 9:31
  • But there is only the picture, not the data itself... – Mikel Sep 26 '18 at 9:36
  • check my edit in the main post – Fabian M Sep 26 '18 at 9:41
  • Debug the created data into the second $.each. Put a console.log to see the data. I think that part isnt correct. if i have time later i will try to put an example. the json data can you put it also? – Mikel Sep 26 '18 at 10:46
1

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

  • thx, but i cant install anything on the server – Fabian M Oct 2 '18 at 8:51
  • No worries. Maybe it will help out someone else who stumbles upon your question. =) – James Grizzle Oct 2 '18 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.