Kwizcom Forms

Create a chart using chart.js in SharePoint Server 2013/2016

SharePoint 2013 create chart using chart js 1

This SharePoint 2013 tutorial, we will discuss how to create a custom chart in SharePoint server 2013.

We can use Chart.js to create various attractive charts using JavaScript in SharePoint Online or SharePoint 2013/2016.

SharePoint deveopment training course

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

  • Title (By default): Single line of text
  • Product: Single line of text
  • Year: Number
  • Sale Percentage: Number

Create a chart using chart.js in SharePoint Server 2013/2016

Now the created SharePoint list looks like the below screen.

Download Chart.min.js. And upload it into the Site Assets library in SharePoint 2013/2016.

Now open SharePoint designer 2013 and 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).

Create a chart using chart.js In sharepoint 2013
<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:

Create a chart using chart.js in SharePoint

You may like following SharePoint chart tutorials:

Hope this SharePoint tutorial helps to create a chart using chart.js in SharePoint Server 2013/2016.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope