SharePoint

Convert SharePoint List View To Radar Chart Using Client Side Rendering And Chart JS

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 requires an in depth knowledge of working with XSL and debugging was also cumbersome. However with CSR, we can tap in to the rendering process and override the default properties of the List View, using JavaScript and convert 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 List View is rendered, while OnPostrender allows us to modify List View, once the view has been rendered. Similarly, each of the properties can be overridden during run time to accomplish different List View modifications and at different List View locations.

Chart JS

SharePoint

Chart JS is an open source JavaScript charting library, using which we can create different types of charts by pumping in the 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 SharePoint List View data into a Radar Chart during the run time. Initially, SharePoint List will have the car sales details of the vehicles.

SharePoint

During the run time, we will make use of JSLink and convert it to Radar Chart representation given below.

SharePoint

You can also see, how we can convert the list view to Bar chart from the article.

Prerequisites

  • A SharePoint List with the columns given below. Create a new View named ‘RadarView’, which we will convert to the graphical representation, using CSR and Chart JS.

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

The required JS files are zipped and uploaded along with this article too. You can use it 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 the particular div. In order to get started, we will require a couple of arrays, which will hold the values from SharePoint List, which will be plotted in Radar Chart.

  1. // Declare the arrays used for Chart Creation  
  2. var RadarChart = RadarChart || {};  
  3. Colors = ['#5e92c1', '#b23a3a', '#b2a839'];  
  4. ChartTitle =[];  
  5. Q1Values = [];  
  6. Q2Values = [];  
  7. Q3Values= [];  
  8. Description = '';  

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

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

