Google Charts horizontal gridlines with datetime format

Question

I'm having a hard time getting the horizontal gridlines to show up in my google charts.

Here is my hAxis settings. I suspect it has something to do with datetime format so I wrote a formatter.

hAxis: {
    title: 'DateTime (UTC)',
    slantedText: true,
    gridlines: {
        count: 30
    }
}

var formatter = new google.visualization.DateFormat({pattern: 'yyyy-MM-dd HH:mm:ss'});
formatter.format(data, 0);

Anytbody know what I'm doing wrong?

The Site: http://redditsnaps.com/r/dataisbeautiful/top-posts-chart

Do you mean the vertical gridlines? You do not see those because your dates are not actually Date objects - they are strings. Vertical gridlines are only supported on continuous axes, and strings create discrete axes. You should convert your date strings to Date objects to get the gridlines to show. — asgallant

zeroquaranta zeroquaranta · Accepted Answer · 2016-04-01T08:25:40

From the title of the hAxis I understand you want to represent date time in UTC time zone. To do so you need to specify the time zone in the formatter, like this

var formatter = new google.visualization.DateFormat({pattern: 'yyyy-MM-dd HH:mm:ss', timeZone: +0});

This will affect only the values and the tooltips, though. You will still have the ticks label of the horizontal axis represented in your local time zone. I've been struggling myself to figure out how to change time zone of the ticks label, but no luck so far.

Thomas

Google Charts horizontal gridlines with datetime format

1 Answers