Since the dawn of SharePoint, lists have been the Swiss army knife in our SharePoint toolbox. We use lists to store and organize all sorts of information. Documents, surveys, KPI, tasks, announcements and pages, to mention a few. A majority of all the information within a modern SharePoint solution is stored within lists in some way.

Despite the list’s capabilities I have always been quite frustrated about the lack of possibilities in terms of presenting information. We had all of this functionality in terms of storing and organizing the information but when it came down to presenting the information we were pretty much left to the simple and standard data table format (with some exceptions of course). Adjusting the out of box presentation was cumbersome and frustrating.

Making Information Attractive

Turning our heads towards our Intranet audience, our visitors and in some cases our colleagues.

In order to fully reach out to our audience in today’s world we not only have to serve them the proper information. We also have to design the information in a way that attract attention and make the material easy to understand. Attractive information that is easy to read, understand and get a grip on is more likely to stick and make an impact.

Today, with SharePoint 2013, we finally have the opportunity to make information in lists more attractive and work with the presentation format, thanks to JSLink. JSLink have given us capabilities for styling and working with the presentation of information stored in lists in a completely new way.

Add Charts and Diagrams in SharePoint Online, Office 365

A have always been a huge fan of images and visuals as tools for presenting information. I prefer a nice chart or diagram over a spreadsheet, a table, any day.

Adding charts in previous versions of SharePoint would mostly offer you quite a challenge. With SharePoint 2013 and JSLink it’s actually quite easy. No .NET and no full trust solutions needed, only client side magic.

Another positive aspect, due to the client side factor, is that it’s possible to work with JSLink and the presentation in Office 365 and SharePoint online as well as on premise.

I have prepared two examples that demonstrate presenting information stored in lists using graphs. I have chosen to use a SharePoint online site in order to demonstrate the possibility. I have utilized an excellent open source JavaScript library in order to generate the visual graphs. Check it out here.

Line of Sales

A common scenario on an intranet is to present sales data. Presenting it in a data table format may be accurate but sometimes be hard to put in perspective.

Below you will find two images, both presenting the same sales data, comparing budget with actual sales over a year. One data table and one line chart.

SharePoint-2013-line-chart-table

SharePoint-2013-line-chart-chart

The line chart is for me a much better way of presenting the information, making it more visual, easier to grasp and therefore more attractive and more likely to ”stick” in people’s minds.

I have put together a script, a rendering template. I upload the file together with the necessary JQuery and the open source charts library files to the site assets library in my SharePoint online site.

// Declare the variables.
var sitesSalesChart = sitesSalesChart || {};
// Colors for the line chart.
sitesSalesChart.ColorsILike = ['#00ABA9', '#FF0097', '#A200FF', '#8CBF26', '#A05000', '#E6771B8', '#F09609', '#1BA1E2', '#E51400', '#339933'];
// Array for the labels.
sitesSalesChart.ChartLabels =[];
// Array for the budget values.
sitesSalesChart.ChartBudgets = [];
// Array for the sales values.
sitesSalesChart.ChartValues = [];
// Desription.
sitesSalesChart.Desc = '';
 
// Override the rendering.
sitesSalesChart.FieldRenderSetup = function () {
 
	var override = {};
	override.Templates = {};
	override.Templates.Header = sitesSalesChart.CustomHeader;
	override.Templates.Item = sitesSalesChart.CustomItem;
	override.Templates.Footer = sitesSalesChart.CustomFooter;
 
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(override);
};
 
// Override item. Add the labels and values to the arrays. 
sitesSalesChart.CustomItem = function (ctx) {
	sitesSalesChart.ChartLabels.push(ctx.CurrentItem.Title);
	sitesSalesChart.ChartBudgets.push(parseInt(ctx.CurrentItem.Budget));
	sitesSalesChart.ChartValues.push(parseInt(ctx.CurrentItem.Sales));
	return '';
}
 
// Override the header. Add the canvas for the line chart and the placeholder for the description.
sitesSalesChart.CustomHeader = function (ctx) {
	return '<canvas id="lineChart" width="600" height="400" style="float:left;margin-right:20px;"></canvas><div id="chartDesc"></div>';
}
 
// Override the footer.
sitesSalesChart.CustomFooter = function () {
 
	// Declare the object for sales, budget and labels.
	var data = {
		labels: sitesSalesChart.ChartLabels,
		datasets: [
		{
			strokeColor: sitesSalesChart.ColorsILike[0],
			pointColor: sitesSalesChart.ColorsILike[0],
			pointStrokeColor: "#fff",
			data: sitesSalesChart.ChartBudgets
		},
		{
			strokeColor: sitesSalesChart.ColorsILike[1],
			pointColor: sitesSalesChart.ColorsILike[1],
			pointStrokeColor : "#fff",
			data: sitesSalesChart.ChartValues
		}
		]
	}
 
	// Line chart options.
	var options = {
		scaleOverride: true,
		scaleSteps: 15,
		scaleStepWidth: 10,
		scaleStartValue: 0,
		pointDotRadius: 5,
		datasetFill: false
	};
 
	// Generate the line chart.
	var chart = $("#lineChart").get(0).getContext("2d");
	new Chart(chart).Line(data, options);
 
	// Add the description to the placeholder.
	sitesSalesChart.Desc += '<p><h2><span style="color:' + sitesSalesChart.ColorsILike[0] + ';font-weight:bold;">Sales</span><h2></p>';
	sitesSalesChart.Desc += '<p><h2><span style="color:' + sitesSalesChart.ColorsILike[1] + ';font-weight:bold;">Budget</span></h2></p>';
 
	$('#chartDesc').html(sitesSalesChart.Desc);
 
	return '';
}
 
