Formatting Timezone Of Google Charts Datetime Axis Labels

I'm using GoogleCharts to draw a line chart with a 'datetime' type along one axis. I'd like to format the axis labels so that they display times in a specified timezone instead of

Solution 1:

use the hAxis.ticksconfiguration 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 Labelsvar 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 Labelsvar 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 dataTablevar 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([
      [newDate(2020, 1, 1, 12), 1],
      [newDate(2020, 1, 1, 13), 3]
    ]);

    // Create DateFormat with a timezone offset of -4var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});

    // Format the first column
    dateFormat.format(dataTable, 0);

    // Set X-Axis Labelsvar 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']
});

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