0

Is there a way to create Pie Charts from the Information in SharePoint Lists? I read that they removed the option in SharePoint 2013? Is that true?

1

There are, and have been, a lot of options to do Dashboarding in SharePoint. At this point in time I would strongly recommend to look into PowerBi to create dashboards based on SharePoint data.

See https://powerbi.microsoft.com/nl-nl/blog/integrate-power-bi-reports-in-sharepoint-online/ for some samples.

0

You can also use some JavaScript library for drawing charts. I personally recommend Chart.js.

Here is an example of pie chart in a Script Editor Web Part that get data from a Tasks list.

<canvas id="pieChart" width="150" height="50"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script type="text/javascript">
(function(){
    ExecuteOrDelayUntilScriptLoaded(setUpPieChart, "sp.js");
    var splistitemspie = [];
    function setUpPieChart() {
       seriesarray = [];
       var currentcontext = new SP.ClientContext.get_current();
       var splist = currentcontext.get_web().get_lists().getByTitle('Tasks');
       var splistquery = new SP.CamlQuery();
       splistitemspie = splist.getItems(splistquery);
       currentcontext.load(splistitemspie);
       currentcontext.executeQueryAsync(Function.createDelegate(this, getPieDataSuccess), Function.createDelegate(this, getPieDataFail));
    }

    function getPieDataSuccess(sender, args) {
        var splistitemcount = splistitemspie.get_count();
        var completedCount = 0;
        var noteCompletedCount = 0;
        if (splistitemcount != 0) {
            var splistitemenumerator = splistitemspie.getEnumerator();
            while (splistitemenumerator.moveNext()) {
                var currentlistitem = splistitemenumerator.get_current();
                var status = currentlistitem.get_item("Status");

                if(status == "Completed"){
                    completedCount++;
                }        
                else {
                    noteCompletedCount++;
                }       
            }         

            seriesarray.push(completeCount);
            seriesarray.push(noteCompleteCount);

            drawPieChart(seriesarray);
        }
    }

    function getPieDataFail(sender, args) {
        console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

    function drawPieChart(seriesarray) {
        var ctx = document.getElementById("pieChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ["Completed", "Not completed"],
                datasets: [{
                    label: '# of Tasks',
                    data: seriesarray,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)'
                    ],
                    borderWidth: 1
                }]
            }
        });
    }
})();
</script>
  • Thanks! Is there a tutorial? I have a list full of strings and want to create a pie chart for each column – Fabian M Aug 30 '18 at 11:18

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.