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

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.

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.

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

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.

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.

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.

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.

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.

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.

You may be able to place the chart on another site within the same site collection but I have never tried. Add the list web part on the page of the site where your list(s) are located and customize it the way you want. Then export the web part and import it on the site you would like to display the graph on. I’m not sure it will work but it will hopefully work if the web and list references are intact in the exported/imported file.