Jits Jits - 4 months ago 39
Javascript Question

Google gantt chart shows wrong year

I have started using gantt chart which is recently launched by google which seems great for tasks tracking via chart.

I have created 4 tasks and chart loads fine but it shows wrong date for e.g. Jan 2016 in Develop the product and release section. Actually i haven't used this date in my data at all. What is the issue over here?

enter image description here

Can you take a look fiddle and let me know the issue please.

HTML:



<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


Java script:



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', '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([
['Design', 'Design and analysis',
new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 8, 16), new Date(2015, 10, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 11, 01), new Date(2015, 11, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 12, 01), new Date(2015, 12, 20), null, 0, null],
]);

var options = {
height: 275
};

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

chart.draw(data, options);
}


Helps and reply appreciated!

Answer

month numbers are zero-based in JavaScript

so Dec, 1 2015 would be --> new Date(2015, 11, 01)

instead the 12 pushes the date to Jan 1, 2016

see following snippets...

Date Test

console.log(new Date(2015, 11, 01));
console.log(new Date(2015, 12, 01));

Chart Test

if the range should be Aug - Dec, then reduce each month # by 1

    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', '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([
        ['Design', 'Design and analysis',
         new Date(2015, 7, 1), new Date(2015, 7, 15), null, 25,  null],
        ['Development', 'Develop the product',
         new Date(2015, 7, 16), new Date(2015, 9, 31), null, 20, null],
        ['Testing', 'Product testing',
         new Date(2015, 10, 01), new Date(2015, 10, 30), null, 10, null],
        ['Release', 'Release the product',
         new Date(2015, 11, 01), new Date(2015, 11, 20), null, 0, null],
      ]);

      var options = {
        height: 275
      };

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

      chart.draw(data, options);
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Comments