My Sharepoint development success – and the LOB’s needs/wants – would be greatly increased if I could provide dynamic, real-time charting capabilities, linked to lists. For example, a bar chart that would track the number of "in progress", "N/A" and "completed" from the “Review Status” column. It would be inserted as a webpart on the same page as the list.

The corp. Sharepoint environment I work in is pretty much out of the box. I have access to Sharepoint Designer, but can not add any 3rd-party tools.

I am curious t know if JS could work, I know very little about JS so would need guidnace/examples.


  • 1
    Yes, there are various javascript based charting tools available if you don't have the chart web parts at your disposal. You can leverage the web services to fetch the data and feed that into a chart tool. Commented Jun 27, 2014 at 14:30

2 Answers 2


Javascript can work to accomplish what you're describing, but depending on how robust you need the charting system to be it could become a very serious undertaking (a few months worth of full time work). If you just need something limited to the description in your question (a bar chat that tracks the status of items in a list) you could probably implement that in a few days...

Here is a a basic example of a status bar that imitates the steps you would need to take to design charting capabilities using client side JS -- it uses jQuery UI though for progress bar so you would need to customize something to imitate it but adjust height instead of width properties if you wanted a vertical bar graph ... plug this in to a content editor on a page in the same site as your list you want to check the statuses in

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/smoothness/jquery-ui.css" />  
'use strict';

SP.SOD.executeOrDelayUntilScriptLoaded(getStatus, "sp.js");

function getStatus() {
    // YOUR environmental variables -- internal names required
    var statusListName = "StatusTracker";
    var statusFieldName = "Review_x0020_Status";

    // Code that fetches the info from the SharePoint list, then fills our meter
    var ctx = SP.ClientContext.get_current();
    var statusList = ctx.get_web().get_lists().getByTitle(statusListName);
    var listItems = statusList.getItems(new SP.CamlQuery.createAllItemsQuery());
    function() {
        /* Use an object container to track the stats while you iterate through each item in the list
           add all the different item statuses you would like to count -- this example will only show total and complete */
        var listStats = {
        // loop through the list items and count the status you want
        var itemEnum = listItems.getEnumerator();
        var itemStatus;
        while (itemEnum.moveNext()) {
            itemStatus = itemEnum.get_current().get_item(statusFieldName);
            listStats.total += 1;
            if (itemStatus == "complete") listStats.complete += 1
        /* The rest of this function uses your listStats object and some jQuery
        ui to display a progress bar,  */
        var percent = listStats.complete / listStats.total * 100;
        $("#meterDesc").html("<h3>" + listStats.complete + " / " + listStats.total + " items complete</h3>");
        $("#statMeter").progressbar({value: percent});
    }, function() {
        alert("Something went wrong while attempting to load a meter... :(");

<div id="meterBox" style="display:none">
    <H3>My List Stats</H3>
    <div id="statMeter"></div>
    <p id="meterDesc"></p>

If you're using SharePoint 2013 and have office 2013, you can use Excel Services to do most of the work for you -- because while Excel Services doesn't allow external connection to SharePoint lists (which is slightly mind boggling) it does allow you to connect to OData Data Feeds (which SharePoint provides as a REST Service) which then lets you create charts and graphs that you can refresh the underlying data for, and display directly on your pages in web parts.


The corp. Sharepoint environment I work in is pretty much out of the box. I have access to Sharepoint Designer, but can not add any 3rd-party tools.

just wanted to add that for anyone else reading this, 3rd party charting tools like Collabion and Nevron make it really easy to do this. they have an auto-refresh feature that updates the chart every x seconds (which you can define). it's very simple to setup, but of course, it's 3rd party.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.