Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 582
stUrb Avatar asked Nov 29 '16 09:11

stUrb


People also ask

How do I add a Timezone in Google Charts?

First, Google Charts provides a Date Formatter in which you can specify a timeZone. This will provide a formatted value for each of your date and datetime values in your DataTable. You can also pass in a string as your argument to the new Date () constructor, or you can wrap your arguments in the Date.UTC () method, such as:

What is the date string format in Google Charts?

Instead, Google Charts provides a Date string representation that allows your date or datetime to be serialized and parsed properly when creating a DataTable. This Date string format simply drops the new keyword and wraps the remaining expression in quotation marks:

How do I set the default Count of a chart?

First, you can use the hAxis. format or vAxis. format option. This option applies when the gridlines. count option is omitted, in which case the chart defaults to a count of 5, as well as when it is set to a number other than -1.

How to count the number of gridlines in a chart?

First, you can use the hAxis.format or vAxis.format option. This option applies when the gridlines.count option is omitted, in which case the chart defaults to a count of 5, as well as when it is set to a number other than -1.


1 Answers

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...

like image 134
WhiteHat Avatar answered Sep 28 '22 03:09

WhiteHat