Formatting timezone of Google Charts datetime axis labels

google-visualization, javascript, timezone

Solution

use the `hAxis.ticks` configuration option to provide the axis labels

once the data has been formatted with `DateFormat`

build an array with the labels to be displayed

use object notation to provide the 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 necessarily need to format the entire `dataTable`, or you want to use labels that don't exist in the `dataTable`, use the `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 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>

Problem

Original source