SharePoint

Highcharts Using SharePoint Online Custom Lists

In this blog you will learn about building HighCharts using SharePoint online lists using JavaScript REST API dynamically in 3 simple steps.
 
Happy Coding!! 
 
Prerequisites
  1. SharePoint List
  2. Get the code files from my GitHub
Step 1 - Get SharePoint list items using REST API GET Method
  1. function getItems() {  
  2.    $.ajax({  
  3.       url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('LeaveTracker')/items?$top=500&$select=Status",  
  4.       type: "GET",  
  5.       headers: {  
  6.          accept: "application/json;odata=verbose",  
  7.       },  
  8.       success: function (data) {  
  9.          var items = data.d.results;  
  10.          for (var i = 0; i < items.length; i++) {  
  11.             var statusVar = items[i].Status;  
  12.             statusArray.push(statusVar);  
  13.          }  
  14.          fnDataArray();//Get Unique Status Count & Dataset for HighChart  
  15.          buildhighcharts();// Build Bar Chart  
  16.       },  
  17.       error: function (error) {  
  18.          console.log(error);  
  19.       },  
  20.    });  
  21. }   
Step 2 - Create Dataset for Highchart
  1. function fnDataArray() {  
  2.    var StatusObj = statusArray.reduce(function (count, status) {  
  3.       if (typeof count[status] == "undefined") {  
  4.          count[status] = 1;  
  5.       } else {  
  6.          count[status] += 1;  
  7.       }  
  8.       return count;  
  9.    }, {});  
  10.    console.log(StatusObj);  
  11.    //Object Output -> {Open: 1, InProgress: 2, Completed: 1}  
  12.    //Get the values from our object  
  13.    var DataName = Object.keys(StatusObj);  
  14.    var DataCount = Object.values(StatusObj);  
  15.    ObjProperty = Object.getOwnPropertyNames(StatusObj);  
  16.    for (var i = 0; i < ObjProperty.length; i++) {  
  17.       DataSet.push({  
  18.          name: DataName[i],  
  19.          data: [DataCount[i]],  
  20.       });  
  21.    }  
  22. }  
Step 3 - Build HighChart Bar Chart
  1. function buildhighcharts() {  
  2.    if (ObjProperty.length > 0) {  
  3.       $("#BarChart").highcharts({  
  4.          credits: {  
  5.             enabled: false,  
  6.          },  
  7.          chart: {  
  8.             type: "column",  
  9.          },  
  10.          title: {  
  11.             text: null,  
  12.          },  
  13.          xAxis: {  
  14.             visible: false,  
  15.          },  
  16.          yAxis: {  
  17.             min: 0,  
  18.             title: {  
  19.                text: "No. of Requests",  
  20.             },  
  21.          },  
  22.          tooltip: {  
  23.             formatter: function () {  
  24.                return this.series.name + " : " + this.y;  
  25.             },  
  26.          },  
  27.          plotOptions: {  
  28.             column: {},  
  29.          },  
  30.          series: DataSet, //Data for chart
  31.       });  
  32.    } else {  
  33.       $("#BarChart").highcharts({  
  34.          title: {  
  35.             text: "No data to display!",  
  36.          },  
  37.       });  
  38.    }  
  39. }  
Refer to this URL for more info for bar charts,
  • https://www.highcharts.com/demo/bar-basic
  • https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic
Screenshot
 
Highcharts Using SharePoint Online custom Lists
 
Highcharts Using SharePoint Online custom Lists
 
Hope you guys find this blog useful!!
 
Happy Learning!! 
Ebook Download
View all
Learn
View all
HexaCorp
Expertise in the cloud, speed of innovation and customer focus on building strong relationships
Membership not found