A blog about Salesforce CRM Configuration and development

Friday, 11 January 2019

Make beautiful,dynamic report chart using Chart JS in Salesforce.

Make beautiful,dynamic report chart using Chart JS in Salesforce.
What is Chart JS? - It is an open source javascript library that can be used to draw different types of chart with the help of the HTML 5 canvas element. 

We can use this javascript library in the Visualforce page to draw the chart on the page. We have to include the script in the <head> tag.


Visualforce Page:
 <apex:page sidebar="false" showHeader="false" controller="ChartCntrl">  
   <html>  
     <head>  
       <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />  
       <apex:slds />  
       <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"/>  
       <style>  
         .chart1{ width:450px; height:300px; border:1px solid rgb(216, 221, 230); border-radius:5px; }  
         .chart2{position:absolute; width:470px; height:500px; border:1px solid rgb(216, 221, 230); border-radius:5px; }  
       </style>  
     </head>  
     <body>  
       <div class="slds">  
         <div class="slds-page-header"><div class="slds-text-heading--large">Reporting Chart</div></div>  
         <div class="slds-grid">  
           <div class="slds-col slds-size--6-of-12" style="border:1px solid rgb(216, 221, 230); border-radius:5px; ">  
             <canvas id="myChart" width="300" height="300"></canvas>  
           </div>  
           <div class="slds-col slds-size--6-of-12" style="border:1px solid rgb(216, 221, 230); border-radius:5px; ">  
             <canvas id="myChart1" width="300" height="300"></canvas>  
           </div>  
         </div>  
         <script>  
         var ctx = document.getElementById("myChart");  
         var array1=new Array();  
         var array2=new Array();  
         var LeadLabel=new Array();  
         var LeadData=new Array();  
         var AccountLabel=new Array();  
         var AccountData=new Array();  
         <apex:repeat value="{!Lead_Label}" var="ld">  
           LeadLabel.push("{!ld}");  
         </apex:repeat>  
         <apex:repeat value="{!Lead_Data}" var="dt">  
           LeadData.push("{!dt}");  
         </apex:repeat>  
         //('lead '+LeadData);  
         <apex:repeat value="{!Account_Label}" var="al">  
           AccountLabel.push("{!al}");  
         </apex:repeat>  
         <apex:repeat value="{!Account_Data}" var="ad">  
           AccountData.push("{!ad}");  
         </apex:repeat>  
         <apex:repeat value="{!data}" var="d">  
           array1.push("{!d}");  
         </apex:repeat>  
         <apex:repeat value="{!label}" var="l">  
           array2.push("{!l}");  
         </apex:repeat>  
         var background_color=new Array();  
         var border_color=new Array();  
         for(var i=0 ; i<array1.length ; i++)  // Random colors
         {  
           var w,x,y,z;  
           w = parseInt(Math.random()*255);  
           x = parseInt(Math.random()*255);  
           y = parseInt(Math.random()*255);  
           z = Math.random();  
           background_color.push('rgba('+w+','+x+','+y+','+z+')');  
           border_color.push('rgba(0,0,0,1)');  
         }  
         var myChart = new Chart(ctx, {  
           type: 'pie',  
           data: {  
             labels: array2,  
             datasets: [{  
               label: '# of Votes',  
               data: array1,  
               backgroundColor: background_color,  
               borderColor: border_color,  
               borderWidth: 1  
             }]  
           }  
         });  
         </script>  
         <!--2nd Canvas--------------------->  
         <script>  
         var ctx = document.getElementById("myChart1");  
         var myChart = new Chart(ctx, {  
           type: 'bar',  
           data: {  
             labels: AccountLabel,  
             datasets: [{  
               label: '# of Account',  
               data: AccountData,  
               backgroundColor: background_color,  
               borderColor: border_color,  
               borderWidth: 1  
             }]  
           },  
           options: {  
             scales: {  
               yAxes: [{  
                 ticks: {  
                   beginAtZero:true  
                 }  
               }]  
             }  
           }  
         });  
         </script>  
       </div>  
     </body>  
   </html>  
 </apex:page>  
The HTML 5 <canvas> tag is used to drag graphis/chats on the web page.
 <canvas id="myChart" width="300" height="300"></canvas>  
Below script will draw the chart on the canvas and here SFDC data fetched from Apex controller and passed as an array in the script below.
 var ctx = document.getElementById("myChart"); // canvas element  
         var myChart = new Chart(ctx, {  
           type: 'pie', //chart type  
           data: {  
             labels: array2, // label from array2  
             datasets: [{  
               label: '# of Votes',  
               data: array1, // data from array2  
               backgroundColor: background_color, // background color  
               borderColor: border_color, // border color  
               borderWidth: 1 // border width  
             }]  
           }  
         });  
Apex Controller:
 public with sharing class ChartCntrl {  
   public list<string> label{get;set;}  
   public list<integer> data{get;set;}  
   public list<string> Lead_Label{get;set;}  
   public list<Integer> Lead_Data{get;set;}  
   public list<string> Account_Label{get;set;}  
   public list<Integer> Account_Data{get;set;}  
   public list<opportunity> oppList{get;set;}  
   public ChartCntrl (){  
     label=new list<string>();  
     data=new list<integer>();  
     Lead_Label=new List<string>();  
     Lead_Data=new List<integer>();  
     Account_Label=new List<string>();  
     Account_Data=new List<integer>();  
     generateData();  
     GenerateLeadData();  
     GenerateAccountData();  
   }  
    public void generateData(){  
   AggregateResult[] groupedResults = [SELECT StageName, Count(Id) cnt FROM Opportunity group by StageName];  
     for (AggregateResult ar : groupedResults)   
     {  
        label.add((string)ar.get('StageName'));  
        data.add((integer)ar.get('cnt'));  
     }  
   }  
   public void GenerateLeadData(){  
     AggregateResult[] groupedResults = [SELECT Status, Count(Id) cnt FROM Lead group by Status limit 5];  
     system.debug(groupedResults);  
     for (AggregateResult ar : groupedResults)   
     {  
        Lead_Label.add((string)ar.get('Status'));  
        Lead_Data.add((integer)ar.get('cnt'));  
     }  
     system.debug(Lead_Label);  
     system.debug(Lead_Data);  
   }  
   public void GenerateAccountData(){  
     AggregateResult[] groupedResults = [SELECT AccountSource, Count(Id) cnt FROM Account group by AccountSource ];  
     system.debug(groupedResults);  
     for (AggregateResult ar : groupedResults)   
     {  
        Account_Label.add((string)ar.get('AccountSource'));  
        Account_Data.add((integer)ar.get('cnt'));  
     }  
   }  
 }  


Output:



Reference Link:

https://www.chartjs.org/docs/latest/
Share:

0 comments:

Post a comment

Trailhead Profile


Follow by Email

Total Pageviews

Followers

Popular Posts

Powered by Blogger.

Contact form

Name

Email *

Message *