Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting – HostForLIFE :: Highcharts Using SharePoint Online custom Lists
Hi there, in this blog you will learn about building HighCharts using SharePoint online lists using JavaScript REST API dynamically in 3 simple steps.
Step 1 – Get SharePoint list items using REST API GET Method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function getItems() { $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('LeaveTracker')/items?$top=500&$select=Status", type: "GET", headers: { accept: "application/json;odata=verbose", }, success: function (data) { var items = data.d.results; for (var i = 0; i < items.length; i++) { var statusVar = items[i].Status; statusArray.push(statusVar); } fnDataArray();//Get Unique Status Count & Dataset for HighChart buildhighcharts();// Build Bar Chart }, error: function (error) { console.log(error); }, }); } |
Step 2 – Create Dataset for Highchart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function fnDataArray() { var StatusObj = statusArray.reduce(function (count, status) { if (typeof count[status] == "undefined") { count[status] = 1; } else { count[status] += 1; } return count; }, {}); console.log(StatusObj); //Object Output -> {Open: 1, InProgress: 2, Completed: 1} //Get the values from our object var DataName = Object.keys(StatusObj); var DataCount = Object.values(StatusObj); ObjProperty = Object.getOwnPropertyNames(StatusObj); for (var i = 0; i < ObjProperty.length; i++) { DataSet.push({ name: DataName[i], data: [DataCount[i]], }); } } |
Step 3 – Build HighChart Bar Chart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
function buildhighcharts() { if (ObjProperty.length > 0) { $("#BarChart").highcharts({ credits: { enabled: false, }, chart: { type: "column", }, title: { text: null, }, xAxis: { visible: false, }, yAxis: { min: 0, title: { text: "No. of Requests", }, }, tooltip: { formatter: function () { return this.series.name + " : " + this.y; }, }, plotOptions: { column: {}, }, series: DataSet, //Data for chart }); } else { $("#BarChart").highcharts({ title: { text: "No data to display!", }, }); } } |
Screenshot
| Print article | This entry was posted by Peter on April 22, 2021 at 2:51 am, and is filed under European SharePoint 2013 Hosting. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |
