Pie Chart For SharePoint

  1. <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>  
  2. <script type="text/javascript" src="//code.highcharts.com/highcharts.src.js"></script>  
  3. <script type="text/javascript">  
  4.     var maternityLeaveDays = 0;  
  5.     var paternityLeaveDays = 0;  
  6.     var ComOffLeaveDays = 0;  
  7.     var sickLeaveDays = 0;  
  8.     var casualLeaveDays = 0;  
  9.     var userExist = false;  
  10.     var compOffLeaveFromEmployeeLeaveList = 0;  
  11.     var sickLeaveFromEmployeeLeaveList = 0;  
  12.     var casualLeaveFromEmployeeLeaveList = 0;  
  13.     var MLOffLeaveFromEmployeeLeaveList = 0;  
  14.     var PLLeaveFromEmployeeLeaveList = 0;  
  15.     var URLString = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeLeave')/Items?$select=Totalleavedays,LeaveType/LeaveType&$filter=(EmpName eq'" + _spPageContextInfo.userDisplayName + "') and (Employee0 eq'16')&$expand=LeaveType";  
  16.     $.ajax({  
  17.         url: URLString,  
  18.         type: "GET",  
  19.         dataType: "json",  
  20.         async: false,  
  21.         headers: {  
  22.             "accept""application/json;odata=verbose"  
  23.         },  
  24.         success: callSuccessMethod,  
  25.         error: callFailureMethod  
  26.     });  
  27.   
  28.     function callSuccessMethod(data, request) {  
  29.         if (data.d.results.length >= 1) {  
  30.             userExist = true;  
  31.             $.each(data.d.results, function(key, val) {  
  32.                 if (val.LeaveType.LeaveType === 'Compoff') {  
  33.                     compOffLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);  
  34.                 } else if (val.LeaveType.LeaveType === 'SickLeave') {  
  35.                     sickLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);  
  36.                 } else if (val.LeaveType.LeaveType === 'CasualLeave') {  
  37.                     casualLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);  
  38.                 } else if (val.LeaveType.LeaveType === 'MaternityLeave') {  
  39.                     MLOffLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);  
  40.                 } else if (val.LeaveType.LeaveType === 'PaternityLeave') {  
  41.                     PLLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);  
  42.                 }  
  43.             });  
  44.             var endPointURLString = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Leavetype')/Items?$select=LeaveType,Total,isActive&$filter=isActive eq '1' ";  
  45.             $.ajax({  
  46.                 url: endPointURLString,  
  47.                 type: "GET",  
  48.                 dataType: "json",  
  49.                 async: false,  
  50.                 headers: {  
  51.                     "accept""application/json;odata=verbose"  
  52.                 },  
  53.                 success: callSuccessMethodForLeaveType,  
  54.                 error: callFailureMethodLeaveType  
  55.             });  
  56.         } else {  
  57.             userExist = false;  
  58.             var endPointURLString = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Leavetype')/Items";  
  59.             $.ajax({  
  60.                 url: endPointURLString,  
  61.                 type: "GET",  
  62.                 dataType: "json",  
  63.                 async: false,  
  64.                 headers: {  
  65.                     "accept""application/json;odata=verbose"  
  66.                 },  
  67.                 success: callSuccessMethodForLeaveType,  
  68.                 error: callFailureMethodLeaveType  
  69.             });  
  70.         }  
  71.     }  
  72.   
  73.     function callFailureMethod(data, errCode, errMessage) {  
  74.         alert("Error: " + errMessage);  
  75.     }  
  76.   
  77.     function callSuccessMethodForLeaveType(data, request) {  
  78.         $.each(data.d.results, function(key, val) {  
  79.             if (val.LeaveType === 'Casual Leave') {  
  80.                 casualLeaveDays = val.Total;  
  81.             } else if (val.LeaveType === 'Marriage Leave') {  
  82.                 marriageLeaveDays = val.Total;  
  83.             } else if (val.LeaveType === 'Maternity Leave') {  
  84.                 maternityLeaveDays = val.Total;  
  85.             } else if (val.LeaveType === 'Paternity Leave') {  
  86.                 paternityLeaveDays = val.Total;  
  87.             } else if (val.LeaveType === 'Compensatory Leave') {  
  88.                 ComOffLeaveDays = val.Total;  
  89.             } else if (val.LeaveType === 'Sick Leave') {  
  90.                 sickLeaveDays = val.Total;  
  91.             }  
  92.         });  
  93.     }  
  94.     if (userExist) {  
  95.         ComOffLeaveDays = (parseInt(ComOffLeaveDays) - parseInt(compOffLeaveFromEmployeeLeaveList));  
  96.         sickLeaveDays = (parseInt(sickLeaveDays) - parseInt(sickLeaveFromEmployeeLeaveList));  
  97.         casualLeaveDays = (parseInt(casualLeaveDays) - parseInt(casualLeaveFromEmployeeLeaveList));  
  98.         maternityLeaveDays = (parseInt(maternityLeaveDays) - parseInt(MLOffLeaveFromEmployeeLeaveList));  
  99.         paternityLeaveDays = (parseInt(paternityLeaveDays) - parseInt(PLLeaveFromEmployeeLeaveList));  
  100.         DrawChart();  
  101.     }  
  102.     if (!userExist) {  
  103.         DrawChart();  
  104.     }  
  105.     }  
  106.   
  107.     function callFailureMethodLeaveType(data, errCode, errMessage) {  
  108.         alert("Error: " + errMessage);  
  109.     }  
  110.   
  111.     function DrawChart() {  
  112.         PieChart = new Highcharts.Chart({  
  113.             chart: {  
  114.                 renderTo: 'chart-container',  
  115.                 plotBackgroundColor: null,  
  116.                 plotBorderWidth: null,  
  117.                 plotShadow: false,  
  118.                 type: 'pie'  
  119.             },  
  120.             title: {  
  121.                 text: 'Balance Leave Availble'  
  122.             },  
  123.             tooltip: {  
  124.                 pointFormat: '{series.name}: <b>{point.y}</b>'  
  125.             },  
  126.             plotOptions: {  
  127.                 pie: {  
  128.                     allowPointSelect: true,  
  129.                     cursor: 'pointer',  
  130.                     dataLabels: {  
  131.                         enabled: true,  
  132.                         format: '<b>{point.name}</b>: {point.y}',  
  133.                         style: {  
  134.                             color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'  
  135.                         }  
  136.                     }  
  137.                 }  
  138.             },  
  139.             series: [{  
  140.                 name: 'Leave Balance',  
  141.                 colorByPoint: true,  
  142.                 data: [  
  143.                     ['TotalCasualLeave', casualLeaveDays],  
  144.                     ['CompOff', ComOffLeaveDays],  
  145.                     ['MaternityLeave', maternityLeaveDays],  
  146.                     ['PaternityLeave', paternityLeaveDays],  
  147.                     ['SicKLeave', sickLeaveDays]  
  148.                 ]  
  149.             }]  
  150.         });  
  151.     }  
  152. </script>  
