Simple dashboard using Bootstrap + Chart.js inside Salesforce.com

This post is about  developing a very simple dashboard inside Salesforce.com using Chart.js and Bootstrap. Click here to see this in action

Recently I came across Chart.js which seems to be the simplest way to achieve this. Being a fan of developing things inside Salesforce.com using Bootstrap so decided it to mix with Bootstrap (a bit).

Benefits —

Looks beautiful

Animates

Responsive

Light weight

To get started with it you need to download package available at Chart.js website and upload it to your Salesforce.com org as Static Resource as name chart

http://www.chartjs.org/

In our case the  path become like this

{!URLFOR($Resource.chart,'Chart.js-master/Chart.js')}

To use bootstrap with this I have used bootstrap’s CDNs.

Bootstrap3 – http://getbootstrap.com/

The implementation of chart.js is very straight forward and we only need to define the dataset/datastructure to draw the charts . Label denotes the labels you want to put across and supply the values with repect to them. Below is the complete code, I have tried to keep it as simple as I can.

Visualforce Page 1 – for Bar and curve chart

Controller for above page –

public class ChartCreatorCls {
    public Integer prospecting {get;set;}
    public Integer qualification {get;set;}
    public Integer needsAnalysis {get;set;}
    public Integer valueProposition {get;set;}
    public Integer iDDecisionMakers {get;set;}
    public Integer perceptionAnalysis {get;set;}
    public Integer proposalOrPriceQuote {get;set;}
    public Integer negotiationOrReview {get;set;}
    public Integer closedWon {get;set;}
    public Integer closedLost {get;set;}
    
     
    public chartCreatorCls(){
         
        prospecting = 0;
        qualification = 0;
        needsAnalysis = 0;
        valueProposition = 0;
        iDDecisionMakers = 0;
        perceptionAnalysis = 0;
        proposalOrPriceQuote = 0;
        negotiationOrReview = 0;
        closedWon =  0;
        closedLost = 0;
               
        generateData();
         
     
    }
     
     
    
   public void generateData(){
    
    
    AggregateResult[] groupedResults  = [SELECT StageName, Count(Id) cnt FROM Opportunity group by StageName];
 
        for (AggregateResult ar : groupedResults)  {
            if(ar.get('StageName').equals('Prospecting'))
                prospecting = (Integer) ar.get('cnt');
            if(ar.get('StageName').equals('Qualification'))
                qualification = (Integer) ar.get('cnt');    
            if(ar.get('StageName').equals('Needs Analysis'))
                needsAnalysis = (Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Value Proposition'))
                valueProposition = (Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Id. Decision Makers'))
                iDDecisionMakers  = (Integer)  ar.get('cnt'); 
            if(ar.get('StageName').equals('Perception Analysis'))
                perceptionAnalysis = (Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Proposal/Price Quote'))
                proposalOrPriceQuote =(Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Negotiation/Review'))
               negotiationOrReview  =(Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Closed Won'))
               closedWon = (Integer) ar.get('cnt'); 
            if(ar.get('StageName').equals('Closed Lost'))
               closedLost  = (Integer) ar.get('cnt');       
        }
    }
 
}

Visualforce Page 2 – Donut and Radar Chart

public class ChartCreatorCls2 {
 
     
    public Integer openNotContacted {get;set;}
    public Integer workingContacted {get;set;}
    public Integer closedConverted {get;set;}
    public Integer closedNotConverted {get;set;}
     
     
    public chartCreatorCls2(){
 
         
        openNotContacted = 0;
        workingContacted =0; 
        closedConverted = 0;        
        closedNotConverted = 0;       
        generateData();
         
     
    }
     
     
 
    
   public void generateData(){
        AggregateResult[] groupedResults  = [SELECT Status, Count(Id) cnt FROM Lead group by Status];
 
        for (AggregateResult ar : groupedResults)  {
            if(ar.get('Status').equals('Open - Not Contacted'))
                openNotContacted = (Integer) ar.get('cnt');
            if(ar.get('Status').equals('Working - Contacted'))
               workingContacted = (Integer) ar.get('cnt');    
            if(ar.get('Status').equals('Closed - Converted'))
                closedConverted = (Integer) ar.get('cnt'); 
            if(ar.get('Status').equals('Closed - Not Converted'))
                closedNotConverted  = (Integer) ar.get('cnt'); 
              
        }
   } 
}

You can see this in action here.