1

How can I create a Pie Chart from a SharePoint list?

I learned that I can use Chart.js, but even after reading the documentation I don't really understand how to get it working. Can you tell me the steps I need to take?

With Jussis code i justs got this:

Picture

I tried, but it wont work:

<html>
<head>
<script src=".../JS/loader.js" type="text/javascript"></script>
<script src=".../JS/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src=".../JS/jquery.SPServices.min.js" type="text/javascript"></script>

<script type="text/javascript">

var jsonObj_Chart = {};
$(document).ready(function() {
    ReadData();
};

function ReadData(){
    var Orbit1="GEO";
    var Orbit2="LEO";
    var Orbit3="HEO";
    var count1=0;
    var count1=0;
    var count1=0;
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "xyz",
        CAMLViewFields: "<ViewFields><FieldRef Name='Orbit' /></ViewFields>",
        completefunc: function (xData, Orbit) {
            $(xData.responseXML).SPFilterNode("z:row").each(function(){
                var field = $(this).attr("ows_Orbit");
                if (field == Orbit1) {count1++;}
                else if (field == Orbit2) {count2++;}
                else (field == Orbit3) {count3++;}
            })
        }
    });
};






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

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Status', 'Number'],
      ['Orbit1',     count1],
      ['Orbit2',      count2],
      ['Orbit3',  count3],

    ]);

    var options = {
      title: 'Orbits'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

1

You can create full blown SPFx web part, or quick implementation with CEWP. In both cases the code below remains same. Here are steps for quick CEWP based solution.

Create .html file, upload it to SharePoint, point Content Editor Web Part to that HTML file.

In that HTML file you have JavaScript code, that loads SharePoint content via REST call, constructs data object required by ChartJS and finally asks chartjs to render the pie, so something like (haven't tested, just wrote it here, but should be pretty close). It assumes you have SP list with Title and Value columns:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="mypie" width="400" height="400"></canvas>
<script>
// Title and Value are names of the columns on SP list
$.ajax({
    url: "https://company.sharepoint.com/somesite/_api/web/lists/getbytitle('somelisttitle')/items?$select=Title,Value",
    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {
        if (data.value.length > 0) {

            var pieValues = [];
            var pieLabels = [];

            for (var i = 0; i < data.value.length; i++) {
                pieValues.push(parseInt(data.value[i].Value));
                pieLabels.push(data.value[i].Title);
            }
            var pieData = {
                datasets: [{
                    data: pieValues
                }],

                labels: pieLabels
            };
            var ctx = document.getElementById("mypie");

            var myPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: pieData
                });
            }
        },
        error: function (data) {
            //
        }
    });

</script>
  • Thanks Jussi. Could you please elaborate on this line: ttps://company.sharepoint.com/somesite/_api/web/lists/getbytitle('somelisttitle')/items?$select=Title,Value – Fabian M Aug 30 '18 at 15:06
  • how can i refer to collums with a space in the name: e.g. "xy zx" – Fabian M Aug 30 '18 at 15:27
  • You can look at the column name e.g., by going to list, sorting it according to that column, and looking how the column name looks like in URL field of the browser. Usually it's something like "column_x0020_name", but longer column names are truncated. – Jussi Palo Aug 31 '18 at 7:22
  • That line indicates the REST API endpoint and will return items from that list including Title and Value fields. You can just test that by pasting it to browser address field, and ensure it returns data you need. – Jussi Palo Aug 31 '18 at 7:25
  • Thanks, this now works. But i am still confused with "data.value.length". is Value your variable name? what do I need to change? – Fabian M Aug 31 '18 at 8:01

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.