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.

2. Download Chart JS from 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.

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.

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.

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.

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.