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>

I have the following controller extension to display the child records (Project__c) of parent record (Programme__c). I have created a VF page for this controller extension and added it to Programme page layout. It lists all the Projects. However, I want to get only those Projects that are under the relevant Programme record.

Can someone help with issue?



public class ProgPro {

public Programme__c ProgObj{get; set;}
public List<Project__c> ProObj{get; set;}

public pageReference getproj(){

ProObj=[SELECT Name, Project_Code__c, Project_Owner__c,   from Project__c];

return null;

    }

public ProgPro(ApexPages.StandardController controller) {

this.ProgObj=new  Programme__c();
this.ProObj=new List<Project__c>();

    }

}

I have the following controller extension to display the child records (Project__c) of parent record (Programme__c). I have created a VF page for this controller extension and added it to Programme page layout. It lists all the Projects. However, I want to get only those Projects that are under the relevant Programme record.

Can someone help with issue?



public class ProgPro {

public Programme__c ProgObj{get; set;}
public List<Project__c> ProObj{get; set;}

public pageReference getproj(){

ProObj=[SELECT Name, Project_Code__c, Project_Owner__c,   from Project__c];

return null;

    }

public ProgPro(ApexPages.StandardController controller) {

this.ProgObj=new  Programme__c();
this.ProObj=new List<Project__c>();

    }

}