在Google AnalyticsAPI响应中格式化数据,并使用Charts API进行可视化

时间:2016-08-05 18:24:38

标签: google-analytics google-visualization google-analytics-api

我正在为我的客户构建一个报告页面,以便能够以他们熟悉的格式查看他们的数据。到目前为止,他们会收到带有选择指标和解释的.pdf。我想使用Google Analytics Embed API自动执行此操作。在绘制图表之前,我无法格式化数据。具体来说,我想以00:00:00时间格式而不是小数显示平均会话持续时间。另外,我想将Pages / 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,但是我仍然无法使用日期模式格式化平均会话持续时间。 这是我更新的代码:

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);

});

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

数据[2] /(24 * 60 * 60)然后被放入模式' H:mm:ss'在我的桌子被绘制之前。

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

再次感谢任何见解,谢谢你的时间!

1 个答案:

答案 0 :(得分:2)

您可以使用DataViewdata[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

对数字列执行相同的操作