Post
Ask Question

Create Business Intelligence Bar Charts From SharePoint List View Using Client Side Rendering And ChartJS

Client-side rendering was introduced in SharePoint 2013. The primary purpose of CSR is to provide the conditional formatting of the data present within the List Views. Prior to SharePoint 2013, XSLT formatting was the way to implement the conditional formatting of List Views. XSLT formatting required in-depth knowledge of working with XSL and debugging was also cumbersome. However, with CSR, we can tap into the rendering process and override the default properties of the List View, using JavaScript and convert the SharePoint List Data to modified HTML.

 Some of the properties that can be overridden are given below.

  • OnPreRender
  • OnPostRender
  • View
  • Body
  • Item
  • Fields
  • Header
  • Footer

OnPreRender allows us to write some logic even before the List View is rendered, while OnPostRender allows us to modify the List View once the view has been rendered. Similarly, each of the properties can be overridden during runtime to accomplish different List View modifications and at different List View locations.

Chart JS


Chart JS is an open source JavaScript charting library using which we can create different types of chart by pumping in data to the chart creation command. We can download the latest version of Chart.js on GitHub or just use these Chart.js CDN links.

What are we going to do?

In this walk through, we will use Chart JS along with Client Side Rendering (CSR) to convert the SharePoint List View data into a Bar Chart during runtime. Initially, the SharePoint List will have the Quarter Sales details of vehicles.


During runtime, we will use Chart JS and Client Side Rendering to convert the above view to a Bar Chart, as shown below.


Prerequisites

  1. A SharePoint List with the below columns. Create a new View named Bar Chart which we will convert to the graphical representation using CSR and Chart JS.


  1. Download Chart JS from js on GitHub or just use these Chart.js CDN links. Upload it to SharePoint Site Assets.
  2. Get jQuery minified version. Upload it to SharePoint Site Assets.

The above required JS files are zipped and uploaded along with this article too. You can use that as well.

Implementation

Once the above prerequisites are in place, let’s go to the implementation logic. At a high level, ChartJS works by placing a div in the page and uses the new command to create a chart using the available values at that particular div. In order to get started, we will require a couple of arrays that will hold the values from the SharePoint List which will be plotted against the X-Y axis. Q1Values, Q2Values, and Q3Values will be used to hold the Quarter 1, Quarter 2, and Quarter 3 SharePoint List Column values.

  1. // Declare the arrays used for Chart Creation  
  2. var productSalesChart = productSalesChart || {};  
  3. ChartTitle =[];  
  4. Q1Values = [];  
  5. Q2Values = [];  
  6. Q3Values= [];  

The main starting point function of Client Side rendering is discussed below. During runtime, we will override the Header, Footer, and Item properties of the context information object.

  1. var contextOverride = {};  
  2. Templates = {};  
  3. Templates.Header = productSalesChart.Header;  
  4. Templates.Item = productSalesChart.Item;  
  5. Templates.Footer = productSalesChart.Footer;  
  6. TemplateManager.RegisterTemplateOverrides(contextOverride);   

The Item override method will run for each SharePoint list item. It will push the SharePoint list item values to the variable arrays which we had declared earlier. These data arrays will be used to plot the chart.

  1. //Repeat the action for each list item  
  2. Item = function(ctx) {  
  3.     var Q1Val = ctx.CurrentItem.Quarter1.replace(",", "");  
  4.     var Q2Val = ctx.CurrentItem.Quarter2.replace(",", "");  
  5.     var Q3Val = ctx.CurrentItem.Quarter3.replace(",", "");  
  6.     ChartTitle.push(ctx.CurrentItem.Product);  
  7.     Q1Values.push(parseInt(Q1Val));  
  8.     Q2Values.push(parseInt(Q2Val));  
  9.     Q3Values.push(parseInt(Q3Val));  
  10.     return '';  
  11. }   

Chat JS requires a div element with an id which will be used while running the new command to create the chart. This div element will be added to the page by overriding the Header property. In the Footer Property override method, we will create the chart using the new chart command. The new command takes in parameters like color scheme that has to be used for chart bars and the data parameter which will contain the values that will be used to plot the chart.

  1. //Create a div with id - ProductSalesChart that will be populated with the Bar Chart  
  2. Header = function(ctx) {  
  3.     return '<canvas id="ProductSalesChart" width="800" height="400" style="float:left;margin-right:30px;"></canvas><div id="chartDesc"></div>';  
  4. }  
  5. // Override the footer and draw the Bar Chart  
  6. Footer = function() {  
  7.     var data = {  
  8.         labels: productSalesChart.ChartTitle,  
  9.         datasets: [{  
  10.             fillColor: "#4E8C59",  
  11.             strokeColor: "#4E8C59",  
  12.             pointColor: "#4E8C59",  
  13.             pointStrokeColor: "#fff",  
  14.             data: productSalesChart.Q1Values  
  15.         }, {  
  16.             fillColor: "#A97FAA",  
  17.             strokeColor: "#A97FAA",  
  18.             pointColor: "#A97FAA",  
  19.             pointStrokeColor: "#fff",  
  20.             data: productSalesChart.Q2Values  
  21.         }, {  
  22.             fillColor: "#608DAD",  
  23.             strokeColor: "#608DAD",  
  24.             pointColor: "#608DAD",  
  25.             pointStrokeColor: "#fff",  
  26.             data: productSalesChart.Q3Values  
  27.         }]  
  28.     }  
  29.     // Bar Chart options.  
  30.     var options = {  
  31.         scaleOverride: true,  
  32.         scaleSteps: 12,  
  33.         scaleStepWidth: 1000  
  34.     };  
  35.     var Barchart = $("#ProductSalesChart").get(0).getContext("2d");  
  36.     new Chart(Barchart).Bar(data, {  
  37.         animationSteps: 10  
  38.     });  
  39.     return '';  
  40. }   

