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 that we can use to build 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 website.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your website or web application.

Highcharts currently support 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 organizations mostly used high chart and Pie chart to make a dashboard page. Here I will show you step by step to create 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 the below column as per the screenshot.

Step 2: Now you can refer to 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 the following SharePoint tutorials:

• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• 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
• How to Change Layout of a Page in SharePoint 2013
• Download SharePoint Manager
• The workbook cannot be opened error in SharePoint 2013

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