Create a chart using chart.js In sharepoint server 2013

InfoPath alternatives for form designing SharePoint

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

Also you can read:

– Bind SharePoint list data using jQuery datatable using content search web part CSWP in SharePoint server 2013

– User Profile service application in SharePoint 2013

– Document approval workflow in SharePoint 2013

Now the created list look 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

Hope this will be helpful.

Similar SharePoint 2013 Tutorials


Leave a Reply