Create Dynamic Array from SharePoint List Items to Draw Google Pie Chart

This blog will focus on how to create dynamic array which can easily understood by google chart 's api.

This one I did for one of project approximate 17-18 months back but now I am posting this ;)

Requirement was to show the PIE Chart of the clients data based on their status. For this we need to have Status Column and of type Choice which may hold the value like “Completed, In Progress, Completed” or Whatever status we want.

Then this site Column will be added to the actual list where the content will reside and based.

So let’s start with the actual coding for which I am always excited. Below file can be a .txt file or html file and later on will be added to content editor webpart to display the pie chart.

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',  
     'version':'1','packages':['corechart']}]}"></script>  
 <style>  
   table th {  
     background-color: #73d1f2;  
     height: 34px;  
     text-align: left;  
     padding-left: 2%;  
     font: bold 13px Arial, Helvetica, sans-serif !important;  
     color: #777 !important;  
   }  
   .ms-listviewtable a:hover {  
     color: #777 !important;  
   }  
 </style>  
 <script type="text/javascript">  
   var siteUrl;  
   var arrBarChart = new Array();  
   $(document).ready(function () {  
     siteUrl = _spPageContextInfo.webAbsoluteUrl;  
     GetStatusColumn();  
   });  
   /// This method will read the Status Site Column  
   function GetStatusColumn() {  
     $.ajax({  
       url: siteUrl + "/_api/web/fields?$filter=Title eq'StatusColumnName'",  
       method: "GET",  
       headers: {  
         "Accept": "application/json; odata=verbose",  
         "content-type": "application/json; odata=verbose"  
       },  
       success: function (data) {  
         /// here i am checking whether it has some data or not  
         if (data.d.results[0].Choices.results.length > 0) {  
           // here i will pass siteurl and values from the site column  
           GetListHoldingDate(siteUrl, data.d.results[0].Choices.results);  
         }  
         else {  
           $("#lblError").text("Status Site Column do not exists or do not have values in it, please contact Administrator");  
         }  
       },  
       error: function (jqxr, errorCode, errorThrown) {  
       }  
     });  
   }  
   // this method will read the actual list content and will array required for pie chart  
   function GetListHoldingDate(siteUrl, columnData) {  
     var uspURL = siteUrl + "/_api/web/lists/getbytitle('ListHoldingData')/items"  
     $.ajax({  
       url: uspURL,  
       method: "GET",  
       headers: {  
         "Accept": "application/json; odata=verbose",  
         "content-type": "application/json; odata=verbose"  
       },  
       success: function (data) {  
         //alert(data.body);  
         var rowsStatus = "";  
         var itemCount = data.d.results.length;  
         for (var i = 0; i < columnData.length; i++) {  
           //below code will filter the data from all items based on status  
           var arr = $.grep(data.d.results, function (a) {  
             return a.StatusColumnName == columnData[i];  
           })  
           var perc = (arr.length / itemCount) * 100;  
           perc = Math.round(perc * 100) / 100  
           arrBarChart.push([columnData[i], parseInt(perc)]);  
         }  
         drawChart();  
       },  
       error: function (jqxr, errorCode, errorThrown) {  
         if (jqxr.status == "404") {  
           $("#lblError").text("List holding content not found, Please contact administrator");  
         }  
         else {  
           $("#lblError").text(jqxr.responseText);  
         }  
       }  
     });  
   }  
   //this method will create pie chart using google api  
   function drawChart() {  
     var data = new google.visualization.DataTable();  
     data.addColumn('string', 'Status');  
     data.addColumn('number', 'Percentage');  
     data.addRows(arrBarChart);  
     // Set chart options  
     var options = {  
       'title': 'Status',  
       'width': 300,  
       'height': 300  
     };  
     // Instantiate and draw our chart, passing in some options.  
     var chart = new google.visualization.PieChart(document.getElementById('chart_div'));  
     chart.draw(data, options);  
   }  
 </script>  
 <table style="width: 100%!important">  
   <tr>  
     <td style="vertical-align: top">  
       <div id="chart_div"></div>  
     </td>  
   </tr>  
 </table>  
 <br />  
 <label id="lblError" style="color: red; font-weight: bold; font-size: small"></label>