An Item override method will run for each SharePoint list item. It will push SharePoint list item values to the variable arrays, which we had declared earlier. These data arrays will be used to plot Radar chart. The Value attribute will store SharePoint Values and Color attribute stores Radar chart color to be associated with it. Description will store the legend details, which will also act as a hyperlink towards the corresponding list item.

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

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 new chart command and this command takes in parameter array‘data’, which contains the list data and color schemes to be used.

  1. Header = function(ctx) {  
  2.     return '<canvas id="RadarChart" width="600" height="400" style="float:left;margin-right:20px;"></canvas><divid="chartDescription"></div>';  
  3. }  
  4. // Override the footer and draw the Radar Chart  
  5. Footer = function() {  
  6.         debugger;  
  7.         var data = {  
  8.             labels: RadarChart.ChartTitle,  
  9.             datasets: [{  
  10.                 fillColor: RadarChart.Colors[0],  
  11.                 strokeColor: "#6e6b70",  
  12.                 pointColor: RadarChart.Colors[0],  
  13.                 pointStrokeColor: "#fff",  
  14.                 data: RadarChart.Q1Values  
  15.             }, {  
  16.                 fillColor: RadarChart.Colors[1],  
  17.                 strokeColor: "#6e6b70",  
  18.                 pointColor: RadarChart.Colors[1],  
  19.                 pointStrokeColor: "#fff",  
  20.                 data: RadarChart.Q2Values  
  21.             }, {  
  22.                 fillColor: RadarChart.Colors[2],  
  23.                 strokeColor: "#6e6b70",  
  24.                 pointColor: RadarChart.Colors[2],  
  25.                 pointStrokeColor: "#fff",  
  26.                 data: RadarChart.Q3Values  
  27.             }]  
  28.         }  
  29.         // Radar chart options.  
  30.         var options = {  
  31.             scaleOverride: true,  
  32.             scaleSteps: 12,  
  33.             scaleStepWidth: 1000  
  34.         };  
  35.         var chart = $("#RadarChart").get(0).getContext("2d");  
  36.         new Chart(chart).Radar(data, {  
  37.             animationSteps: 15  
  38.         });  

It is new chart command, which will create Radar Chart with the provided parameters. We can customize Radar chart by adding the 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 RadarChart = RadarChart || {};  
  3. Colors = ['#5e92c1', '#b23a3a', '#b2a839'];  
  4. ChartTitle = [];  
  5. Q1Values = [];  
  6. Q2Values = [];  
  7. Q3Values = [];  
  8. Description = '';  
  9. // Starting Function. Override the SharePoint List View Rendering.  
  10. BuildChart = function() {  
  11.     var ContextOverride = {};  
  12.     Templates = {};  
  13.     Templates.Header = RadarChart.Header;  
  14.     Templates.Item = RadarChart.Item;  
  15.     Templates.Footer = RadarChart.Footer;  
  16.     TemplateManager.RegisterTemplateOverrides(ContextOverride);  
  17. };  
  18. //Repeat the action for each list item  
  19. Item = function(ctx) {  
  20.     var Q1Val = ctx.CurrentItem.Quarter1.replace(",", "");  
  21.     var Q2Val = ctx.CurrentItem.Quarter2.replace(",", "");  
  22.     var Q3Val = ctx.CurrentItem.Quarter3.replace(",", "");  
  23.     ChartTitle.push(ctx.CurrentItem.Product);  
  24.     Q1Values.push(parseInt(Q1Val));  
  25.     Q2Values.push(parseInt(Q2Val));  
  26.     Q3Values.push(parseInt(Q3Val));  
  27.     return '';  
  28. }  
  29. //Create a div with id - ProductSalesChart that will be populated with the Radar Chart  
  30. Header = function(ctx) {  
  31.     return '<canvas id="RadarChart" width="600" height="400" style="float:left;margin-right:20px;"></canvas><divid="chartDescription"></div>';  
  32. }  
  33. // Override the footer and draw the Radar Chart  
  34. Footer = function() {  
  35.     debugger;  
  36.     var data = {  
  37.         labels: RadarChart.ChartTitle,  
  38.         datasets: [{  
  39.             fillColor: RadarChart.Colors[0],  
  40.             strokeColor: "#6e6b70",  
  41.             pointColor: RadarChart.Colors[0],  
  42.             pointStrokeColor: "#fff",  
  43.             data: RadarChart.Q1Values  
  44.         }, {  
  45.             fillColor: RadarChart.Colors[1],  
  46.             strokeColor: "#6e6b70",  
  47.             pointColor: RadarChart.Colors[1],  
  48.             pointStrokeColor: "#fff",  
  49.             data: RadarChart.Q2Values  
  50.         }, {  
  51.             fillColor: RadarChart.Colors[2],  
  52.             strokeColor: "#6e6b70",  
  53.             pointColor: RadarChart.Colors[2],  
  54.             pointStrokeColor: "#fff",  
  55.             data: RadarChart.Q3Values  
  56.         }]  
  57.     }  
  58.     // Radar chart options.  
  59.     var options = {  
  60.         scaleOverride: true,  
  61.         scaleSteps: 12,  
  62.         scaleStepWidth: 1000  
  63.     };  
  64.     var chart = $("#RadarChart").get(0).getContext("2d");  
  65.     new Chart(chart).Radar(data, {  
  66.         animationSteps: 15  
  67.     });  
  68.     Description += '<h2><span style="color:' + RadarChart.Colors[0] + ';font-weight:italic;">Quarter1 Sales</span><h2>';  
  69.     Description += '<h2><span style="color:' + RadarChart.Colors[1] + ';font-weight:italic;">Quarter2 Sales</span><h2>';  
  70.     Description += '<h2><span style="color:' + RadarChart.Colors[2] + ';font-weight:italic;">Quarter3 Sales</span><h2>';  
  71.     $('#chartDescription').html(RadarChart.Description);  
  72.     return '';  
  73. }  
  74. //Call the starting point function  
  75. $(document).ready(RadarChart.BuildChart());  

Add JS Link

We can save the code given above to a JS file and upload it to  Site Assets within SharePoint Site. We can then go to List View’s "Edit" page by appending “?toolpaneview=2” . In the Edit page of the View, go to 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/Radar.js

The JS files, which are referenced as JSLink are given below.

  • jQuery file, which we have uploaded to 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 JSLink URL accordingly. Once we save the page after adding the JSLink, the List View will be rendered as a Radar Chart, as shown below.

Summary

Thus, we saw how to convert a SharePoint List View to Radar Chart, using Client Side Rendering and ChartJS in SharePoint Server 2016 and SharePoint Online.

Up Next
    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