In this article, we will see how we can represent SharePoint data in graphical form.

Let's start.

Create a custom SharePoint list 'TaskDetails' with the below details.
Column NameType
TitleSingle line
statusChoice
Add list items into 'TaskDetails'.
Then add the below HTML elements on the page.
  1. <div>
  2. <canvas id="AssetStatus" width="500" height="500"></canvas>
  3. </div>
  4. <div id="chartjs-legend" class="noselect" ></div>
Add reference for jQuery and ChartJS plugin.
  1. <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
  2. <script type="text/javascript" src="Chart.js"></script>
Code for getting SharePoint 'TaskDetails' list data using Rest API.
  1. $.ajax({
  2. url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",
  3. type: "Get",
  4. headers: {
  5. "accept": "application/json;odata=verbose",
  6. },
  7. success: function (data) {
  8. LoadChart(data);
  9. },
  10. error: function (err) {
  11. //show error
  12. }
  13. });
Convert data into chartJS dataset and load the chart.
  1. var LoadChart = function (data) {
  2. var items = [];
  3. var statuses = [];
  4. var chartData = [];
  5. var temp = "";
  7. //Loop through items to find unique statuses
  8. for (var i = 0; i < data.d.results.length; i++) {
  9. items.push(data.d.results[i]);
  10. if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {
  11. continue;
  12. }
  13. temp = data.d.results[i].status;
  14. statuses.push(temp);
  15. }
  17. function findStatus(arg) {
  18. return function (items) {
  19. return items.indexOf(arg) > -1;
  20. }
  21. }
  22. var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];
  23. for (var i = 0; i < statuses.length; i++) {
  24. var tempCount = items.filter(findStatusInData(statuses[i])).length;
  25. var object = {
  27. value: tempCount,
  28. color: clrs[i],
  29. label: statuses[i]
  30. }
  31. chartData.push(object);
  32. }
  34. function findStatusInData(arg) {
  35. return function (items) {
  36. return items.status.indexOf(arg) > -1;
  37. }
  38. }
  40. var ctx = document.getElementById('AssetStatus').getContext("2d");
  41. var chart = new Chart(ctx).Doughnut(chartData, {});
  43. document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();
  45. }
The Output will be as below.

Output

The integrated code will be as below.
  1. <!DOCTYPE html>
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
  6. <script type="text/javascript" src="Chart.js"></script>
  7. <script type="text/javascript" >
  9. $.ajax({
  10. url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",
  11. type: "Get",
  12. headers: {
  13. "accept": "application/json;odata=verbose",
  14. },
  15. success: function (data) {
  16. LoadChart(data);
  17. },
  18. error: function (err) {
  19. //show error
  20. }
  21. });
  23. var LoadChart = function (data) {
  24. var items = [];
  25. var statuses = [];
  26. var chartData = [];
  27. var temp = "";
  29. //Loop through items to find unique statuses
  30. for (var i = 0; i < data.d.results.length; i++) {
  31. items.push(data.d.results[i]);
  32. if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {
  33. continue;
  34. }
  35. temp = data.d.results[i].status;
  36. statuses.push(temp);
  37. }
  39. function findStatus(arg) {
  40. return function (items) {
  41. return items.indexOf(arg) > -1;
  42. }
  43. }
  44. var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];
  45. for (var i = 0; i < statuses.length; i++) {
  46. var tempCount = items.filter(findStatusInData(statuses[i])).length;
  47. var object = {
  49. value: tempCount,
  50. color: clrs[i],
  51. label: statuses[i]
  52. }
  53. chartData.push(object);
  54. }
  56. function findStatusInData(arg) {
  57. return function (items) {
  58. return items.status.indexOf(arg) > -1;
  59. }
  60. }
  62. var ctx = document.getElementById('AssetStatus').getContext("2d");
  63. var chart = new Chart(ctx).Doughnut(chartData, {});
  65. document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();
  67. }
  69. </script>
  70. <style type="text/css">
  71. ol,
  72. ul {
  73. list-style: none;
  74. margin: 0;
  75. padding: 0;
  76. text-align: center;
  77. }
  79. li {
  80. display: inline-table;
  81. }
  82. .noselect {
  83. -webkit-touch-callout: none;
  84. -webkit-user-select: none;
  85. -khtml-user-select: none;
  86. -moz-user-select: none;
  87. -ms-user-select: none;
  88. user-select: none;
  89. }
  90. #chartjs-legend {
  91. position: absolute;
  92. width: 100%;
  93. bottom: 10%;
  94. }
  96. #chartjs-legend li {
  97. cursor: pointer;
  98. margin: 10px 4px;
  99. }
  101. #chartjs-legend li span {
  102. position: relative;
  103. padding: 6px 20px;
  104. border-radius: 13px;
  105. color: white;
  106. z-index: 2;
  107. }
  108. </style>
  109. <meta charset="utf-8" />
  110. <title></title>
  111. </head>
  112. <body>
  113. <div>
  114. <canvas id="AssetStatus" width="500" height="500"></canvas>
  115. </div>
  116. <div id="chartjs-legend" class="noselect" ></div>
  117. </body>
  118. </html>
Refer to the attached resources for more.