Get SharePoint Online (Office 365 Enterprise E3) Subscription for your Business NOW

Create Highcharts in SharePoint using Rest API

Create Highcharts in SharePoint

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.

SharePoint 2016 Tutorial Contents


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.

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.

Create Highcharts in SharePoint
Create Highcharts in SharePoint

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 "Compleetd":
				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.

google pie chart sharepoint Online
Script Editor Web part in SharePoint online

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).

Create Highcharts in SharePoint
Script Editor Web part SharePoint online

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

Create Highcharts in SharePoint using Rest API
Script Editor Web parts SharePoint online

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.

Create Highcharts in SharePoint using Rest API
Create Highcharts in SharePoint using Rest API

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:

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

Check out Best Alternative to InfoPath -> Try Now

EnjoySharePoint YouTube Channel

You May Also like the Following SharePoint Tutorials:

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →