Convert SharePoint List View To Pie 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 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 run time to accomplish different List View modifications and at different List View locations.

Chart JS

Chart JS is an open sourced 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 Pie Chart during run time. Initially the SharePoint List will have the Car Sales details of vehicles.

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

You can see how we can convert the list view to bar chart from this article.

Prerequisites

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

• 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 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 in the Pie Chart.

Items = [];
ChartColors = ['#27d76c', '#38bbb1', '#2669d7', '#ec5dbc', '#4D5360', '#f5cd6a'];
Description = '';

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.

var contextOverride = {};
Templates = {};
Templates.Header = CarSalesPieChart.Header;
Templates.Item = CarSalesPieChart.Item;
Templates.Footer = CarSalesPieChart.Footer;
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 pie chart. The Value attribute will store the SharePoint Values and Color attribute stores the pie chart colour to be associated with it. Description will store the legend details that will also act as a hyperlink towards the corresponding list item.

Item = function(ctx) {
    var itemColor = CarSalesPieChart.ChartColors[CarSalesPieChart.Items.length];
    Items.push({
        value: parseInt(ctx.CurrentItem.TotalSales),
        color: itemColor
    });
    Description += '<p><h2><span style="font-family:Segoe UI;color:' + itemColor + ';font-weight:bold;">' + '<a href=https://ctsplayground.sharepoint.com/sites/Playground/Lists/ProductSales/DispForm.aspx?ID=' + ctx.CurrentItem.ID + '>' + ctx.CurrentItem.CarName + '</a>' + ' (' + ctx.CurrentItem.TotalSales + ')</span></h2></p>';
    return '';
}

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 ‘CarSalesPieChart.Items’ which contains the list data and color schemes to be used.

Footer = function() {
    var options = {};
    var pie = $("#CarSalesPieChart").get(0).getContext("2d");
    new Chart(pie).Pie(CarSalesPieChart.Items, options);
    // Add the description for all the values.
    $('#ChartDescription').html(CarSalesPieChart.Description);
    return '';
}

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

Full Code

// Declare the arrays used for Chart Creation
var CarSalesPieChart = CarSalesPieChart || {};
// Array with colors for the pie chart.
Items = [];
ChartColors = ['#27d76c', '#38bbb1', '#2669d7', '#ec5dbc', '#4D5360', '#f5cd6a'];
Description = '';
// Starting Function. Override the SharePoint List View Rendering.
BuildChart = function() {
    var contextOverride = {};
    Templates = {};
    Templates.Header = CarSalesPieChart.Header;
    Templates.Item = CarSalesPieChart.Item;
    Templates.Footer = CarSalesPieChart.Footer;
    TemplateManager.RegisterTemplateOverrides(contextOverride);
};
//Repeat the action for each list item
Header = function(ctx) {
    return '<canvas id="CarSalesPieChart" width="400" height="400" style="float:left;margin-right:10px;"></canvas><div id="ChartDescription"></div>';
}
//Create a div with id - CarSalesChart that will be populated with the Pie Chart
Item = function(ctx) {
    var itemColor = CarSalesPieChart.ChartColors[CarSalesPieChart.Items.length];
    Items.push({
        value: parseInt(ctx.CurrentItem.TotalSales),
        color: itemColor
    });
    Description += '<p><h2><span style="font-family:Segoe UI;color:' + itemColor + ';font-weight:bold;">' + '<a href=https://ctsplayground.sharepoint.com/sites/Playground/Lists/ProductSales/DispForm.aspx?ID=' + ctx.CurrentItem.ID + '>' + ctx.CurrentItem.CarName + '</a>' + ' (' + ctx.CurrentItem.TotalSales + ')</span></h2></p>';
    return '';
}
// Override the footer and draw the pie Chart
Footer = function() {
    //Customize pie chart . Refer http://www.chartjs.org/docs/
    var options = {};
    var pie = $("#CarSalesPieChart").get(0).getContext("2d");
    new Chart(pie).Pie(CarSalesPieChart.Items, options);
    // Add the description for all the SharePoint List Column values.
    $('#ChartDescription').html(CarSalesPieChart.Description);
    return '';
}
$(document).ready(CarSalesPieChart.BuildChart());

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/Pie.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 Pie Chart, as shown below.

Summary

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