Post
Ask Question

Create A Chart Using Chart.JS In SharePoint Server 2013

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');  
  4.      
  5.      
  6.      
  7.    /*Pie*/  
  8.           var collListItem; //ListItems  
  9.           var chartX = [];  //X-Axis Labels  
  10.           var chartY = [];  //Y-Axis Values  
  11.      
  12.           
  13.         /*Pie*/   
  14.           function pie() {  
  15.        
  16.      
  17.              var clientContext = new SP.ClientContext('/sites/dev/');  
  18.                        var oList = clientContext.get_web().get_lists().getByTitle('Product');  
  19.      
  20.               var camlQuery = new SP.CamlQuery();  
  21.               camlQuery.set_viewXml('<View></View>');  
  22.               this.collListItem = oList.getItems(camlQuery);  
  23.      
  24.               clientContext.load(collListItem);  
  25.      
  26.               clientContext.executeQueryAsync(  
  27.           Function.createDelegate(this, this.onQuerySucceeded),   
  28.           Function.createDelegate(this, this.onQueryFailed)  
  29.       );     
  30.     }     
  31.               function onQuerySucceeded()   
  32.               {  
  33.                 
  34.               console.log("pie success");  
  35.      
  36.                   var listItemEnumerator = collListItem.getEnumerator();  
  37.      
  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.                   }  
  44.      
  45.                    //Load Chart JS  
  46.             
  47.      
  48.      
  49.                   //Generate Data  
  50.                   var Piedata = {  
  51.                      labels: this.chartX,  
  52.                        
  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.                   };  
  79.                
  80.                        
  81.                      
  82.                       //Display Chart  
  83.                       var ctxpie = document.getElementById('pie');  
  84.                         
  85.                   
  86.                       var myNewpie = new Chart(ctxpie, { type: 'pie', data: Piedata, options: { legend: { display: false }} });  
  87.                    
  88.                   
  89.           }  
  90.      
  91.           function onQueryFailed()  
  92.           {  
  93.           console.log("error");  
  94.      
  95.      
  96.            alert('Request failed. ' + args.get_message() +   
  97.           '\n' + args.get_stackTrace());  
  98.           }  
  99.      
  100.             
  101.         
  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.