Display Charts using Chart.js in SharePoint Online Office 365

This SharePoint tutorial, we will discuss, how to display charts from the SharePoint list in SharePoint Online using Chart.js.

Display Charts using Chart.js in SharePoint

Here I have a SharePoint list that has data like below. It has two columns known as Title and Count.

Display Charts using Chart.js in SharePoint

Here we will use Chart.js to display charts in SharePoint Online Office 365.

To use Chart.js we can give the path from the CDN from this link.

Or you can download the Chart.js from this URL and can upload it to any path link Site Assets library in SharePoint Online.

For this particular example, I have used a script editor web part to put the code inside a web part page.

Open the web part page, then edit the page and click on Add a web part and select a script editor web part from Media and Content. If you are a fan of the content editor web part, you can also use the content editor web part to put the below code into the page.

<canvas id="myChart" width="300" height="250"></canvas>

<script type="text/javascript">

var collListItem; //ListItems
var chartX = []; //X-Axis Labels
var chartY = []; //Y-Axis Values

var chartJs = "/SiteAssets/chart.js";
var listName = "MyChartList"; //Data List Name
var xAxisName = "Title"; //X-Axis Label Names from List
var yAxisName = "Count"; //Y-Axis Values from List
var chartId = "myChart"; //Chart Canvas Div

SP.SOD.executeOrDelayUntilScriptLoaded(function () {

var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle(listName);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(function () {

var listItemEnumerator = collListItem.getEnumerator();

//Create Points from ListData
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
chartX.push(oListItem.get_item(xAxisName));
chartY.push(oListItem.get_item(yAxisName));
}

//Load Chart JS
loadJS(chartJs, function () {

//Generate Data
var data = {
labels: this.chartX,
datasets: [
{
data: this.chartY
}
]
};

//Display Chart
var ctx = document.getElementById(chartId).getContext("2d");
var myNewChart = new Chart(document.getElementById(chartId).getContext('2d') , {
type: "line",
data: data,
});
});

}, null);

}, 'SP.js');

function loadJS(src, callback) {
var s = document.createElement('script');
s.src = src;
s.async = true;
s.onreadystatechange = s.onload = function () {
var state = s.readyState;
if (!callback.done && (!state || /loaded|complete/.test(state))) {
callback.done = true;
callback();
}
};
document.getElementsByTagName('head')[0].appendChild(s);
}
</script>
Display Charts using Chart.js in SharePoint Online

If you will follow the exact code, then you might see the below error in the below line:

var myNewChart = new Chart(ctx).Bar(data);

The error will come as like below if you will see any developer tool:

Uncaught TypeError: (intermediate value). Bar is not a function
at DemoChart.aspx:589
at HTMLScriptElement.s.onreadystatechange.s.onload as onreadystatechange

I have modified the above line with the below line:

var myNewChart = new Chart(document.getElementById(chartId).getContext('2d') , {
type: "line",
data: data,
});

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned how to display charts using Chart.js in SharePoint Online Office 365.

free sharepoint training

SharePoint Online FREE Training

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

envelope
envelope

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

  • […] Display Charts using Chart Js in SharePoint Online Office 365 […]

  • >