CODEWITHSUNDEEP
javascriptjquerycharts
McCuz
McCuz

Reputation: 227

Google timeline chart starting from wrong date

  google.load("visualization", "1", {packages:["timeline"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() 
  {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'DMAIC' });
    dataTable.addColumn({ type: 'string', id: 'Pozicija' });
    dataTable.addColumn({ type: 'string', 'role': 'tooltip', 'p': {'html': true}})
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([['Opredelitev', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">10.12.2015 - 19.12.2015</p></div>', new Date(2015, 12, 10), new Date(2015, 12, 19)],['Meritev', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">09.12.2015 - 16.01.2016</p></div>', new Date(2015, 12, 09), new Date(2016, 01, 16)],['Analiza', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">18.12.2015 - 24.12.2015</p></div>', new Date(2015, 12, 18), new Date(2015, 12, 24)],['Izboljšava', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">12.01.2016 - 23.01.2016</p></div>', new Date(2016, 01, 12), new Date(2016, 01, 23)],['Kontrola', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">07.01.2016 - 23.01.2016</p></div>', new Date(2016, 01, 07), new Date(2016, 01, 23)],['Replikacija', 'Plan' , '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">08.02.2016 - 26.02.2016</p></div>', new Date(2016, 02, 08), new Date(2016, 02, 26)],['Opredelitev', 'Realizacija', '<div class="timelineHover"><p style="padding:2px;font-weight:bold;">17.12.2015 - 25.12.2015</p></div>', new Date(2015, 12, 17), new Date(2015, 12, 25)]]);

    var options = {
        width:950,
        height:430,
        backgroundColor: '#ffd',
        timeline: { colorByRowLabel: true },
        tooltip: {isHtml: true}
    };
    chart.draw(dataTable, options);
  }

http://jsfiddle.net/r37uf/50/

In this example my earliest value starts with

new Date(2015, 12, 9)

That should be 9th of December, but my chart starts with 9th of January.

Upvotes: 2

Views: 514

Answers (1)

sailens
sailens

Reputation: 1614

A Month, in Date format is month number - 1 , so you should use new Date(2015, 11, 9)for December.

January is month 0, or default month if incorrect is provided (12 is incorrect)

Upvotes: 2

Related Questions