Post
Ask Question

Build A Chart On SharePoint List Data Using ChartJS Library

In this article, I have explained how to build custom charts based on Sharepoint list using chartJS library.
 
Now I am going to create a simple task list in SharePoint, then I am  going to build a doughnut/Pie chart based on list data.
 
Let’s get started, I have a task list with some information already entered.
 
After that now I'm going to download the chartjs library from their CDN.
 
 
You can download it from the above link.
 
Create a HTML file in your sharepoint site assets folder and paste the below HTML snippet.
  1. <canvas id="myChart"></canvas>  
Now create a function named GetChartData(); then query the task list using REST API or using SharePoint PNP JS Library and Process the data to render chart inside your content editor or script editor webpart.
  1. function GetChartData() {  
  2.     $pnp.sp.web.lists.getByTitle('My Tasks').items.get().then(function(response) {  
  3.   
  4.         var label = []; // Holds the chart label information  
  5.         var count = []; // Holds the total count value based on each status  
  6.   
  7.         // Using lodash libary to count data based on "Status" column  
  8.         var data = _.map(_.countBy(response, "Status"), function(val, key) {  
  9.             return (label.push(key), count.push(val))  
  10.         });  
  11.   
  12.         //Initialize the chart   
  13.         var context = document.getElementById("myChart").getContext("2d");  
  14.         var myChart = new Chart(context, {  
  15.             type: 'doughnut', // type of chart doughnet or pie  
  16.             // The data for our dataset  
  17.             data: {  
  18.                 labels: label, // label array collection  
  19.                 datasets: [{  
  20.                     data: count, // count array collection  
  21.                     backgroundColor: [  
  22.                         'rgb(244, 244, 66)',  
  23.                         'rgb(95, 239, 59)',  
  24.                         'rgb(219, 40, 13)',  
  25.                         'rgb(234, 148, 63)',  
  26.                         'rgb(211, 45, 229)',  
  27.                     ],  
  28.                 }]  
  29.             },  
  30.         });  
  31.     })  
  32. }  
_.countBy helps you to calculate the number of items count based on “Status” Column.
 
Here we go -- finally we can see the chart has been successfully rendered.
 
 
 
I have made some changes to control the width and height of the chart.
 
Full Code
  1. <head>  
  2.     <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>  
  3.     <script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript"></script>  
  4.     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" type="text/javascript">  
  5.     </script>  
  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>  
  7. </head>  
  8.   
  9. <body      
  10.     <canvas id="myChart" style="height:200px; max-width:400px; margin: 0px auto;"></canvas>  
  11.     <script type="text/javascript">  
  12.         $(document).ready(function(){  
  13.         GetChartData()  
  14.         })  
  15.   
  16.        function GetChartData(){  
  17.            $pnp.sp.web.lists.getByTitle('My Tasks').items.get().then(function(response){  
  18.                console.log(response)  
  19.                var label = [];  
  20.                var count = [];  
  21.                var data = _.map(_.countBy(response, "Status"), function(val, key) { return (label.push(key), count.push(val)) });  
  22.   
  23.                console.log("data", data);  
  24.                  
  25.               var context = document.getElementById("myChart").getContext("2d");  
  26.             var myChart = new Chart(context, {  
  27.            type: 'doughnut',  
  28.                 // The data for our dataset  
  29.                 data: {  
  30.                     labels: label,  
  31.                     datasets: [{  
  32.                         data: count,  
  33.                         backgroundColor: [  
  34.                             'rgb(244, 244, 66)',  
  35.                             'rgb(95, 239, 59)',  
  36.                             'rgb(219, 40, 13)',  
  37.                             'rgb(234, 148, 63)',  
  38.                             'rgb(211, 45, 229)',  
  39.                         ],  
  40.                     }]  
  41.                 },  
  42.       });        
  43.   })              
  44. }  
  45.     </script>  
  46. </body>  
Happy Coding !

Similar Articles