CalendarChart:
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));
}
}
}
Visual page ;
calendar.html
<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>