Visualizing data in SharePoint Apps is easy if you combine ShareCoffee and ChartJS.org. ChartJS.org 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. 🙂 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 ChartJS.org is also really easy, grab the Chart.js file from GitHub or the project site chartjs.org.

Creating the Markup

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

<canvas id="energy-drink-chart" width="900" height="380">
</canvas>

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.

// the next line of code brings somple IntelliSense within VS
/// <reference path="ShareCoffee/ShareCoffee.js"/>
$(document).ready(function () {
  
  var onLoaded = function (data) {
    var ctx = document.getElementById("myChart").getContext("2d");
    var chartData = {
      labels: [],
      datasets: [{
        fillColor: "#3399cc",
        data: []
      }]
    };
  
    // convert SharePoint's data into required data structure
    for (var i = 0; i < data.d.results.length; i++) {
      chartData.labels.push(data.d.results[i].Title);
      chartData.datasets[0].data.push(data.d.results[i].Caffeine);
    }
    // create a new Chart from type BarChart and associate the data
    var chart = new Chart(ctx).Bar(chartData);
  };
  
  // simple error handler
  var onError = function (error) {
    console.log(error);
  }

  // grab the data from SharePoint using ShareCoffee
  $.ajax(ShareCoffee.REST.build.read.for.jQuery({
    url: "/web/lists/GetByTitle('Energy Drinks')/items?$select=Title,Caffeine",
    hostWebUrl : ShareCoffee.Commons.getHostWebUrl()
  }))
  .done(onLoaded)
  .fail(onError);
});

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.

Chart.JS with data pulled from SharePoint

As you can see it’s not complicated to query data from SharePoint using ShareCoffee and display it in a user-friendly way using Chart.js.