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