Here  EmployeeLeave, LeaveType, TotalNoLeaves are lists I created
 
Totalleavedays-Column from  EmployeeLeave List
 
LeaveType,Total,isActive,CompOff', MaternityLeave,PaternityLeave,SicKLeave are Columns from LeaveType List
 
Concept is binding the third party pie chart to our Sharepoint list, by comparing  the users present in the list if it doesn't display the whole Leavetype list
 
Step 1
 
Include Min.js & Highchart.js
 
Step 2
 
Declare Variables to Store Values from the List (intialize as  Zero)
 
Step 3
 
Using RestQuery based on the Logged in User
 
Step 4
 
Check the total number of leave days from Employee Leave list if user exists, then  get total number of days from the list and parse it to integer
 
Step 5
 
If user Doesn't exists, bind the data from leavetype list to the PieChart, otherwise take the total number of days and subtract the number of leave days applied for by logged in users
 
Step 6

Iterate  $.each(data.d.results, function (key, val)

The total numberof days from list Leavetype and the total number of days from Employee Leave List are compared (i.e Eg,
  1. if(val.LeaveType==='Casual Leave'){  
  2. casualLeaveDays = val.Total;))  
Step 7

Parse the total number of leave days from the employee Lleave list to leave type (i.e. Eg, ComOffLeaveDays = (parseInt(ComOffLeaveDays) - parseInt(compOffLeaveFromEmployeeLeaveList));))
 
Step 8
 
And Call the Method DrawChart();
 
Step 9
 
Using Render Function the data from the list is bound to the chart:
  1. series: [{  
  2.             name: 'Leave Balance',  
  3.             colorByPoint: true,  
  4.             data: [  
  5.                 ['TotalCasualLeave', casualLeaveDays], ))   
Note

The Chart is Displayed Using <Div>Some Div Name </Div> in the html  Source 
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now