How to create a Pie Chart with Chart.js from a List Column of String?

Question

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:

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>

Jussi Palo · Accepted Answer · 2018-08-30 13:18:01Z

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>

edited Aug 30, 2018 at 13:18

answered Aug 30, 2018 at 13:07

Jussi Palo

8,1761 gold badge21 silver badges37 bronze badges

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
– Fabian M

2018-08-30 15:06:08 +00:00
Commented Aug 30, 2018 at 15:06
how can i refer to collums with a space in the name: e.g. "xy zx"

Fabian M
– Fabian M

2018-08-30 15:27:13 +00:00
Commented Aug 30, 2018 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
– Jussi Palo

2018-08-31 07:22:27 +00:00
Commented Aug 31, 2018 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
– Jussi Palo

2018-08-31 07:25:06 +00:00
Commented Aug 31, 2018 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
– Fabian M

2018-08-31 08:01:09 +00:00
Commented Aug 31, 2018 at 8:01

| Show 2 more comments

Stack Exchange Network

How to create a Pie Chart with Chart.js from a List Column of String?

1 Answer 1

Your Answer

Hot Network Questions

How to create a Pie Chart with Chart.js from a List Column of String?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions