Introduction

JQuery Chart is easy to implement as a SharePoint Add In, in this sample I have retrieved SharePoint list data and formed it as JSON data and then JSON data object is passed into JQuey chart as input parameter. we can implement various type of chart using JQuery chart for as example bar, circle, line, doughnut, etc,... Here I'm going to explain detail about this SharePoint Add-In implementation.

Description

To Modify and deploy this solution

Open visual studio 2015

On the file menu select Open -> Project (Ctrl + Shift + o)

In the Open Project window navigate the directory and select solution file (.sln)

Open solution explorer windows and select project solution and click (F4) to open project properties

Change the site URL property on the property window

Edit the code if required and click play button or (F5) in visual studio 

To add new resource file (.js or .css or Images) into project

Select a folder from solution explorer based on your file type (Images or Scripts or Content for CSS)

Right click and select “Open Folder in File Explorer” option

Now paste your files into the folder

Again in the solution explorer window at the top, click “Show All Files” icon

Now you can find the file without active icon, right click and select “Include in Project” Option

Solution compatibility

This sample is tested with SharePoint Online

This sample also compatible with SharePoint 2013 and SharePoint 2016

Code Flow

Fetching Host web URL and App web URL from query string

Host web content created using app web proxy

Retrieved list data from the host web

on the success event, list item collection converted as JSON data using JSON.parse

then the JSON data sent to chart js as parameter

JavaScriptHTML
Edit|Remove
//'use strict'; 
 
ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js"); 
 
function initializePage() { 
    var context = SP.ClientContext.get_current(); 
    var user = context.get_web().get_currentUser(); 
    var hostweburl; 
    var appweburl; 
    var appContextSite; 
    var list; 
    var listItems; 
    var web; 
 
 
    // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model 
    $(document).ready(function () { 
        getUrl(); 
    }); 
 
    // This function get the URL informations 
    function getUrl() { 
        hostweburl = getQueryStringParameter("SPHostUrl"); 
        appweburl = getQueryStringParameter("SPAppWebUrl"); 
        hostweburl = decodeURIComponent(hostweburl); 
        appweburl = decodeURIComponent(appweburl).toString().replace("#"""); 
        var scriptbase = hostweburl + "/_layouts/15/"; 
        $.getScript(scriptbase + "SP.RequestExecutor.js", execOperation); 
    } 
 
    // This function get list data from SharePoint 
    function execOperation() { 
        var factory = new SP.ProxyWebRequestExecutorFactory(appweburl); 
        context.set_webRequestExecutorFactory(factory); 
        appContextSite = new SP.AppContextSite(context, hostweburl); 
        web = appContextSite.get_web(); 
        context.load(web); 
        var camlQuery = new SP.CamlQuery(); 
        list = web.get_lists().getByTitle("Post Reach"); 
        listItems = list.getItems(camlQuery); 
        context.load(list); 
        context.load(listItems); 
        context.executeQueryAsync(onGetSPListSuccess, onGetSPListFail); 
    } 
 
 
    // This function is executed if the above call is successful 
    function onGetSPListSuccess() { 
        $("#DivSPGrid").empty(); 
        var chartlabel = ''; 
        var chartdata1 = ''; 
        var chartdata2 = ''; 
        var barChartData = ''; 
        var listEnumerator = listItems.getEnumerator(); 
        chartlabel = "{\"labels\":["; 
        chartdata1 = "],\"datasets\":[{" + 
                "\"fillColor\":\"rgba(220,220,220,0.5)\"," + 
        "\"strokeColor\":\"rgba(220,220,220,0.8)\"," + 
        "\"highlightFill\":\"rgba(220,220,220,0.75)\"," + 
        "\"highlightStroke\":\"rgba(220,220,220,1)\"," + 
        "\"data\":["; 
        chartdata2 = "]},{" + 
           "\"fillColor\":\"rgba(151,187,205,0.5)\"," + 
           "\"strokeColor\":\"rgba(151,187,205,0.8)\"," + 
           "\"highlightFill\":\"rgba(151,187,205,0.75)\"," + 
           "\"highlightStroke\":\"rgba(151,187,205,1)\"," + 
           "\"data\":["; 
        while (listEnumerator.moveNext()) { 
            var listItem = listEnumerator.get_current(); 
            chartlabel += "\"" + listItem.get_item("Title") + "\","; 
            chartdata1 += listItem.get_item("Facebook") + ","; 
            chartdata2 += listItem.get_item("Twitter") + ","; 
        } 
        chartlabel = chartlabel.replace(/,\s*$/""); 
        chartdata1 = chartdata1.replace(/,\s*$/""); 
        chartdata2 = chartdata2.replace(/,\s*$/""); 
        var str = chartlabel + chartdata1 + chartdata2 + ']}]}'; 
        barChartData = JSON.parse(str); 
        var ctx = document.getElementById("chartCanvas").getContext("2d"); 
        window.myBar = new Chart(ctx).Bar(barChartData, { responsive: true }); 
    } 
 
    // This function is executed if the above call fails 
    function onGetSPListFail(sender, args) { 
        alert('Failed to get list data. Error:' + args.get_message()); 
    } 
 
    //This function split the url and trim the App and Host web URLs 
    function getQueryStringParameter(paramToRetrieve) { 
        var params = 
        document.URL.split("?")[1].split("&"); 
        for (var i = 0; i < params.length; i = i + 1{ 
            var singleParam = params[i].split("="); 
            if (singleParam[0] == paramToRetrieve) 
                return singleParam[1]; 
        } 
    } 
} 

More Information

*****************************************************************************************************

Hope you find this sample helpful, check out my other samples too.

Give five stars if you wish to appreciate my work.

Facebook page URL: https://www.facebook.com/sptechnet2016/

Blog URL: https://sptechnet.wordpress.com/

*****************************************************************************************************