SharePoint

Working With SharePoint And ChartJS

In this article, we will see how we can represent SharePoint data in graphical form.

Let's start.

Create a custom SharePoint list 'TaskDetails' with the below details.
 
Column NameType
TitleSingle line
statusChoice 
 
Add list items into 'TaskDetails'.
 
Then add the below HTML elements on the page.
  1. <div>  
  2.     <canvas id="AssetStatus" width="500" height="500"></canvas>          
  3. </div>  
  4. <div id="chartjs-legend" class="noselect" ></div>  
Add reference for jQuery and ChartJS plugin.
  1. <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
  2. <script type="text/javascript" src="Chart.js"></script>  
Code for getting SharePoint 'TaskDetails' list data using Rest API.
  1. $.ajax({  
  2.     url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
  3.     type: "Get",  
  4.     headers: {  
  5.         "accept": "application/json;odata=verbose",  
  6.     },  
  7.     success: function (data) {  
  8.         LoadChart(data);  
  9.     },  
  10.     error: function (err) {  
  11.         //show error  
  12.     }  
  13. });  
Convert data into chartJS dataset and load the chart.
  1. var LoadChart = function (data) {  
  2.             var items = [];  
  3.             var statuses = [];  
  4.             var chartData = [];  
  5.             var temp = "";  
  6.   
  7.             //Loop through items to find unique statuses  
  8.             for (var i = 0; i < data.d.results.length; i++) {  
  9.                 items.push(data.d.results[i]);  
  10.                 if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
  11.                     continue;  
  12.                 }  
  13.                 temp = data.d.results[i].status;  
  14.                 statuses.push(temp);  
  15.             }  
  16.   
  17.             function findStatus(arg) {  
  18.                 return function (items) {  
  19.                     return items.indexOf(arg) > -1;  
  20.                 }  
  21.             }  
  22.             var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
  23.             for (var i = 0; i < statuses.length; i++) {  
  24.                 var tempCount = items.filter(findStatusInData(statuses[i])).length;  
  25.                 var object = {  
  26.   
  27.                     value: tempCount,  
  28.                     color: clrs[i],  
  29.                     label: statuses[i]  
  30.                 }  
  31.                 chartData.push(object);  
  32.             }  
  33.   
  34.             function findStatusInData(arg) {  
  35.                 return function (items) {  
  36.                     return items.status.indexOf(arg) > -1;  
  37.                 }  
  38.             }  
  39.   
  40.             var ctx = document.getElementById('AssetStatus').getContext("2d");  
  41.             var chart = new Chart(ctx).Doughnut(chartData, {});  
  42.   
  43.             document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
  44.   
  45.         }   
The Output will be as below.

Output

The integrated code will be as below.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
  6.     <script type="text/javascript" src="Chart.js"></script>  
  7.     <script type="text/javascript" >  
  8.   
  9.         $.ajax({  
  10.             url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
  11.             type: "Get",  
  12.             headers: {  
  13.                 "accept": "application/json;odata=verbose",  
  14.             },  
  15.             success: function (data) {  
  16.                 LoadChart(data);  
  17.             },  
  18.             error: function (err) {  
  19.                 //show error  
  20.             }  
  21.         });  
  22.   
  23.         var LoadChart = function (data) {  
  24.             var items = [];  
  25.             var statuses = [];  
  26.             var chartData = [];  
  27.             var temp = "";  
  28.   
  29.             //Loop through items to find unique statuses  
  30.             for (var i = 0; i < data.d.results.length; i++) {  
  31.                 items.push(data.d.results[i]);  
  32.                 if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
  33.                     continue;  
  34.                 }  
  35.                 temp = data.d.results[i].status;  
  36.                 statuses.push(temp);  
  37.             }  
  38.   
  39.             function findStatus(arg) {  
  40.                 return function (items) {  
  41.                     return items.indexOf(arg) > -1;  
  42.                 }  
  43.             }  
  44.             var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
  45.             for (var i = 0; i < statuses.length; i++) {  
  46.                 var tempCount = items.filter(findStatusInData(statuses[i])).length;  
  47.                 var object = {  
  48.   
  49.                     value: tempCount,  
  50.                     color: clrs[i],  
  51.                     label: statuses[i]  
  52.                 }  
  53.                 chartData.push(object);  
  54.             }  
  55.   
  56.             function findStatusInData(arg) {  
  57.                 return function (items) {  
  58.                     return items.status.indexOf(arg) > -1;  
  59.                 }  
  60.             }  
  61.   
  62.             var ctx = document.getElementById('AssetStatus').getContext("2d");  
  63.             var chart = new Chart(ctx).Doughnut(chartData, {});  
  64.   
  65.             document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
  66.   
  67.         }  
  68.   
  69.     </script>  
  70.      <style type="text/css">  
  71.        ol,  
  72.        ul {  
  73.            list-style: none;  
  74.            margin: 0;  
  75.            padding: 0;  
  76.            text-align: center;  
  77.        }  
  78.   
  79.        li {  
  80.            display: inline-table;  
  81.        }  
  82.        .noselect {  
  83.            -webkit-touch-callout: none;  
  84.            -webkit-user-select: none;  
  85.            -khtml-user-select: none;  
  86.            -moz-user-select: none;  
  87.            -ms-user-select: none;  
  88.            user-select: none;  
  89.        }  
  90.        #chartjs-legend {  
  91.            position: absolute;  
  92.            width: 100%;  
  93.            bottom: 10%;  
  94.        }  
  95.   
  96.            #chartjs-legend li {  
  97.                cursor: pointer;  
  98.                margin: 10px 4px;  
  99.            }  
  100.   
  101.                #chartjs-legend li span {  
  102.                    position: relative;  
  103.                    padding: 6px 20px;  
  104.                    border-radius: 13px;  
  105.                    color: white;  
  106.                    z-index: 2;  
  107.                }  
  108.    </style>  
  109.     <meta charset="utf-8" />  
  110.     <title></title>  
  111. </head>  
  112. <body>  
  113.     <div>  
  114.         <canvas id="AssetStatus" width="500" height="500"></canvas>          
  115.     </div>  
  116.     <div id="chartjs-legend" class="noselect" ></div>  
  117. </body>  
  118. </html>  
Refer to the attached resources for more.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs