Create a chart using chart.js In sharepoint server 2013


In this post, we will discuss how to create a custom chart in SharePoint server 2013.

Open the SharePoint site. Create simple custom list named “Products”. Create some custom columns into it.

Column Name Type
Title (By default) Single line of text
Product Single line of text
Year Number
Sale Percentage Number

Now the created list looks like the below screen.

 Create a chart using chart.js In sharepoint server 2013

Create a chart using chart.js In sharepoint server 2013

Download Chart.min.js. And upload it into the Site Assets library



chart.js in sharepoint 2013
chart.js in sharepoint 2013

Now open sharepoint designer create a simple HTML file and add some JSOM work to get the results and display the html file using CEWP(Content Editor Web Part).

SharePoint 2013 using chart web part chart.js
SharePoint 2013 using chart web part chart.js

CODE:



<script src=”…/…../SiteAssets/chart.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

SP.SOD.executeOrDelayUntilScriptLoaded(pie, ‘sp.js’);

/*Pie*/

var collListItem; //ListItems

var chartX = []; //X-Axis Labels

var chartY = []; //Y-Axis Values

/*Pie*/

function pie() {

var clientContext = new SP.ClientContext(‘/sites/dev/’);

var oList = clientContext.get_web().get_lists().getByTitle(‘Product’);

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(‘<View></View>’);

this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded() {

console.log(“pie success”);

var listItemEnumerator = collListItem.getEnumerator();

//Create Points from ListData

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();

chartX.push(oListItem.get_item(‘Year’));

chartY.push(oListItem.get_item(‘Sales’));

}

//Load Chart JS

//Generate Data

var Piedata = {

labels: this.chartX,

datasets: [

{

percentageInnerCutout: 100,

data: this.chartY,

backgroundColor: [

“#BAA378”,

“#C0A172”,

“#BAA378”,

“#382E1C”,

“#453823”,

“#2C2416”,

“#CC9900”,

“#663300”,

“#B67721”,

“#7F5417”

],

borderWidth: 0,

hoverBackgroundColor: [

“#DAD9D5”,

“#E0E0E0”,

“#C8C0B5”,

“#998763”

]

}

]

};

//Display Chart

var ctxpie = document.getElementById(‘pie’);

var myNewpie = new Chart(ctxpie, { type: ‘pie’, data: Piedata, options: { legend: { display: false } } });

}

function onQueryFailed() {

console.log(“error”);

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

<b></b>

<h3>Sharepoint server 2013 Sales report by year basis</h3>

</b>

<canvas id=”pie” width=”100″ height=”30″></canvas>

Note: you can also create doughnut and bar charts by changing the type: pie
Here is the Final result

SharePoint 2013 create chart using chart js 1
SharePoint 2013 create chart using chart js 1

Read some Microsoft Azure tutorials


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials: