google-analytics - 在 Google Analytics API 响应中格式化数据并使用 Charts API 进行可视化

Question

我正在为我的客户构建一个报告页面，以便能够以他们已经熟悉的格式查看他们的数据。到目前为止，他们会收到一个带有选定指标和说明的 .pdf。我想使用 Google Analytics Embed API 自动执行此操作。我在绘制图表之前无法格式化数据。具体来说，我想以 00:00:00 时间格式而不是小数显示平均 session 持续时间。另外，我想将页面/ session 截断到小数点后两位。

这是我正在绘制的图表的代码:

 /**
         * Create a table chart showing top Keywords by sessions with average session duration and pages / session
        */

        var keywordChart = new gapi.analytics.googleCharts.DataChart({
          query: {
            'dimensions': 'ga:keyword',
            'metrics': 'ga:sessions,ga:avgSessionDuration,ga:pageviewsPerSession',
            'sort': '-ga:sessions',
            'start-date': '30daysAgo',
            'end-date': 'yesterday',
            'max-results': '10'
          },
          chart: {
            type: 'TABLE',
            container: 'keyword-chart-container',
            options: {
              width: '100%'
            }
          }
        });

        keywordChart.on('success', function(response) {
          console.log(response.data.cols[2]);
        });

感谢您的帮助或见解，感谢您的宝贵时间!

编辑

我已更改我的代码以使用谷歌分析 API 和图表 API，但是我仍然无法使用日期模式来格式化平均 session 持续时间。
这是我更新的代码:

var keywordChart = new gapi.analytics.report.Data({
  query: {
    'dimensions': 'ga:keyword',
    'metrics': 'ga:sessions,ga:avgSessionDuration,ga:pageviewsPerSession',
    'sort': '-ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
    'max-results': '10',
    'output': 'dataTable'
  }
});

keywordChart.on('success', function(response) {
  console.log(response.dataTable);
  var data = new google.visualization.DataTable(response.dataTable);
  var timeFormatter = new google.visualization.DateFormat({pattern: 'H:mm:ss'});
  var numFormatter = new google.visualization.NumberFormat({fractionDigits: 2});

  timeFormatter.format(data, 2);
  numFormatter.format(data, 3);

  var keywordsTable = new google.visualization.Table(document.getElementById('keyword-chart-container'));
  keywordsTable.draw(data);

});

在应用模式之前，我还需要将 data[2] 中的数据除以 (24*60*60) 。

然后在绘制我的表格之前将 data[2]/(24*60*60) 放入模式 'H:mm:ss' 中。

我无法在 Charts 文档中找到如何完成此操作。

再次感谢您的任何见解，感谢您的宝贵时间!

Answer 1

您可以使用 DataView替换data[2]与 calculated column

假设 data[2]是一个时间值，将产生一个有效的日期new Date(data[2])
请参阅以下片段...

keywordChart.on('success', function(response) {
  var data = new google.visualization.DataTable(response.dataTable);

  var timeFormatter = new google.visualization.DateFormat({pattern: 'H:mm:ss'});

  // create view
  var view = new google.visualization.DataView(data);

  // include all columns from data
  var columns = [];
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
  }

  // replace date column with calculation
  columns[2] = {
    calc: function (dt, r) {
      return {
        // value
        v: new Date(dt.getValue(r, 2)),
        // formatted value
        f: timeFormatter.formatValue(new Date(dt.getValue(r, 2)))};
    },
    type: 'date',
    label: data.getColumnLabel(2)
  };
  view.setColumns(columns);

  var keywordsTable = new google.visualization.Table(document.getElementById('keyword-chart-container'));
  // draw chart with view
  keywordsTable.draw(view);
});

显然，您可以使用 numFormatter 对数字列执行相同的操作