Pie Chart For SharePoint

Pie chart binds the list data, based on the list item comparisons from three different lists.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="//code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript">
    var maternityLeaveDays = 0;
    var paternityLeaveDays = 0;
    var ComOffLeaveDays = 0;
    var sickLeaveDays = 0;
    var casualLeaveDays = 0;
    var userExist = false;
    var compOffLeaveFromEmployeeLeaveList = 0;
    var sickLeaveFromEmployeeLeaveList = 0;
    var casualLeaveFromEmployeeLeaveList = 0;
    var MLOffLeaveFromEmployeeLeaveList = 0;
    var PLLeaveFromEmployeeLeaveList = 0;
    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";
    $.ajax({
        url: URLString,
        type: "GET",
        dataType: "json",
        async: false,
        headers: {
            "accept": "application/json;odata=verbose"
        },
        success: callSuccessMethod,
        error: callFailureMethod
    });

    function callSuccessMethod(data, request) {
        if (data.d.results.length >= 1) {
            userExist = true;
            $.each(data.d.results, function(key, val) {
                if (val.LeaveType.LeaveType === 'Compoff') {
                    compOffLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);
                } else if (val.LeaveType.LeaveType === 'SickLeave') {
                    sickLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);
                } else if (val.LeaveType.LeaveType === 'CasualLeave') {
                    casualLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);
                } else if (val.LeaveType.LeaveType === 'MaternityLeave') {
                    MLOffLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);
                } else if (val.LeaveType.LeaveType === 'PaternityLeave') {
                    PLLeaveFromEmployeeLeaveList += parseInt(val.Totalleavedays);
                }
            });
            var endPointURLString = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Leavetype')/Items?$select=LeaveType,Total,isActive&$filter=isActive eq '1' ";
            $.ajax({
                url: endPointURLString,
                type: "GET",
                dataType: "json",
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose"
                },
                success: callSuccessMethodForLeaveType,
                error: callFailureMethodLeaveType
            });
        } else {
            userExist = false;
            var endPointURLString = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Leavetype')/Items";
            $.ajax({
                url: endPointURLString,
                type: "GET",
                dataType: "json",
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose"
                },
                success: callSuccessMethodForLeaveType,
                error: callFailureMethodLeaveType
            });
        }
    }

    function callFailureMethod(data, errCode, errMessage) {
        alert("Error: " + errMessage);
    }

    function callSuccessMethodForLeaveType(data, request) {
        $.each(data.d.results, function(key, val) {
            if (val.LeaveType === 'Casual Leave') {
                casualLeaveDays = val.Total;
            } else if (val.LeaveType === 'Marriage Leave') {
                marriageLeaveDays = val.Total;
            } else if (val.LeaveType === 'Maternity Leave') {
                maternityLeaveDays = val.Total;
            } else if (val.LeaveType === 'Paternity Leave') {
                paternityLeaveDays = val.Total;
            } else if (val.LeaveType === 'Compensatory Leave') {
                ComOffLeaveDays = val.Total;
            } else if (val.LeaveType === 'Sick Leave') {
                sickLeaveDays = val.Total;
            }
        });
    }
    if (userExist) {
        ComOffLeaveDays = (parseInt(ComOffLeaveDays) - parseInt(compOffLeaveFromEmployeeLeaveList));
        sickLeaveDays = (parseInt(sickLeaveDays) - parseInt(sickLeaveFromEmployeeLeaveList));
        casualLeaveDays = (parseInt(casualLeaveDays) - parseInt(casualLeaveFromEmployeeLeaveList));
        maternityLeaveDays = (parseInt(maternityLeaveDays) - parseInt(MLOffLeaveFromEmployeeLeaveList));
        paternityLeaveDays = (parseInt(paternityLeaveDays) - parseInt(PLLeaveFromEmployeeLeaveList));
        DrawChart();
    }
    if (!userExist) {
        DrawChart();
    }
    }

    function callFailureMethodLeaveType(data, errCode, errMessage) {
        alert("Error: " + errMessage);
    }

    function DrawChart() {
        PieChart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Balance Leave Availble'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y}',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: 'Leave Balance',
                colorByPoint: true,
                data: [
                    ['TotalCasualLeave', casualLeaveDays],
                    ['CompOff', ComOffLeaveDays],
                    ['MaternityLeave', maternityLeaveDays],
                    ['PaternityLeave', paternityLeaveDays],
                    ['SicKLeave', sickLeaveDays]
                ]
            }]
        });
    }
</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,

if(val.LeaveType==='Casual Leave'){
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:

series: [{
            name: 'Leave Balance',
            colorByPoint: true,
            data: [
                ['TotalCasualLeave', casualLeaveDays], ))

Note

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