SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

In this post, we will see how we can represent SharePoint data in graphical form. Now, Create a custom SharePoint list ‘TaskDetails’ with the below details.

Column Name Type
Title Single line
status Choice

Add list items into ‘TaskDetails’.

Then add the below HTML elements on the page. <div>

        <canvas id="AssetStatus" width="500" height="500"></canvas>          
    </div>  
    <div id="chartjs-legend" class="noselect" ></div>

</div>

Add reference for jQuery and ChartJS plugin.

    <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
    <script type="text/javascript" src="Chart.js"></script>

1 2	<script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="Chart.js"></script>

Code for getting SharePoint ‘TaskDetails’ list data using Rest API.

   $.ajax({  
        url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
        type: "Get",  
        headers: {  
            "accept": "application/json;odata=verbose",  
        },  
        success: function (data) {  
            LoadChart(data);  
        },  
        error: function (err) {  
            //show error  
        }  
    });

$.ajax({

url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",

type: "Get",

headers: {

"accept": "application/json;odata=verbose",

success: function (data) {

LoadChart(data);

error: function (err) {

//show error

}

});

Convert data into chartJS dataset and load the chart.

    var LoadChart = function (data) {  
                var items = [];  
                var statuses = [];  
                var chartData = [];  
                var temp = "";  
      
                //Loop through items to find unique statuses  
                for (var i = 0; i < data.d.results.length; i++) {  
                    items.push(data.d.results[i]);  
                    if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
                        continue;  
                    }  
                    temp = data.d.results[i].status;  
                    statuses.push(temp);  
                }  
      
                function findStatus(arg) {  
                    return function (items) {  
                        return items.indexOf(arg) > -1;  
                    }  
                }  
                var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
                for (var i = 0; i < statuses.length; i++) {  
                    var tempCount = items.filter(findStatusInData(statuses[i])).length;  
                    var object = {  
      
                        value: tempCount,  
                        color: clrs[i],  
                        label: statuses[i]  
                    }  
                    chartData.push(object);  
                }  
      
                function findStatusInData(arg) {  
                    return function (items) {  
                        return items.status.indexOf(arg) > -1;  
                    }  
                }  
      
                var ctx = document.getElementById('AssetStatus').getContext("2d");  
                var chart = new Chart(ctx).Doughnut(chartData, {});  
      
                document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
      
            }

var LoadChart = function (data) {

var items = [];

var statuses = [];

var chartData = [];

var temp = "";

//Loop through items to find unique statuses

for (var i = 0; i < data.d.results.length; i++) {

items.push(data.d.results[i]);

if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {

continue;

}

temp = data.d.results[i].status;

statuses.push(temp);

}

function findStatus(arg) {

return function (items) {

return items.indexOf(arg) > -1;

}

var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];

for (var i = 0; i < statuses.length; i++) {

var tempCount = items.filter(findStatusInData(statuses[i])).length;

var object = {

value: tempCount,

color: clrs[i],

label: statuses[i]

}

chartData.push(object);

}

function findStatusInData(arg) {

return function (items) {

return items.status.indexOf(arg) > -1;

}

var ctx = document.getElementById('AssetStatus').getContext("2d");

var chart = new Chart(ctx).Doughnut(chartData, {});

document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();

}

And this is the output:

The integrated code will be as below.

 <!DOCTYPE html>  
      
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
        <script type="text/javascript" src="Chart.js"></script>  
        <script type="text/javascript" >  
      
            $.ajax({  
                url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
                type: "Get",  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                },  
                success: function (data) {  
                    LoadChart(data);  
                },  
                error: function (err) {  
                    //show error  
                }  
            });  
      
            var LoadChart = function (data) {  
                var items = [];  
                var statuses = [];  
                var chartData = [];  
                var temp = "";  
      
                //Loop through items to find unique statuses  
                for (var i = 0; i < data.d.results.length; i++) {  
                    items.push(data.d.results[i]);  
                    if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
                        continue;  
                    }  
                    temp = data.d.results[i].status;  
                    statuses.push(temp);  
                }  
      
                function findStatus(arg) {  
                    return function (items) {  
                        return items.indexOf(arg) > -1;  
                    }  
                }  
                var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
                for (var i = 0; i < statuses.length; i++) {  
                    var tempCount = items.filter(findStatusInData(statuses[i])).length;  
                    var object = {  
      
                        value: tempCount,  
                        color: clrs[i],  
                        label: statuses[i]  
                    }  
                    chartData.push(object);  
                }  
      
                function findStatusInData(arg) {  
                    return function (items) {  
                        return items.status.indexOf(arg) > -1;  
                    }  
                }  
      
                var ctx = document.getElementById('AssetStatus').getContext("2d");  
                var chart = new Chart(ctx).Doughnut(chartData, {});  
      
                document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
      
            }  
      
        </script>  
         <style type="text/css">  
           ol,  
           ul {  
               list-style: none;  
               margin: 0;  
               padding: 0;  
               text-align: center;  
           }  
      
           li {  
               display: inline-table;  
           }  
           .noselect {  
               -webkit-touch-callout: none;  
               -webkit-user-select: none;  
               -khtml-user-select: none;  
               -moz-user-select: none;  
               -ms-user-select: none;  
               user-select: none;  
           }  
           #chartjs-legend {  
               position: absolute;  
               width: 100%;  
               bottom: 10%;  
           }  
      
               #chartjs-legend li {  
                   cursor: pointer;  
                   margin: 10px 4px;  
               }  
      
                   #chartjs-legend li span {  
                       position: relative;  
                       padding: 6px 20px;  
                       border-radius: 13px;  
                       color: white;  
                       z-index: 2;  
                   }  
       </style>  
        <meta charset="utf-8" />  
        <title></title>  
    </head>  
    <body>  
        <div>  
            <canvas id="AssetStatus" width="500" height="500"></canvas>          
        </div>  
        <div id="chartjs-legend" class="noselect" ></div>  
    </body>  
    </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

$.ajax({

url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",

type: "Get",

headers: {

"accept": "application/json;odata=verbose",

success: function (data) {

LoadChart(data);

error: function (err) {

//show error

}

});

var LoadChart = function (data) {

var items = [];

var statuses = [];

var chartData = [];

var temp = "";

//Loop through items to find unique statuses

for (var i = 0; i < data.d.results.length; i++) {

items.push(data.d.results[i]);

if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {

continue;

}

temp = data.d.results[i].status;

statuses.push(temp);

}

function findStatus(arg) {

return function (items) {

return items.indexOf(arg) > -1;

}

var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];

for (var i = 0; i < statuses.length; i++) {

var tempCount = items.filter(findStatusInData(statuses[i])).length;

var object = {

value: tempCount,

color: clrs[i],

label: statuses[i]

}

chartData.push(object);

}

function findStatusInData(arg) {

return function (items) {

return items.status.indexOf(arg) > -1;

}

var ctx = document.getElementById('AssetStatus').getContext("2d");

var chart = new Chart(ctx).Doughnut(chartData, {});

document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();

}

</script>

ol,

ul {

list-style: none;

margin: 0;

padding: 0;

text-align: center;

}

li {

display: inline-table;

}

.noselect {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

#chartjs-legend {

position: absolute;

width: 100%;

bottom: 10%;

}

#chartjs-legend li {

cursor: pointer;

margin: 10px 4px;

}

#chartjs-legend li span {

position: relative;

padding: 6px 20px;

border-radius: 13px;

color: white;

z-index: 2;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

Refer to the attached resources for more.

SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

BLOGROLL

Featured On

Tags