Google Chart API : Pie chart not working

Question

I have been working to develop a simple pie chart which shows the status with its count. I cannot figure out the problem in my code.It has taken me some time to go about the code but i still cannot figure out what is wrong.

Hope you guys can help !

 <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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javaScript"></script>
  <script type="text/javaScript">
var jsonObj_chart = {};

  $(document).ready(function() {

  ReadData();

  });

 function ReadData(){

 var status1 = "Initial Request"; 
var status2 = "Business Unit Initial Review"; 
var status3 = "Business Unit Review";
var status4 = "Software change Review Board"; 
var status5 = "Enterprise Architecture Review";
var status6 = "Procurement Start"; 
var status7 = "Certification Support";
var status8 = "Packaging Assignment"; 
var status9 = "Admin Studio Re-Package"; 
var status10 = "Packager Testing"; 
var status11 = "Publishing for On-Premises"; 
var status12 = "User Acceptance";
var status13 = "Procurement Completion"; 
var status14 = "Pending Certification"; 
var status15 = "Certify"; 
var status16 = "Certified"; 
var status17 = "Rejected"; 

var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var count5 = 0;
var count6 = 0;
var count7 = 0;
var count8 = 0;
var count9 = 0;
var count10 = 0;
var count11 = 0;
var count12 = 0;
var count13 = 0;
var count14 = 0;
var count15 = 0;
var count16 = 0;
var count17 = 0;

$().SPServices({
        operation : "GetListItems",
        async : false,
        listname : "Certify1",
        CAMLViewFields : "<ViewFields><FieldRef Name='Status_x0020_as_x0020_on_x0020_d' /></ViewFields>";
        completefunc: function (xData,Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function(){

            var field = $(this).attr("ows_Status_x0020_as_x0020_on_x0020_d");
            if(field == status1)
            {
                count1+=1;
            }
            else if(field == status2)
            {
                count2+=1;
            }
            else if(field == status3)
            {
                count3+=1;
            }
            else if(field == status4)
            {
                count4+=1;
            }
            else if(field == status5)
            {
                count5+=1;
            }
            else if(field == status6)
            {
                count6+=1;
            }
            else if(field == status7)
            {
                count7+=1;
            }
            else if(field == status8)
            {
                count8+=1;
            }
            else if(field == status9)
            {
                count9+=1;
            }
            else if(field == status10)
            {
                count10+=1;
            }
            else if(field == status11)
            {
                count11+=1;
            }
            else if(field == status12)
            {
                count12+=1;
            }
            else if(field == status13)
            {
                count13+=1;
            }
            else if(field == status14)
            {
                count14+=1;
            }
            else if(field == status15)
            {
                count15+=1;
            }
            else if(field == status16)
            {
                count16+=1;
            }
            else {
                count17+=1;
            }


            })
            }
        });

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
    var data = google.visualization.arrayToDataTable([
    ['status','Number'],
    [status1,count1],
    [status2,count2],
    [status3,count3],
    [status4,count4],
    [status5,count5],
    [status6,count6],
    [status7,count7],
    [status8,count8],
    [status9,count9],
    [status10,count11],
    [status12,count12],
    [status13,count13],
    [status14,count14],
    [status15,count15],
    [status16,count16],
    [status17,count17]
    ]);

    var options = {
            title: 'Certification Report Status',
            is3D: 'true'
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data,options);
            });
            }
</script>

Answer 1

I have rewritten your code using Rest API and creating object which can be directly fed to the google.visualization.arrayToDataTable. Exclusion of external reference and reduction of If would help you decrease the load time.

Also below code help you remove hard coding of status which would help you on longer run.

<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('Certify1')/Items?$select=Status_x0020_as_x0020_on_x0020_d", function(data) {
    $.each(data.d.results, function(index, value) {
        if (0 > tempArray.indexOf(value["Status_x0020_as_x0020_on_x0020_d"])) {
            tempArray.push(value["Status_x0020_as_x0020_on_x0020_d"]);
            chartObj.push([value["Status_x0020_as_x0020_on_x0020_d"], 1])
        } else {
            chartObj[tempArray.indexOf(value["Status_x0020_as_x0020_on_x0020_d"]) + 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>

I have run this code and it is working for me. If issue persists check for the following things:

1. Column Name
2. List Name
3. Browser Compatibiliity
4. Items in the List

Hope this solves your issue.

Answer 2

This code works for me, thank you.

So after you counted all the status in "Status_x0020_as_x0020_on_x0020_d", how would you count items in another column? For example, if Status_x0020_as_x0020_on_x0020_d has 4 items that are completed, and these 4 completed items are showing three different Departments. How would you count how many different departments there are?

|---------------------|------------------|-------------|
|      Task ID        |     Status       | Department  |
|---------------------|------------------|-------------|
|        0001         |    Completed     | Accounting  |
|---------------------|------------------|-------------|
|        0002         |    Completed     |  Marketing  |
|---------------------|------------------|-------------|
|        0003         |    Completed     | Engineering |
|---------------------|------------------|-------------|
|        0004         |    Completed     |  Accounting |
|---------------------|------------------|-------------|

Also can it return the value in an array like this?

[Completed: 4, Accounting: 2, Engineering : 1 Marketing: 1]

Thank you in advance!

edit: Sorry i dont know how to put the data in a table.