Google Charts Gantt Error

Question

Based on this demo: https://jsfiddle.net/api/post/library/pure/

I'm trying to create a gantt chart.

This is the code I'm using:

google.load("visualization", "1.1", {packages:["gantt"]});
google.setOnLoadCallback(drawGantt());
function drawGantt() {
   var $ganttData = new google.visualization.DataTable();
   $ganttData.addColumn('string', 'Task ID');
   $ganttData.addColumn('string', 'Task Name');
   $ganttData.addColumn('string','Resource')
   $ganttData.addColumn('date', 'Start Date');
   $ganttData.addColumn('date', 'End Date');
   $ganttData.addColumn('number', 'Duration');
   $ganttData.addColumn('number', 'Percent Complete');
   $ganttData.addColumn('string', 'Dependencies');

   $array.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),daysToMilliseconds(daydiff(new Date(2015,11 - 1,26),new Date(2015,11 - 1,30))),25,null])
   $array.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),daysToMilliseconds(daydiff(new Date(2015,11 - 1,10),new Date(2015,11 - 1,11))),4,null]);
   $ganttData.addRows($array);
   var $ganttOptions = { height: 300, gantt: { trackHeight: 30 } };
   var $ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades'));
   $ganttChart.draw($ganttData, $ganttOptions);
}

As a result, I have this non-understanding error:

This image is from Mozilla Firefox

using IE or Chrome, this is working fine.

Answer 1

The provided example does not work for me in any browser due to the following issues:

• since google.setOnLoadCallback function expects function callback, you need to replace google.setOnLoadCallback(drawGantt()); with google.setOnLoadCallback(drawGantt);
• $array is not initialized,e.g. var $array = [];
• and last but not least,it's not an real issue but you could setnull to Duration column, it will be calculated automatically based on Start Date and Start Date values

Modified example

google.load("visualization", "1.1", { packages: ["gantt"] });
google.setOnLoadCallback(drawGantt);

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

   data = [];
   data.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),null,25,null])
   data.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),null,4,null]);
   dataTable.addRows(data);
   var ganttOptions = { height: 300, gantt: { trackHeight: 30 } };
   var ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades'));
   ganttChart.draw(dataTable, ganttOptions);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="div-Actividades"></div>

The specified example works properly in Google Chrome (v46), Mozilla Firefox (v41.0) and IE 9+

Answer 2

Probably something in the javascript engine with firefox that is different from IE/Chrome, maybe the format of new Date(2015,11 - 1,11) ?

Look at this answer to another question.

Here is some more interesting reading about formatting dates.