Develop Reference

Format labels on AG-Grid charts

How can I format the labels that appear on AG-Grid chart's axis? I have a lot of time-series data so I expect users frequently to produce charts where the horizontal axis is a date. Unfortunately, this produces unreadable chart labels because the dates are not formatted (see attached image) - The labels look like "Thu Jan 09 2020 00:00:00 GMT+0000 (Greenwich Mean Time)" when all I would like is simply "2020-01-09". My The dates in the grid look fine thanks to a valueFormatter for dates.
It is also very common for users to produce pivot tables using the date. This produces similarly terrible results for the labels, but I've found I can use "processSecondaryColGroupDef" to format dates that appear in the column headers. Is there a similar way to do this for charts?
Thankyou,
Troy.

From the docs -
For time axes, a format string can be provided, which will be used to
format the data for display as axis labels
You can either explicitly set the axis type to 'time', but you can also remove this and the chart will still use the time axis as it automatically detects the axis type from the data in the Date column.
You can implement processChartOptions callback and add your customizations -
processChartOptions(params) {
var options = params.options;
var dateFormatter = function(params) {
return params.value.value && para[enter link description here][1]ms.value.value.toLocaleDateString
? params.value.value.toLocaleDateString()
: params.value;
};
if (["line"].indexOf(params.type) < 0) {
if (options.xAxis && options.yAxis) {
options.xAxis.label.formatter = dateFormatter;
options.yAxis.label.formatter = dateFormatter;
}
} else {
options.xAxis.type = "time";
options.xAxis.label.format = "%d %B";
}
Example and details here

How to getValues() with Google Script from Sheets so the date values matches

I have a range of cells which contain dates in the following format:
7/27/2018 17:03:46
When I use:
var range = spreadsheet.getRange(1, 1, 20).getValues();
Logger.log(range[1][0]);
I get
Sat Jul 28 02:03:46 GMT+02:00 2018
instead of
7/27/2018 17:03:46
How do I get the correct value?
My Timezone is GMT +02:00
I've tried using new Date().
The link below will take you to the Spreadsheet:
https://docs.google.com/spreadsheets/d/1H7MAEfr0QbFuNwA8N_bm-08f_Phs8G2NNOQDYG-IA4E/edit?usp=sharing

Resolved
The problem was the origin of the data. I was copying and pasting the table values from an Excel Spreadsheet which is a log from a Chinese machine which as a different time zone. When I copied and paste from Excel to Google Sheets it changes the timezone of Google Sheets :l

Error with timezone into Google Forms with Apps Script

I have a Google Forms with a date information like this:
enter image description here
This information I store into Google Spreadsheet along Google Apps Script; however in this spreadsheet, it doesn't store right date, it stores other date.
enter image description here
I use this Javascript code:
var response = '2017-12-07 08:00'; //Value from Google Form
var fecha_inicial = Utilities.formatString(response);
fecha_inicial_Date = new Date(fecha_inicial.substr(0, 10) + "T" +
fecha_inicial.substr(11, fecha_inicial.length)); //Thu Dec 07 2017 08:00:00 GMT-0500 (EST)
This form is executed in a gmail account in Spain.

GMT-0500 is not Spain's time zone. Spain is plus one. So there is a 6 hour difference between GMT-0500 and your time zone. To get your time zone:
var myTimeZone = Session.getScriptTimeZone();//Get the scripts time zone

I'm guessing the question here is, how do I make the form date and the sheet date the same?
In the google sheet have you tried changing the format of the date column? Select the whole column and in the menu click Format -> Number and then choose the format you want.
If you want to manipulate the timestamp in the App script I recommend using the moment library - Mlj57Yi463PVmHumHxq4bkaUlUqvRc4KT then add this code to use it:
var moment = Moment.moment

D3 Parse Date "2013-07-11T00:00:00" for line graph

How do I parse an array of dates like this: "2013-07-11T00:00:00", into something useable for a line graph? The graph will stretch back a full year.
I'm trying to create a dynamic graph like the one in the "Plotting a chart" section on this page.
It would be great if I could have the tick marks like that as well (Apr '13).
I'm currently using the following function in JavaScript:
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
But it doesn't work.

You have a trailing "Z" in your format specifier which makes your parser return null for the dates you give to it. Here's an example that works:
var parse = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
parse('2013-07-11T00:00:00'); // Thu Jul 11 2013 00:00:00 GMT+0200 (CEST)
You can use d3 time scales to display time-based axes with appropriate tick marks.
Edit:
I guess I misunderstood your question... here's another take which (hopefully) explains the usage of time scales and date formatting:
var scale = d3.time.scale(),
axis = d3.svg.axis(),
// Assuming you have your data as strings:
data = ['2013-07-11T00:00:00', '2013-08-11T00:00:00', ...],
range = [0, 500], // size of chart
domain = d3.extent(data, function (d) { // generate the data extent (min,max)
return new Date(d); // use Date instances for values
});
// Configure the scale with domain and range:
scale.domain(domain).range(range);
// Use the above scale for the axis:
axis.scale(scale)
// Print the dates in "Mmm dd" format:
.tickFormat(d3.time.format('%b %d'));
// Render the axis in your svg node:
svg.call(axis);

Google Charts: Date Error

I am using the Google Visualization API to generate an annotation chart.
I fetch articles and their dates from my database. The dates are in the string format 'YYYYMMDD'.
While creating the data table for the chart, I am using the following code to add the date.
dataTable.addColumn('date', 'ArticleDate');
dataTable.addColumn('string', 'ArticleInfo');
for(i=0;i<searchResultsJSON.length;i++){
var yearValue = parseInt(searchResultsJSON[i].date.substr(0,4));
var monthValue = parseInt(searchResultsJSON[i].date.substr(4,6)) - 1;
var dayValue = parseInt(searchResultsJSON[i].date.substr(6,8));
dataTable.addRow([Date(yearValue,monthValue,dayValue),'<a class=\"tooltipLink\" onclick=\"getDoc(\''+searchResultsJSON[i].path+'\');return false;\">'+searchResultsJSON[i].title+'</a><br/\><br/\>']);
}
Now, I would like to know the number of articles on each day, so I run an aggregation query on the datatable.
var result = google.visualization.data.group(dataTable,[0],[{'column': 0, 'aggregation': google.visualization.data.count, 'type': 'date'}]);
However, I am stuck at this point with an error with the date format.
Error: Type mismatch. Value Mon Jun 16 2014 13:08:20 GMT+0200 (W. Europe Daylight Time) does not match type date in column index 0
at Error (native)
This has taken most of the morning and is really holding up progress. Any help at all would be great.
Thanks!

You are missing the new keyword in front of your Date constructor:
dataTable.addRow([new Date(yearValue,monthValue,dayValue),'<a class=\"tooltipLink\" onclick=\"getDoc(\''+searchResultsJSON[i].path+'\');return false;\">'+searchResultsJSON[i].title+'</a><br/\><br/\>']);