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:
Anybody an idea why this happens?
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:
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:
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.
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.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With