Create Highcharts in SharePoint using Rest API

This SharePoint tutorial explains, how to create Highcharts in SharePoint using Rest API. We will see a demo to create a pie chart using Highcharts js libraries in SharePoint Online. We can also use Highcharts in SharePoint Online/2013/2016.

Introduction to Highcharts

Highcharts is a JavaScript library which we can use to build a beautiful, and high-quality web-based charting with minimal coding. Professional and attractive charts can be made using High charts for a web application or web site.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, area spline, column, bar, pie, scatter, angular gauges, area range, area spline range, column range, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Create Highcharts in SharePoint using Rest API

Many organization they mostly used high chart and Pie chart to make a dashboard page. Here I will show you step by step to create a Highcharts in SharePoint using Rest API.

Before we start, we have to add the jQuery reference file with Highcharts reference file in our SharePoint application.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

Step 1: Create a task list in SharePoint with below column as per the screenshot.

Step 2: Now you can refer this code to prepare Highcharts in SharePoint. Here simply I call list items using SharePoint REST API and bind all items with high chart control.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
var webURL="Site URL"
$(document).ready(function () {
GetProjectType();
});
   var CountCompleted=0;
   var CountNotStarted=0;
   var CountInProgress=0;
   var getData=[]; 

function GetProjectType() {
   
      var deffer = new $.Deferred();
        $.ajax({
           url: webURL + "/_api/web/lists/GetByTitle('List Name')/items?$select=Status",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" } 
			// return data format			 		
			
             }).done(function (getStatusType) {
			 
			 $.each(getStatusType.d.results, function(index, item) {
			 
			 switch(item.Status) {

				case "In Progress":
				CountInProgress++			   
				break;

				case "Not Started":
				CountNotStarted++				
				break;

				case "Completed":
				CountCompleted++			
				break;			
			}
			 });     
                  	callGraph();				 
                deffer.resolve();					 
                return deffer.promise();                  
            });              
        }	
	function callGraph()
	{
	     $('#myChartDiv').highcharts({
        chart: {
            type: 'pie'
        },        
        title: {
		  text: 'Project Status',
		  align: 'center'
		},
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        
        series: [{
        name: 'Project Type',
        colorByPoint: true,
        data: [{
            name: 'Completed',
            y: CountCompleted,
			url: '#'
           
        }, {
            name: 'In Progress',
            y: CountInProgress,
			url: '#'
        }, {
            name: 'Not Started',
            y: CountNotStarted,
			url: '#'
        }]
    }]
    });
	}	
	</script>
	
	<div class="chart"  id="myChartDiv" style="height: 400px; position: relative; cursor: pointer;" ></div>

Integrate Highcharts in SharePoint Online

Once we have the code ready, we can add the JavaScript code inside a content editor web part or a script editor web part in SharePoint Online or SharePoint 2013/2016.

Here we will add the code inside a Script editor web part in a web part page in SharePoint Online.

Step-1: Open your SharePoint web part page.

Step-2: Edit the web part page and add the ‘Script Editor’ to the page by following the below instructions (refer to the below screenshot).

Step-3: Click on the ‘Edit Web Part’ option as shown below.

Step-4: Copy and paste the code snippet in the ‘Web Part’ which I have written on top and click on the ‘Insert’ button and save the page.

Step-5: Once you click on OK, Highcharts will appear in the page as per below screenshot.

This is how the charts will appear in the SharePoint Online web part page which we created using Highcharts.

You may like following SharePoint tutorials:

• Display Charts using Chart Js in SharePoint Online Office 365
• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• Integration of Power BI with SharePoint Online
• Create a chart using chart.js In sharepoint server 2013
• Working with Chart Web Part in SharePoint 2013 or SharePoint 2010
• SharePoint Online Gantt Chart View for Task List
• Quick Chart Web Part in Modern SharePoint Online Site
• Add Calendar List in the Modern SharePoint Online Site Pages

Hope this SharePoint tutorial helps to learn how to create charts using Highcharts in SharePoint Online or SharePoint 2013/2016.