0

I had problemns to create google charts in SharePoint and the answer of Ankitkumar Malde (Google Chart API : Pie chart not working) finally helped me!

Theres only one problem: it doesnt work if the column type is a choice (checkboxes) column (then no chart appears).

Is there a trick to make this work too? Could someone modify his code? Thanks a lot!

The code is:

<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('test list2')/fields?$filter=EntityPropertyName eq 'Orbit'", function(data) {
    $.each(data.d.results[0].Choices.results, function(index, value) {
        if (0 > tempArray.indexOf(value["Orbit"])) {
            tempArray.push(value["Orbit"]);
            chartObj.push([value["Orbit"], 1])
        } else {
            chartObj[tempArray.indexOf(value["Orbit"]) + 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>
0

Use the following code

            <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.siteAbsoluteUrl + "/_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>

enter image description here

  • i used list from my root site so i used siteabsoluteurl you can change to webabsoluteurl – Naveen Kaliyaperumaal Sep 9 '18 at 14:07
  • Thanks. I finally had time to test it. The problem with the code is that the charts created have a equal distribution - which is not the case in my list (like in your screenshot: 20% - 20% - 20% - 20% - 20%) Do you know the reason? – Fabian M Sep 25 '18 at 9: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.