Format date time in Google Chart by timezone

Question

I am using Google Charts for line graphs and tables in my application. I have my data in UTC format however while displaying I want to change the timezone to the user's choice of timezone. For the tables, I tried using the timezone attribute for the date formatter. However it is not giving proper results. Hence I am planning to use moment.js to format the data in specific timezone. Can I use a custom formatter with data tables. The examples in the documentation do not have any details. Similarly can I format the data displayed on the x-axis of my line graph using a custom formatter. Any example would really help.

Answer 1

You can format the data in the DataTable by calling the setFormattedValue method of the DataTable: data.setFormattedValue(row, column, 'string formatted value');. You cannot use the format property of the axis option to change the timezone, but you can use the ticks property of the axis option to set which dates and associated labels to use:

hAxis: {
    ticks: [{v: new Date(2014, 2, 1, 10), f: '03/01/2014 5AM EST'}, {v: new Date(2014, 2, 2, 17), f: '03/02/2014 12PM EST'}, {v: new Date(2014, 2, 3, 6), f: '03/03/2014 1AM EST'}]
}

It might be easier to adjust your data rather than to reformat things. As an example, to change dates in column 1 of data from GMT by offset hours, you could use this:

for (var i = 0; i < data.getNumberOfRows(); i++) {
    var d = data.getValue(i, 0);
    d.setHours(d.getHours + offset);
    data.setValue(i, 0, d);
}