stUrb stUrb - 4 days ago 6
Javascript Question

Google Charts displays wrong month

I've got a google line chart which shows the correct line; but the annotation of the Date is off by one month exactly. The json data has the correct date; but somehow google charts transforms it:
chart with wrong date

Anybody an idea why this happens?

Answer

no mistake, the correct month is being displayed

when using the following date constructor, the months are zero based...

Date(year, month, day, hour, min, sec, mill)

see following snippet...

console.log(new Date(2016,  0, 1)); // <-- Jan
console.log(new Date(2016,  1, 1)); // <-- Feb
console.log(new Date(2016, 11, 1)); // <-- Dec

following is another snippet to demonstrate using json with google charts...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "Date", "type": "date"}
      ],
      "rows": [
        {"c": [{"v": "Date(2016,0,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,1,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,2,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,3,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,4,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,5,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,6,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,7,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,8,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,9,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,10,28,15,0,0)"}]},
        {"c": [{"v": "Date(2016,11,28,15,0,0)"}]},
      ]
    });

    var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages:['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

following is a php snippet to create the json date using the above constructor

<?php
$date1 = new DateTime();
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";

echo $date2;
?>

here is a php fiddle to test the above snippet...

Comments