Create Line 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 , which is 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 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 the modified HTML.

Some 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 source JavaScript charting library, using which we can create different types of chart 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 Line chart during the run time. Initially, SharePoint List will have the quarter sales details of the vehicles.

During the run time, we will use Chart JS and Client Side Rendering to convert the view given above to a Line chart, as shown below.

Pre-requisites

A SharePoint list is with the columns given below. Create a new view named LineChart, which we will convert to the graphical representation, using CSR and Chart JS.

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

The required JS files given above are also zipped and uploaded along with this article. You can use them 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 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.

// Declare the arrays used for Chart Creation
var LineChart = LineChart || {};
Colors = ['#2669d7', '#ec5dbc', '#4D5360'];
ChartTitle =[];
Q1Values = [];
Q2Values = [];
Q3Values= [];

The main starting point function of client side rendering is discussed below. During the run time, we will override the Header, Footer and Item properties of the context information object.

BuildChart = function() {
var ContextOverride = {};
Templates = {};
Templates.Header = LineChart.Header;
Templates.Item = LineChart.Item;
Templates.Footer = LineChart.Footer;
TemplateManager.RegisterTemplateOverrides(ContextOverride);
};

The Item override method will be 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 the chart.

Item = function(ctx) {
debugger;
var Q1Val = ctx.CurrentItem.Quarter1.replace(",", "");
var Q2Val = ctx.CurrentItem.Quarter2.replace(",", "");
var Q3Val = ctx.CurrentItem.Quarter3.replace(",", "");
ChartTitle.push(ctx.CurrentItem.Product);
Q1Values.push(parseInt(Q1Val));
Q2Values.push(parseInt(Q2Val));
Q3Values.push(parseInt(Q3Val));
return '';
}

Chart 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 three chart lines and the data parameter, which will contain the values that will be used to plot the chart.

Header = function(ctx) {
return '<canvas id="lineChart" width="700" height="400" style="float:left;margin-right:20px;"></canvas><div id="chartDescription"></div>';
}
// Override the footer and draw the Line Chart
Footer = function() {
var data = {
labels: LineChart.ChartTitle,
datasets: [{
strokeColor: LineChart.Colors[0],
pointColor: LineChart.Colors[0],
pointStrokeColor: "#fff",
data: LineChart.Q1Values
}, {
strokeColor: LineChart.Colors[1],
pointColor: LineChart.Colors[1],
pointStrokeColor: "#fff",
data: LineChart.Q2Values
}, {
strokeColor: LineChart.Colors[2],
pointColor: LineChart.Colors[2],
pointStrokeColor: "#fff",
data: LineChart.Q3Values
}]
}
// Line chart options.
var options = {
scaleOverride: true,
scaleSteps: 12,
scaleStepWidth: 1000,
scaleStartValue: 0,
pointDotRadius: 7,
datasetFill: false
};
var chart = $("#lineChart").get(0).getContext("2d");
new Chart(chart).Line(data, options);
Description += '<h2><span style="color:' + LineChart.Colors[0] + ';font-weight:italic;">Quarter1 Sales</span><h2>';
Description += '<h2><span style="color:' + LineChart.Colors[1] + ';font-weight:italic;">Quarter2 Sales</span><h2>';
Description += '<h2><span style="color:' + LineChart.Colors[2] + ';font-weight:italic;">Quarter3 Sales</span><h2>';
$('#chartDescription').html(LineChart.Description);
return '';
}

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

Full code

// Declare the arrays used for Chart Creation
var LineChart = LineChart || {};
Colors = ['#2669d7', '#ec5dbc', '#4D5360'];
ChartTitle = [];
Q1Values = [];
Q2Values = [];
Q3Values = [];
Description = '';
// Starting Function. Override the SharePoint List View Rendering.
BuildChart = function() {
var ContextOverride = {};
Templates = {};
Templates.Header = LineChart.Header;
Templates.Item = LineChart.Item;
Templates.Footer = LineChart.Footer;
TemplateManager.RegisterTemplateOverrides(ContextOverride);
};
//Repeat the action for each list item
Item = function(ctx) {
debugger;
var Q1Val = ctx.CurrentItem.Quarter1.replace(",", "");
var Q2Val = ctx.CurrentItem.Quarter2.replace(",", "");
var Q3Val = ctx.CurrentItem.Quarter3.replace(",", "");
ChartTitle.push(ctx.CurrentItem.Product);
Q1Values.push(parseInt(Q1Val));
Q2Values.push(parseInt(Q2Val));
Q3Values.push(parseInt(Q3Val));
return '';
}
//Create a div with id - ProductSalesChart that will be populated with the Line Chart
Header = function(ctx) {
return '<canvas id="lineChart" width="700" height="400" style="float:left;margin-right:20px;"></canvas><div id="chartDescription"></div>';
}
// Override the footer and draw the Line Chart
Footer = function() {
var data = {
labels: LineChart.ChartTitle,
datasets: [{
strokeColor: LineChart.Colors[0],
pointColor: LineChart.Colors[0],
pointStrokeColor: "#fff",
data: LineChart.Q1Values
}, {
strokeColor: LineChart.Colors[1],
pointColor: LineChart.Colors[1],
pointStrokeColor: "#fff",
data: LineChart.Q2Values
}, {
strokeColor: LineChart.Colors[2],
pointColor: LineChart.Colors[2],
pointStrokeColor: "#fff",
data: LineChart.Q3Values
}]
}
// Line chart options.
var options = {
scaleOverride: true,
scaleSteps: 12,
scaleStepWidth: 1000,
scaleStartValue: 0,
pointDotRadius: 7,
datasetFill: false
};
var chart = $("#lineChart").get(0).getContext("2d");
new Chart(chart).Line(data, options);
Description += '<h2><span style="color:' + LineChart.Colors[0] + ';font-weight:italic;">Quarter1 Sales</span><h2>';
Description += '<h2><span style="color:' + LineChart.Colors[1] + ';font-weight:italic;">Quarter2 Sales</span><h2>';
Description += '<h2><span style="color:' + LineChart.Colors[2] + ';font-weight:italic;">Quarter3 Sales</span><h2>';
$('#chartDescription').html(LineChart.Description);
return '';
}
//Call the starting point function
$(document).ready(LineChart.BuildChart());

Add JS link

We can save the code given above 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 JS file in the JSLink section. We will be adding the reference to 3 JS files, using short hand.

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

JS files that are referenced as JSLink are given below.

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 change in the JSLink URL accordingly. Once we save the page after adding the JSLink, the list view will be rendered as a Line chart, as shown below.

Summary

Thus, we have seen how to convert a SharePoint list view to Line chart using, client side rendering and ChartJS.