The new Chart command will create the bar chart with the provided parameters. We can customize the bar chart by adding legends, responsiveness, The other configurable properties can be set to the chart as described in the official documentation here.

Full Code

  1. // Declare the arrays used for Chart Creation  
  2. var productSalesChart = productSalesChart || {};  
  3. ChartTitle = [];  
  4. Q1Values = [];  
  5. Q2Values = [];  
  6. Q3Values = [];  
  7. Desc = '';  
  8. // Starting Function. Override the SharePoint List View Rendering.  
  9. Build = function() {  
  10.     var contextOverride = {};  
  11.     Templates = {};  
  12.     Templates.Header = productSalesChart.Header;  
  13.     Templates.Item = productSalesChart.Item;  
  14.     Templates.Footer = productSalesChart.Footer;  
  15.     TemplateManager.RegisterTemplateOverrides(contextOverride);  
  16. };  
  17. //Repeat the action for each list item  
  18. Item = function(ctx) {  
  19.     var Q1Val = ctx.CurrentItem.Quarter1.replace(",", "");  
  20.     var Q2Val = ctx.CurrentItem.Quarter2.replace(",", "");  
  21.     var Q3Val = ctx.CurrentItem.Quarter3.replace(",", "");  
  22.     ChartTitle.push(ctx.CurrentItem.Product);  
  23.     Q1Values.push(parseInt(Q1Val));  
  24.     Q2Values.push(parseInt(Q2Val));  
  25.     Q3Values.push(parseInt(Q3Val));  
  26.     return '';  
  27. }  
  28. //Create a div with id - ProductSalesChart that will be populated with the Bar Chart  
  29. Header = function(ctx) {  
  30.     return '<canvas id="ProductSalesChart" width="800" height="400" style="float:left;margin-right:30px;"></canvas><div id="chartDesc"></div>';  
  31. }  
  32. // Override the footer and draw the Bar Chart  
  33. Footer = function() {  
  34.     var data = {  
  35.         labels: productSalesChart.ChartTitle,  
  36.         datasets: [{  
  37.             fillColor: "#4E8C59",  
  38.             strokeColor: "#4E8C59",  
  39.             pointColor: "#4E8C59",  
  40.             pointStrokeColor: "#fff",  
  41.             data: productSalesChart.Q1Values  
  42.         }, {  
  43.             fillColor: "#A97FAA",  
  44.             strokeColor: "#A97FAA",  
  45.             pointColor: "#A97FAA",  
  46.             pointStrokeColor: "#fff",  
  47.             data: productSalesChart.Q2Values  
  48.         }, {  
  49.             fillColor: "#608DAD",  
  50.             strokeColor: "#608DAD",  
  51.             pointColor: "#608DAD",  
  52.             pointStrokeColor: "#fff",  
  53.             data: productSalesChart.Q3Values  
  54.         }]  
  55.     }  
  56.     // Bar Chart options.  
  57.     var options = {  
  58.         scaleOverride: true,  
  59.         scaleSteps: 12,  
  60.         scaleStepWidth: 1000  
  61.     };  
  62.     var Barchart = $("#ProductSalesChart").get(0).getContext("2d");  
  63.     new Chart(Barchart).Bar(data, {  
  64.         animationSteps: 10  
  65.     });  
  66.     return '';  
  67. }  
  68. $(document).ready(productSalesChart.Build());   

Add JS Link

We can save the above code to a JS file and upload it to say: Site Assets within the SharePoint Site. We can, then, go the List View’s "Edit" page by appending “?toolpaneview=2” . In the edit page of the View, go to the edit properties of the List View and add the JS file in the JSLink section. We will be adding reference to 3 JS files using the short hand.

~site/siteassets/jquery-1.12.1.min.js|~site/siteassets/Chart.js|~site/siteassets/Bar.js\


The JS files that are referenced as JSLink are,

  • jQuery file which we have uploaded to the Site assets library
  • JS file which is uploaded to same Site Assets Library
  • JS file which contains our override and chart creation logic which is uploaded to SiteAssets.

We can add it to other locations as well, and make the changes in the JSLink URL accordingly. Once we save the page after adding the JSLink, the List View will be rendered as a Bar Chart, as shown below.


Summary

Thus, we saw how to convert a SharePoint List View to Bar Chart using Client Side Rendering and ChartJS.


Similar Articles