Visualising data in SharePoint Apps is really easy if you combine ShareCoffee and is a small JavaScript library which is responsible for rendering HTML5 charts in websites.

Creating a sample App

For this post, I’ve prepared a small SharePoint list containing EnergyDrinks and their amount of caffeine. :) In order to read the data from SharePoint, you need to include and reference ShareCoffee. Using Visual Studio’s Package Manager Console you can install ShareCoffee using Install-Package ShareCoffee Including is also really easy, just grab the chartjs file from github or the project site ###

Creating the Markup

ChartJS requires only a canvas control for creating charts like the following

Creating the Chart

If you’re not aware of ShareCoffee’s API check out the wiki on github. I’ve included some comments into the JavaScript code to explain what’s going on.

In this sample, I’ve used the Bar-Chart layout from ChartJS.

See the documentation which is explaining all different chart types. When executing the sample app you’ll receive the following result.