1

I have a Gantt Chart which is used to show the Project Timeline. I am using Google Charts to display the Gantt Chart.

Below is the VF page:

<apex:page standardController="Project__c">
    <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':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date("{!Project__c.GLI_Planned_Date__c}"), new Date("{!Project__c.GLI_Actual_Date__c}"), null,  100,  null],
        ['Write', 'Write paper',
         new Date("{!Project__c.REG_Planned_Date__c}"), new Date("{!Project__c.REG_Actual_Date__c}"), daysToMilliseconds(3), 25, 'null'],
        ['Cite', 'Create bibliography',
         new Date("{!Project__c.UAT_Planned_Date__c}"), new Date("{!Project__c.UAT_Actual_Date__c}"), daysToMilliseconds(1), 20, 'null'],
        ['Complete', 'Hand in paper',
         new Date("{!Project__c.STP_Planned_Date__c}"), new Date("{!Project__c.STP_Actual_Date__c}"), daysToMilliseconds(1), 0, 'null'],
        ['Outline', 'Outline paper',
         new Date("{!Project__c.ARC_Planned_Date__c}"), new Date("{!Project__c.ARC_Actual_Date__c}"), daysToMilliseconds(1), 100, 'null']
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>
</apex:form>
</apex:page>

Now, the issue here is that, for few records, the date fields are null. Due to that, I am seeing the error as

Cannot read property 'datefield' of undefined

Is there any way that I can display some custom banner like "Required date values are not available" instead of the above error in case of missing date values?

Please suggest

Improve this question
2
  • The answer to this question may assist you. stackoverflow.com/questions/37543623/…
    – user2120800
    Commented Jun 13, 2021 at 14:26
  • @user2120800, This is what I was looking for. But can we display like a custom message like Required Dates are missing instead of hiding the error?
    – SFDCUser
    Commented Jun 14, 2021 at 5:54

1 Answer 1

Reset to default
0

I found that this breaks it:

["0","Initial",null, null, null, 50, "null"],

You are passing in a null value as "null" which is... actually not null. It's a string set to "null"

Also, you don't seem to have defined the daysToMilliseconds function. It should be:

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

With those things fixed, null dates don't break the chart.

data.addRows([
  ["1","GLI",new Date("{!Project__c.GLI_Planned_Date__c}"), null, daysToMilliseconds(3), 50, null],
  ["2","REG",new Date("{!Project__c.REG_Planned_Date__c}"), new Date("{!Project__c.REG_Actual_Date__c}"), daysToMilliseconds(3), 50, null],
  ["3","UAT",new Date("{!Project__c.UAT_Planned_Date__c}"), new Date("{!Project__c.UAT_Actual_Date__c}"), daysToMilliseconds(2), 20, null]
]);
Improve this answer
1
  • I am getting Start and end dates from Salesforce and Hardcoding end date as null in row 1 doesn't serve the purpose. These dates are dynamic and vary with each record. If the date value is null in that particular record, I am seeing the above mentioned error
    – SFDCUser
    Commented Jun 14, 2021 at 5:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .