I created a SharePoint hosted app for managing HelpDesk tickets. The app contains a SharePoint list called ‘Tickets’ which holds relevant information for help desk personnel to resolve new work orders. For this post, let’s focus on a column in our Tickets list called ‘Status’, where the Status of a ticket can be Open, Pending and Closed. What we’d like to do is take all of the list items and using ChartJS show a nice visual representation for the number of tickets by Status.
We’ll start by downloading ChartJS and including the chart.min.js as a new file into our Visual Studio solution.
As mentioned before, ChartJS uses HTML Canvas to render our data. Canvas is supported in all modern browsers and polyfills support for IE7 and IE8. ChartJS only requires a Canvas element for visualizing our SharePoint data. Easy!
Getting the Data
Here is our REST call
The LoadChart function
In this sample, I’ve used the Doughnut layout from ChartJS. When executing this sample the result is a beautiful and elegant Chart that brings our boring old SharePoint list data to life!