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!!