Formatting the time zone of date axis labels in Google charts

Question

I use GoogleCharts to draw a line chart of type "datetime" along one axis. I would like to format the axis labels so that they display the time in the given time zone, and not the default browser time zone.

From reading the documentation, there is a DateFormat object that can be provided with the 'timeZone' option, and then called with the appropriate DataTable and column to format all the cells in that column. I noticed that this leads to values ​​that are properly formatted if the DataTable displayed in a table. However, the same formatting does not apply to axis axes in charts such as LineChart or Bar .

Here is my code:

 var dataTable = new google.visualization.DataTable(); dataTable.addColumn('datetime', 'Time'); dataTable.addColumn('number', 'Wolves'); dataTable.addRows([ [new Date(2020, 1, 1, 12), 1], [new Date(2020, 1, 1, 13), 3] ]); // Create DateFormat with a timezone offset of -4 var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); // Format the first column dateFormat.format(dataTable, 0); dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4" var table = new google.visualization.Table(document.getElementById('wolf_table')); table.draw(dataTable); var lineChart = new google.visualization.LineChart(document.getElementById('wolf_chart')); lineChart.draw(dataTable); 

Here are the resulting diagrams:

Notice how the table correctly displays the formatting time in the corresponding cells, while the axes of the line chart display the browser time (GMT in this case).

Is there a way to change the format of the time zones of the line chart axis labels? Is there something I can lose?

Answer 1

use the hAxis.ticks configuration parameter to provide label tags

after formatting data with DateFormat

build an array with displayed labels

use object designation to provide value ( v: and formatted value ( f: for each label

 // Set X-Axis Labels var xTicks = []; for (var i = 0; i < dataTable.getNumberOfRows(); i++) { xTicks.push({ v: dataTable.getValue(i, 0), f: dataTable.getFormattedValue(i, 0) }); } 

if you don’t have to format the entire dataTable ,
or do you want to use labels that do not exist in the dataTable ,
use formatValue method on DateFormat

 // Set X-Axis Labels var xTicks = []; for (var i = 0; i < dataTable.getNumberOfRows(); i++) { xTicks.push({ v: dataTable.getValue(i, 0), f: dateFormat.formatValue(dataTable.getValue(i, 0)) }); } /*** OR ***/ // custom date, not in dataTable var customDate = new Date(2016, 9, 4, 22, 7, 7); xTicks.push({ v: customDate, f: dateFormat.formatValue(customDate) }); 

see the following working snippet ...

 google.charts.load('current', { callback: function () { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('datetime', 'Time'); dataTable.addColumn('number', 'Wolves'); dataTable.addRows([ [new Date(2020, 1, 1, 12), 1], [new Date(2020, 1, 1, 13), 3] ]); // Create DateFormat with a timezone offset of -4 var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); // Format the first column dateFormat.format(dataTable, 0); // Set X-Axis Labels var xTicks = []; for (var i = 0; i < dataTable.getNumberOfRows(); i++) { xTicks.push({ v: dataTable.getValue(i, 0), f: dataTable.getFormattedValue(i, 0) }); } var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(dataTable); var lineChart = new google.visualization.LineChart(document.getElementById('chart_div')); lineChart.draw(dataTable, { hAxis: { ticks: xTicks } }); }, packages:['corechart', 'table'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> <div id="chart_div"></div>