Open SharePoint site

Create a simple custom list named Products.

Create some custom columns in it.

Column NameType
Title (By default)Single line of text
ProductSingle line of text
YearNumber
Sale PercentageNumber

Now, the created list looks, as shown below.


Download Chart.min.js.

Upload it into the Site Assets library.


Now, open Sharepoint Designer. Create a simple HTML file and add some JSOM work to get the results and display HTML files, using CEWP(Content Editor Web Part).


Code

  1. <script src="…/…../SiteAssets/chart.min.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. SP.SOD.executeOrDelayUntilScriptLoaded(pie, 'sp.js');
  7. /*Pie*/
  8. var collListItem; //ListItems
  9. var chartX = []; //X-Axis Labels
  10. var chartY = []; //Y-Axis Values
  13. /*Pie*/
  14. function pie() {
  17. var clientContext = new SP.ClientContext('/sites/dev/');
  18. var oList = clientContext.get_web().get_lists().getByTitle('Product');
  20. var camlQuery = new SP.CamlQuery();
  21. camlQuery.set_viewXml('<View></View>');
  22. this.collListItem = oList.getItems(camlQuery);
  24. clientContext.load(collListItem);
  26. clientContext.executeQueryAsync(
  27. Function.createDelegate(this, this.onQuerySucceeded),
  28. Function.createDelegate(this, this.onQueryFailed)
  29. );
  30. }
  31. function onQuerySucceeded()
  32. {
  34. console.log("pie success");
  36. var listItemEnumerator = collListItem.getEnumerator();
  38. //Create Points from ListData
  39. while (listItemEnumerator.moveNext()) {
  40. var oListItem = listItemEnumerator.get_current();
  41. chartX.push(oListItem.get_item('Year'));
  42. chartY.push(oListItem.get_item('Sales'));
  43. }
  45. //Load Chart JS
  49. //Generate Data
  50. var Piedata = {
  51. labels: this.chartX,
  53. datasets: [
  54. {
  55. percentageInnerCutout : 100,
  56. data: this.chartY,
  57. backgroundColor: [
  58. "#BAA378",
  59. "#C0A172",
  60. "#BAA378",
  61. "#382E1C",
  62. "#453823",
  63. "#2C2416",
  64. "#CC9900",
  65. "#663300",
  66. "#B67721",
  67. "#7F5417"
  68. ],
  69. borderWidth: 0,
  70. hoverBackgroundColor: [
  71. "#DAD9D5",
  72. "#E0E0E0",
  73. "#C8C0B5",
  74. "#998763"
  75. ]
  76. }
  77. ]
  78. };
  82. //Display Chart
  83. var ctxpie = document.getElementById('pie');
  86. var myNewpie = new Chart(ctxpie, { type: 'pie', data: Piedata, options: { legend: { display: false }} });
  89. }
  91. function onQueryFailed()
  92. {
  93. console.log("error");
  96. alert('Request failed. ' + args.get_message() +
  97. '\n' + args.get_stackTrace());
  98. }
  102. </script>
  103. <b></b>
  104. <h3>Sharepoint server 2013 Sales report by year basis</h3>
  105. </b>
  106. <canvas id="pie" width="100" height="30"></canvas>

Note

You can also create Doughnut and Bar charts by changing the type: Pie.

Here, the final result is given below.