Code executing in EDGE but not in Chrome

[Richard VENCU]

I got a piece of code to display a Gantt chart that is performing well in EDGE browser but fails to show stuff in Chrome browser. I was expecting the other way... This code is taken out from View Source in the browser, it is generated dynamically so I have no chance to make it nicer...

The issue is at the third event named Vindecare Etapa 1, I am calculating a percentage of progress that as of today should be 92%. In fact in EDGE browser it gets calculated and the chart displays it properly.

Same page in Chrome says 0% progress. Not sure what is going wrong, I think maybe the evaluation of dates is not succeding properly.

I will try to make a simpler example and put it into a html page online to demonstrate better.

<script type="text/javascript">

    var today = new Date();

    var dd = today.getDate();

    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();

    today = yyyy+'-'+mm+'-'+dd;

    google.charts.load('current', {'packages':['gantt']});

    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {

      return days * 24 * 60 * 60 * 1000;

    }

    function drawChart() {

      var data = new google.visualization.DataTable();

      data.addColumn('string', 'ID');

      data.addColumn('string', 'Tratament');

      data.addColumn('string', 'Tip');

      data.addColumn('date', 'Data incepere');

      data.addColumn('date', 'Data finalizare');

      data.addColumn('number', 'Durata');

      data.addColumn('number', 'Progres');

      data.addColumn('string', 'Dependente');

      data.addRows([['today', 'Astazi', 'today', new Date(today), null, daysToMilliseconds(0.2),  100,  null],['Etapa 1', 'Etapa 1', 'tratament', String('2016-08-17').length>0?new Date('2016-08-17'):null, null, daysToMilliseconds(1),  String('100').length>0?100:0,  String('').length>0?'Vindecare ':null],['Vindecare Etapa 1', 'Vindecare Etapa 1', 'vindecare', null, null, daysToMilliseconds(4*7),  ((new Date('15/09/2016').getTime() - new Date(today).getTime())>0 && (new Date('2016-08-17').getTime() - new Date(today).getTime())<0)?Math.round((new Date(today).getTime() - new Date('2016-08-17').getTime())*100/daysToMilliseconds(4*7)):0,  'Etapa 1'],['Etapa 2', 'Etapa 2', 'tratament', String('2016-09-15').length>0?new Date('2016-09-15'):null, null, daysToMilliseconds(5),  String('0').length>0?0:0,  String('Etapa 1').length>0?'Vindecare Etapa 1':null],['Vindecare Etapa 2', 'Vindecare Etapa 2', 'vindecare', null, null, daysToMilliseconds(1*1),  ((new Date('21/09/2016').getTime() - new Date(today).getTime())>0 && (new Date('2016-09-15').getTime() - new Date(today).getTime())<0)?Math.round((new Date(today).getTime() - new Date('2016-09-15').getTime())*100/daysToMilliseconds(1*1)):0,  'Etapa 2'],['Etapa 3', 'Etapa 3', 'tratament', String('2016-09-21').length>0?new Date('2016-09-21'):null, null, daysToMilliseconds(1),  String('0').length>0?0:0,  String('Etapa 2').length>0?'Vindecare Etapa 2':null],['Vindecare Etapa 3', 'Vindecare Etapa 3', 'vindecare', null, null, daysToMilliseconds(1*7),  ((new Date('29/09/2016').getTime() - new Date(today).getTime())>0 && (new Date('2016-09-21').getTime() - new Date(today).getTime())<0)?Math.round((new Date(today).getTime() - new Date('2016-09-21').getTime())*100/daysToMilliseconds(1*7)):0,  'Etapa 3'],['Verificare', 'Verificare', 'tratament', String('2016-09-29').length>0?new Date('2016-09-29'):null, null, daysToMilliseconds(1),  String('0').length>0?0:0,  String('Etapa 3').length>0?'Vindecare Etapa 3':null],['Vindecare Verificare', 'Vindecare Verificare', 'vindecare', null, null, daysToMilliseconds(1*1),  ((new Date('01/10/2016').getTime() - new Date(today).getTime())>0 && (new Date('2016-09-29').getTime() - new Date(today).getTime())<0)?Math.round((new Date(today).getTime() - new Date('2016-09-29').getTime())*100/daysToMilliseconds(1*1)):0,  'Verificare'],

      ]);

      var options = {

        height: 5*84,

        gantt: {

            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.

            arrow: {

              angle: 0,

              width: 1,

              color: 'green',

              radius: 30,

              length: 0, spaceAfter: 0

            }

          }

      };

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

      chart.draw(data, options);

    }

  </script>

[Daniel LaLiberte]

The problem is that you are depending on browsers to parse your date strings, but they can do it differently.  It is much more reliable to use the numeric format like this:  new Date(2016, 8, 15).  Note that the month index starts at 0, so month 8 is September.

Here is your code slightly fixed up in a jsfiddle:  https://jsfiddle.net/dlaliberte/z0n8uep7/