// Fire away! 
$(document).ready(sitesSalesChart.FieldRenderSetup());

SharePoint-2013-line-chart-assets

I add a simple custom list with two additional number columns, named Sales and Budget.

SharePoint-2013-line-chart-list

Finally I add the list web part on my page and add the references to my three JavaScript files in the JSLink property of the web part. I need to reference all three necessary JavaSript files in the JSLink property of the list view web part. I use a pipe, or vertical bar, to separate the three files.

~sitecollection/SiteAssets/jquery-1.7.2.min.js|~sitecollection/SiteAssets/chart.js|~sitecollection/SiteAssets/sales_chart.js

SharePoint-2013-line-chart-edit-wp

The result:

SharePoint-2013-line-chart-result

Please note that you need to store the JavaScript files within the same site collection or in the 15-hive in order for the list web part to accept them.

Cookies and Pie Chart

Another common scenario is to compare data within an interval.

Let’s assume we manufacture cookies and we would like to compare the sales of the different types of cookies. Compare the two images below. The same set of information, the name of the type of cookie and items sold, presented in a data table and then using a pie chart.

SharePoint-2013-pie-chart-table

SharePoint-2013-pie-chart-pie

In order to present the information in a pie chart I start of by adding a simple custom list. I add a new number column called Items.

SharePoint-2013-pie-chart-list-t

I add a simple script to a JavaScript file and upload it to the site assets library in my SharePoint online site, together with the JQuery and open source charts library.

// Declare the variables.
var sitesProductSalesChart = sitesProductSalesChart || {};
// Array with colors for the pie chart.
sitesProductSalesChart.ColorsILike = ['#00ABA9', '#FF0097', '#A200FF', '#8CBF26', '#A05000', '#E6771B8', '#F09609', '#1BA1E2', '#E51400', '#339933'];
sitesProductSalesChart.Items = [];
sitesProductSalesChart.Desc = '';
 
// Override the rendering.
sitesProductSalesChart.FieldRenderSetup = function () {
 
    	var override = {};
    	override.Templates = {};
	override.Templates.Header = sitesProductSalesChart.CustomHeader;
    	override.Templates.Item = sitesProductSalesChart.CustomItem;
    	override.Templates.Footer = sitesProductSalesChart.CustomFooter;
 
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(override);
};
 
// Header, add the canvas for the chart and the placeholder for the description.
sitesProductSalesChart.CustomHeader = function (ctx) {
	return '<canvas id="pieChart" width="300" height="300" style="float:left;margin-right:20px;"></canvas><div id="pieDesc"></div>';
}
 
// Override item. Add all the values to the array to feed the pie chart.
sitesProductSalesChart.CustomItem = function (ctx) {
 
	var itemColor = sitesProductSalesChart.ColorsILike[sitesProductSalesChart.Items.length];
	sitesProductSalesChart.Items.push({
		value: parseInt(ctx.CurrentItem.Items),
		color: itemColor
	});
 
	// Add the label (title).
	sitesProductSalesChart.Desc += '<p><span style="color:' + itemColor + ';font-weight:bold;">' + ctx.CurrentItem.Title + ' (' +ctx.CurrentItem.Items + ')</span></p>';
 
	return '';
}
 
// Override the footer, generate the pie chart.
sitesProductSalesChart.CustomFooter = function () {
 
	var options = {
	};
 
	var pie = $("#pieChart").get(0).getContext("2d");
	new Chart(pie).Doughnut(sitesProductSalesChart.Items, options);
 
	// Add the description for all the values.	
	$('#pieDesc').html(sitesProductSalesChart.Desc);
 
	return '';
}
 
// Fire away! 
$(document).ready(sitesProductSalesChart.FieldRenderSetup());

SharePoint-2013-pie-chart-assets-t

Finally I add the list web part to my page. Edit the web part to add references to the three necessary files in the JSLink property. I need to reference all three files, using I pipe, or a vertical bar, to separate them.

~sitecollection/SiteAssets/jquery-1.7.2.min.js|~sitecollection/SiteAssets/chart.js|~sitecollection/SiteAssets/product_sales_chart.js

SharePoint-2013-line-chart-edit-wp

The result:

SharePoint-2013-pie-chart-result

Information Wants to be Visualized

JSLink in SharePoint 2013 fill a huge gap in the list concept by allowing us to customize the presentation in an (pretty) easy way. It even allow us to do it client side so we can work with the presentation in both on-premises and in the cloud.

I strongly recommend that you take a dive into the JSLink biosphere and explore all the potential using your creativity.