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.

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>

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:

• Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript
• Create Highcharts in SharePoint using Rest API
• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• Enable Chart Web Part in SharePoint 2013/2016/Online
• Create a chart using chart.js in SharePoint Server 2013/2016
• Working with Chart Web Part in SharePoint 2013/2010
• Chart web part in SharePoint 2013
• Create Custom Chart Web Part in SharePoint 2010
• Display SharePoint list data in jQuery data table using Rest API

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