Open SharePoint site
Create a simple custom list named Products.
Create some custom columns in it.
Column Name | Type |
Title (By default) | Single line of text |
Product | Single line of text |
Year | Number |
Sale Percentage | Number |
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
- <script src="…/…../SiteAssets/chart.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- SP.SOD.executeOrDelayUntilScriptLoaded(pie, 'sp.js');
-
-
-
-
- var collListItem;
- var chartX = [];
- var chartY = [];
-
-
-
- function pie() {
-
-
- var clientContext = new SP.ClientContext('/sites/dev/');
- var oList = clientContext.get_web().get_lists().getByTitle('Product');
-
- var camlQuery = new SP.CamlQuery();
- camlQuery.set_viewXml('<View></View>');
- this.collListItem = oList.getItems(camlQuery);
-
- clientContext.load(collListItem);
-
- clientContext.executeQueryAsync(
- Function.createDelegate(this, this.onQuerySucceeded),
- Function.createDelegate(this, this.onQueryFailed)
- );
- }
- function onQuerySucceeded()
- {
-
- console.log("pie success");
-
- var listItemEnumerator = collListItem.getEnumerator();
-
-
- while (listItemEnumerator.moveNext()) {
- var oListItem = listItemEnumerator.get_current();
- chartX.push(oListItem.get_item('Year'));
- chartY.push(oListItem.get_item('Sales'));
- }
-
-
-
-
-
-
- var Piedata = {
- labels: this.chartX,
-
- datasets: [
- {
- percentageInnerCutout : 100,
- data: this.chartY,
- backgroundColor: [
- "#BAA378",
- "#C0A172",
- "#BAA378",
- "#382E1C",
- "#453823",
- "#2C2416",
- "#CC9900",
- "#663300",
- "#B67721",
- "#7F5417"
- ],
- borderWidth: 0,
- hoverBackgroundColor: [
- "#DAD9D5",
- "#E0E0E0",
- "#C8C0B5",
- "#998763"
- ]
- }
- ]
- };
-
-
-
-
- var ctxpie = document.getElementById('pie');
-
-
- var myNewpie = new Chart(ctxpie, { type: 'pie', data: Piedata, options: { legend: { display: false }} });
-
-
- }
-
- function onQueryFailed()
- {
- console.log("error");
-
-
- alert('Request failed. ' + args.get_message() +
- '\n' + args.get_stackTrace());
- }
-
-
-
- </script>
- <b></b>
- <h3>Sharepoint server 2013 Sales report by year basis</h3>
- </b>
- <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.