Display Charts using Chart Js in SharePoint Online Office 365

Here we will discuss how we can show charts from the SharePoint list in SharePoint Online using Chart.js. Here I have a SharePoint list which has data like below. It has two columns known as Title and Count.

Here we will use Chart.js. This article is followed from Sean Cleaver blog and I have just modified few lines of code because it was not working in the js version which I was using.

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. You can check this article on how you can use script editor web part and also you can see how to create a web part page in this article.

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 content editor web part, you can also use 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>

If you will follow the exact code from Sean Cleaver article, 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] (DemoChart.aspx:604)

Solution:
I have modified the above line with the below line:

var myNewChart = new Chart(document.getElementById(chartId).getContext(‘2d’) , {
type: “line”,
data: data,
});

Hope this will be helpful.