function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Veli NadirVeli Nadir 

Google Charts Timeline in VF page

I want to use Timeline from Google Charts to display the start and end dates of projects for custom object Project__c. I I tried the following controller and VF page but it doesn't work. Can someone help me regarding this issue?

Controller:

global with sharing class GoogleChartsController {
     
   
    @RemoteAction   
    global static Project__c[] loadPros() {
        return [select Id, Name, Project_Start__c, End_Date__c from Project__c];
    }   
 
}

VF page:
<apex:page controller="GoogleChartsController" sidebar="false"> 
    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
     
    
    <!-- Google Timeline will be drawn in this DIV -->
    <div id="chartBlock" />
     
    <script type="text/javascript">
        // Load the Visualization API and the timeline package.
        google.load('visualization', '1.0', {'packages':['timeline']});
       
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initCharts);
   
        function initCharts() {         
          // Following the usual Remoting syntax
          // [<namespace>.]<controller>.<method>([params...,] <callbackFunction>(result, event) {...}
          // controller : GoogleChartsController
          // method : loadPros
          GoogleChartsController.loadPros( 
                 function(result, event){  
                     // load Timeline
                     var visualization = new google.visualization.Timeline(document.getElementById('chartBlock'));
                     // Prepare table model for chart with columns
                     var data = new google.visualization.DataTable();
                     data.addColumn('string', 'Project');
                     data.addColumn('date', 'Start');
                     data.addColumn('date', 'End');    
                     // add rows from the remoting results
                     for(var i =0; i<result.length;i++){
                        var r = result[i];
                        data.addRow([r.Name, r.Project_Start__c, r.End_Date__c]); 
                      }
                    // draw the timeline.
                    visualization.draw(data);
              }, {escape:true});
          } 
    </script>
</apex:page>


ForceBurgerForceBurger
I was able to get it to work like this:

Controller: 
public with sharing class GoogleTimelineExample {

    public list<calEvent> scheduleOpen {get;set;}

    //The calendar plugin is expecting dates is a certain format. We can use this string to get it formated correctly
    String dtFormat = 'yyyy-MM-dd HH:mm:ss';

	public GoogleTimelineExample() {
		//
	}

    public PageReference pageLoad() {
        scheduleOpen = new list<calEvent>();
        //Get Schedules
        for(Schedule__c sched : [select Id, Name, Job__r.Name, Start_Date_Time__c, End_Date_Time__c from Schedule__c ]){
            DateTime startDT = sched.Start_Date_Time__c;
            DateTime endDT = sched.End_Date_Time__c;
            calEvent schedEvent = new calEvent();
             
            schedEvent.title = sched.Job__r.Name;
            schedEvent.allDay = false;
            schedEvent.startString = startDT.format(dtFormat);
            schedEvent.endString = endDT.format(dtFormat);
            schedEvent.startYear = startDT.year();
            schedEvent.startMon = startDT.month();
			schedEvent.startDay = startDT.day();
            schedEvent.endYear = endDT.year();
            schedEvent.endMon = endDT.month();
			schedEvent.endDay = endDT.day();
            schedEvent.url = '/' + sched.Id;
        	scheduleOpen.add(schedEvent);
        }
         
        return null;
    }

    //Class to hold calendar event data
    public class calEvent{
        public String title {get;set;}
        public Boolean allDay {get;set;}
        public String startString {get;set;}
        public Integer startYear {get;set;}
        public Integer startMon {get;set;}
        public Integer startDay {get;set;}
        public String endString {get;set;}
        public Integer endYear {get;set;}
        public Integer endMon {get;set;}
        public Integer endDay {get;set;}
        public String url {get;set;}
        public String className {get;set;}
    }

}



VF Page: 
<apex:page controller="GoogleTimelineExample" action="{!pageLoad}" sidebar="false"> 
    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
     
    
    <!-- Google Timeline will be drawn in this DIV -->
    <div id="chartBlock" />
     
    <script type="text/javascript">
        // Load the Visualization API and the timeline package.
        google.load('visualization', '1.0', {'packages':['timeline']});
       
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initCharts);
   
        function initCharts() {         
			// load Timeline
			var visualization = new google.visualization.Timeline(document.getElementById('chartBlock'));
			// Prepare table model for chart with columns
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Project');
			data.addColumn('date', 'Start');
			data.addColumn('date', 'End');    
			data.addRows([
                //At run time, this APEX Repeat will reneder the array elements for the events array
                <apex:repeat value="{!scheduleOpen}" var="e">
                	[
                        '{!e.title}', 
                        new Date({!e.startYear}, {!e.startMon}, {!e.startDay}), 
                        new Date({!e.endYear}, {!e.endMon}, {!e.endDay})
                    ],
                </apex:repeat>
			]);
			// draw the timeline.
			visualization.draw(data);
          };
    </script>
</apex:page>

User-added image