Create Business Intelligence Bar Charts from SharePoint List View using Client Side Rendering and ChartJS



Published: 24 October 2017

Client Side Rendering is a powerful option to modify the list views and list forms. It simply means that the data is transformed and displayed using Client side technologies like HTML and JavaScript. Prior to SharePoint 2013 in case of any requirements to modify the list views we had to use SharePoint Designer and XSLT formatting. However with SharePoint 2013 Client Side rendering has been made available. It comes in two flavors

  1. Display Templates – Used to modify the rendering of the Search Results display
  2. JSLink – Used to modify List Views and List Forms like NewForm.aspx

Essentially CSR with JSLink taps into list view rendering and overrides properties that govern the list view look and feel. Some of the properties that can be over ridden are:

  • 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 we can override the Item property if we want some logic to be implemented for each row of the List View and we can over ride the Fields property to update the rendering of the List Column. Header and Footer as the name suggests can be used to add Header and Footer Customization to the List.

In this article we will see CSR in action by creating a business intelligence bar chart from the list view using ChartJS.This has been tested in both SharePoint 2016 as well as SharePoint Online. 

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 Bar Chart during run time. Initially the SharePoint List will have the Quarter Sales details of vehicles.

During run time we will use Chart JS and Client Side Rendering to convert the above view to a Bar Chart as shown below:

Pre-requisites

  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. 

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

3.       Get jQuery minified version. Upload it to SharePoint Site Assets.

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 couples 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

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

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

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 will be used for coloring bars and the data parameter which will contain the values that will be used to plot the chart.

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

JSLink Code

The full code used for generating the bar chart is given below:

Apply the JSLink to SharePoint

The above code will be saved as a JS file and can be uploaded to the site assets library of SharePoint. In order to override the specific List View, append “?toolpaneview=2” at the end of the List View URL to go to the edit mode of the page. 

Specify the URL of the JS File in the JS Link section as shown above. While specifying the JSLink file URL we have to take a special note that we will be specifying site/site collection relative URL using the below tokens.

  • ~site - Used to link to the JS file in the current web
  • ~sitecollection - Used to link to the JS file in the current site collection
  • ~layouts - Used to link to the JS file that has been deployed to the layouts folder

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

·         Chart.JS file which is uploaded to same Site Assets Library

·         Bar.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 Bar Chart as shown below:

Summary

Thus we have seen how to convert a SharePoint List View to Bar Chart using Client Side Rendering and ChartJS. In the upcoming article we will see how to create other chart forms using CSR and ChartJS. 



Join 7,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here