1

I'm a newbie trying to use create a pie chart from a SharePoint list. The name of the list Mgmt_list and I'd like to display the count of the "Responsible Dept". "Responsible Dept" is currently a string. This is what I have cobbled together from another post.

<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('Mgmt_list')/Items?$select=Responsible Dept", function(data) {
    $.each(data.d.results, function(index, value) {
        if (0 > tempArray.indexOf(value["Responsible Dept "])) {
            tempArray.push(value["Responsible Dept"]);
            chartObj.push([value["Responsible Dept"], 1])
        } else {
            chartObj[tempArray.indexOf(value["Responsible Dept"]) + 1][1] += 1;
        }
    });
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(function() {
        var data = google.visualization.arrayToDataTable(chartObj);
        var options = {
            title: 'Certification Report Status',
            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>
1

If you create the column with the name is "Responsible Dept", the internal name of this field will be "Responsible_x0020_Dept".

Modify the code as below to make it works.

<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('Mgmt_list')/Items?$select=Responsible_x0020_Dept", function(data) {
        $.each(data.d.results, function(index, value) {
            if (0 > tempArray.indexOf(value["Responsible_x0020_Dept"])) {
                tempArray.push(value["Responsible_x0020_Dept"]);
                chartObj.push([value["Responsible_x0020_Dept"], 1])
            } else {
                chartObj[tempArray.indexOf(value["Responsible_x0020_Dept"]) + 1][1] += 1;
            }
        });
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(function() {
            var data = google.visualization.arrayToDataTable(chartObj);
            var options = {
                title: 'Certification Report Status',
                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

| improve this answer | |
  • Thanks!! Do I need to make adjustments to the code if I would create another chart off a choice field? – Hendrix May 24 '19 at 13:25
  • Yes, you need adjust the code if you use other field. – LZ_MSFT May 27 '19 at 2:20
  • What changes would I need to make for the different fields types? – Hendrix May 29 '19 at 15:56

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.