Custom Calendar Chart in Salesforce

Kapil March 20, 2021


 A calendar chart is a visualization used to show activity over the course of a long span of time, such as months or years. They're best used when you want to illustrate how some quantity varies depending on the day of the week, or how it trends over time.

Calendar charts are rendered in the browser using SVG or VML, whichever is appropriate for the user's browser. Like all Google charts, calendar charts display tooltips when the user hovers over the data. And credit where credit is due: our calendar chart was inspired by the D3 calendar visualization. Note: JavaScript counts months starting at zero: January is 0, February is 1, and December is 11. If your calendar chart seems off by a month, this is why. The calendar chart may be undergoing substantial revisions in future Google Charts releases. #Calendar​ #Salesforce​ #GoogleChart​ Google Chart Gallery : https://developers.google.com/chart/interactive/docs/gallery/calendar

Visualforce Page
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<apex:page controller="CalendarChart">
     <apex:form >
        
        <html>
            <head>
                <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                <script type="text/javascript">
                    google.charts.load('current', {'packages':['calendar']});
                google.charts.setOnLoadCallback(drawChart);
         
                var countDate = '{!CDate}';
                countDate = countDate.replace("[","");
                countDate = countDate.replace("]","");
                var countDateArr=countDate.split(',');
               
                var countValue = '{!CValue}';
                countValue = countValue.replace("[","");
                countValue = countValue.replace("]","");
                var countValueArr=countValue.split(',');
                
                function drawChart() {
                    
                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn({ type: 'date', id: 'Date' });
                    dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
                    for (var i = 0; i < countValueArr.length; i++) {
                        var j=i+1;
                        var cd=countDateArr[i].replace('-',',');
                        cd=cd.replace('-',',');
                        dataTable.addRow([new Date(cd), Number(countValueArr[i])]);
                    } 
                    
                    var options = {
                        title: "My Chart",
                        height: 350,
                    };
                    
                    var chart = new google.visualization.Calendar(document.getElementById('chart_div'));
                    chart.draw(dataTable, options);
                }
                </script>
            </head>
            <body>
                
                <div id="chart_div"></div>
            </body>
         </html>
    </apex:form>
</apex:page>


Apex
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class CalendarChart {
    public List<String> CDate{get;set;}
    public List<Integer> CValue{get;set;}
    public List<DailyCount__c> dcList{get;set;}
    
    public CalendarChart(){
        CDate = new List<String>();
        CValue = new List<Integer>();
        
        Integer dd;
        Integer month;
        Integer year;
        
        dcList = [SELECT date__c,count__c  FROM DailyCount__c];     
        for(DailyCount__c dc:dcList){
            dd = dc.date__c.day();
            month=dc.date__c.month();
            year = dc.date__c.year();
            CDate.add(year+'-'+month+'-'+dd);
            CValue.add(Integer.valueOf(dc.count__c));
        }
    }
}


Watch Complete Video tutorial blow

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 



Post a Comment

2 Comments

  1. UnknownApril 20, 2021 at 9:44 AM

    Hello Sir. I am getting few errors when I followed the same steps as instructed by you.

    ReplyDelete
    Replies
    1. KapilApril 20, 2021 at 8:50 PM

      Hi, what is the error please let me know so I could help !

      Delete