Building graphs in SharePoint 2013 using JSOM

There was once a beloved web part called “Chart web part” in SharePoint 2010, and boy was that nice to have. However, SharePoint 2013 and SharePoint Online no longer have this capability, so we have to build the web part from scratch—which is much easier to do than it sounds.

In this article, I have a document library with a workflow behind it. This workflow goes through an approval process with several stages before its completion, and at the end of the workflow the document is either approved or rejected. I’m going to use a pie chart to display to the user how many documents are at each of the specified stages. This is good information for business decisions to quickly know the status of the overall process—and hey, it looks neat.

First, I am going to be using the root site, so the URLs may be different in code. I am also referencing a column called “Status” on the “Documents” library. You may need to add that column, or even the library. It’s a choice column consisting of three values, “In Progress”, “Rejected”, and “Approved.”

Once you have the library and column that we will be using, the next step is to figure out which charting plugin you want to utilize. There are many 3rd party charting libraries for charts and graphs. You can use whichever you choose, but for this article I’m going to use jqplot, a free charting plugin using jQuery, because I’m using SharePoint 2013. I suggest you use Google Charting API for SharePoint Online, because json is blocked by SharePoint Online, and there is no way around it. If you are going to use jqplot, click here to download the latest package. Using SharePoint Designer 2013, create a new folder in the “Style library” called “jqplot.” Now you should have a “jqplot” in the Style Library. 

Extract the contents first on your local hard drive, then drag and drop everything inside the folder. (JSON may also be a blocked file type, you can turn that off by going to Central Administration -> highlight the web application -> blocked file types -> remove json)

Then create a folder in Style Library called “SPGraphs” or something similar. Inside right-click and select New -> ASPX and name it “SPGraph.aspx”. Open it in advanced mode and add the following right before the closing </head> tag.

<SharePoint:ScriptLink language="javascript" name="sp.js" OnDemand="true" runat="server" Localizable="false" />

<SharePoint:FormDigest runat="server"/>

<script

 type="text/javascript"

 src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js">

</script>

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="_layouts/15/sp.js"></script>

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->

<script type="text/javascript" src="../jqplot/jquery.min.js"></script>

<script type="text/javascript" src="../jqplot/jquery.jqplot.min.js"></script>

<script type="text/javascript" src="../jqplot/plugins/jqplot.pieRenderer.js"></script>

<link rel="stylesheet" type="text/css" href="../jqplot/jquery.jqplot.css" />

<script type="text/javascript" src="../SPGraphs/SPGraph.js"></script>

Then right before the closing </body> tag add the following:

<code>&lt;div id="graphdiv"&gt;&lt;/div&gt;</code>

Now we have a scaffold for the graph to load. Save SPGraph.aspx and then go back to your “Style Library/SPGraphs” folder. Go to the “File” in the ribbon and select “JavaScript”. Rename the .js file to “SPGraph.js”. This will be the file that will grab the data and load it into the SPGraph.aspx page. Your folder should look similar to this:

Open SPGraph.js. Add the following code in order to pull from the “Documents” library.

In this code block, we are retrieving the SPClientContext, which has functions for retrieving SharePoint objects and content. Then we are grabbing the list/library that we want data from, creating a “catch all” items query, then loading it to be executed by the client context. Whenever it finishes, it will load the “onQuerySucceeded” function, which we will write next.

In this code block we will write the function that loads after the client context retrieves all the list items we specify. We have to create our supporting variables first, then use a while loop to traverse over each list item (line 21). For each list item we are grabbing the current item in the enumerator, getting the column “Status” for that item, and incrementing a variable value for each type of status. On line 34, we are specifying the data using the [“Label”, countvariable] type of object. On line 39, we are building the chart. Jqplot uses the following method arguments for loading a piegraph:

<code>$.jqplot(“divToAppendTo”, [graphobjects], {graphoptions});</code>

We are adding the chart to the “graphdiv” object we created earlier in the body of SPGraph.aspx, then we specify the data, then the graph options. You can view a list of possible options for jqplot pie graphs here.

The last line is to execute the retrieveListItems function after the sp.js has loaded. This is due to the fact that we need sp.js and all the supporting libraries to load first in order to use the client context and its helper methods. Now we should have a working SPGraph.aspx. You should be able to browse to it successfully and see a nice graph.

Now we need to have this loaded inside a web part on the front page. Go to the front page and go to the “Gear” -> Edit page

Go to Insert -> Media and Content -> Script web part and click OK.

Then click the dropdown on the web part and go to Edit Web Part.

Click on Edit Snippet

Paste in the following HTML snippet to load the graph onto the page.

<object data="/Style%20Library/SPGraphs/SPGraph.aspx" width="600" height="400">

    <embed src="/Style%20Library/SPGraphs/SPGraph.aspx" width="600" height="400"> </embed>

    Error: Embedded data could not be displayed.

</object>

Click Insert and save the page. You now have a working graph on your page to give some quick insight to users. Looks clean, and it is highly customizable. 

Looking to further expand your knowledge on Sharepoint? Check out this blog on expediting ROI.

Information and material in our blog posts are provided "as is" with no warranties either expressed or implied. Each post is an individual expression of our Sparkies. Should you identify any such content that is harmful, malicious, sensitive or unnecessary, please contact  marketing@sparkhound.com