When trying to create date October 31, result is December 1

Question

When trying to create date October 31, result is December 1

Asked 4 years ago

Viewed 46 times

2

Today I went to visualize a graph that I have and I realized that it was all messed up but I didn’t understand why. I looked, reviewed, retested and no going back to normal. I’m guessing it’s a date and time conversion problem for google Chart...

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Data', 'Sales', 'Expenses'],
      [new Date(2020, 10, 30, 10, 36), 1000, 400],
      [new Date(2020, 10, 30, 12, 36), 1170, 460],
      [new Date(2020, 10, 30, 14, 36), 660, 1120],
      [new Date(2020, 10, 31, 16, 36), 1030, 540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

I am based on this basic example. The dates of the day 31/10/2020 ends up being converted to 01/12/2020.

Is that I’m missing something unnoticed or will be some conversion problem on google Chart?

1 answer

Browser other questions tagged javascript html date google-charts

You are not signed in. Login or sign up in order to post.

by hkotsubo • **55,826** points · Answer 1 · 2020-11-02T11:21:38+00:00

This happens because in a Date the months are indexed to zero (January is zero, February is 1, etc).

And because you’re passing the value of the month equal to 10, so you’re actually creating dates in November. Only the builder also makes some adjustments depending on the case. For example, as November has 30 days, when trying to create the date November 31, it automatically adjusts to December 1.

Then just adjust the value of the month. If you want dates in October, pass the value 9:

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

  function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Data', 'Sales', 'Expenses'],
  [new Date(2020, 9, 30, 10, 36), 1000, 400],
  [new Date(2020, 9, 30, 12, 36), 1170, 460],
  [new Date(2020, 9, 30, 14, 36), 660, 1120],
  [new Date(2020, 9, 31, 16, 36), 1030, 540]
]);

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
  vAxis: {minValue: 0}
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
  }

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>