How to create charts from SharePoint 2013 lists via SharePoint Apps

A colleague (Koen Zomers) pointed me towards a very interesting Javascript library called jchartfx to render client side charts.

The following SharePoint Hosted App allows you to add an App Part on any page and use another list within the same web to display the data in a graph.jchart_overview

jchart_properties

By simply changing the Chart Type in the App Part Properties you can change the rendering of the Graph.

jchart_overview.lines

Step 1: Create SharePoint Hosted App

I would strongly recommend following this excellent article on MSDN.

Step 2: Use the cross domain library to retrieve information from the host Web

In order to retrieve information from the host web we need to set the appmanifest permissions so that our app is allowed to read list items from the SharePoint web where we install our app.

Step 3: Provision the required jChartFX libraries

Koen pointed me to the Getting Started section of the JChartFX site and I used this demo to get started.

Step 4: Create App Part

Code examples

Hope it helps!

VN:F [1.9.22_1171]
Rating: 6.5/10 (12 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 6 votes)
How to create charts from SharePoint 2013 lists via SharePoint Apps, 6.5 out of 10 based on 12 ratings