0

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>
  • can you please help with the error message you are receiving. – Ankitkumar Malde Mar 6 '18 at 6:04
  • actually there is no error message but the chart is not being displayed – jayant khushalani Mar 6 '18 at 6:06
  • > You can use this link to understand how to fetch choice field data > sharepoint.stackexchange.com/questions/127869/… – Ankitkumar Malde 22 > hours ago Ankitkumar, could you modify the code you posted here in that way that choice (checkboxes) work? – Fabian M Sep 7 '18 at 12:19
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.

  • it is still not working and i really don't know the reason ! – jayant khushalani Mar 6 '18 at 8:11
  • you need to debug. Try logging data from List in success function, Log google Array for chart.. – Ankitkumar Malde Mar 6 '18 at 8:56
  • The answer of Ankitkumar Malde finally helped me! Theres only one problem: it doesnt work if the column type is a choice (checkboxes) column. Is there a trick to make this work too? – Fabian M Sep 6 '18 at 9:55
  • You can use this link to understand how to fetch choice field data sharepoint.stackexchange.com/questions/127869/… – Ankitkumar Malde Sep 6 '18 at 13:29

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.