Отформатируйте данные в API API Google Analytics и визуализируйте с помощью API диаграмм

Question

Я создаю страницу отчетов для своих клиентов, чтобы иметь возможность просматривать их данные в том формате, с которым они уже знакомы. До этого момента они получают .pdf с избранными метриками и пояснениями. Я хочу автоматизировать это с помощью API конверсий Google Analytics. У меня возникают проблемы с форматированием данных, прежде чем рисовать диаграммы. В частности, я хочу отображать продолжительность сеанса Avg в формате 00:00:00, а не в десятичном формате. Кроме того, я хотел бы обрезать страницы/сеанс до двух знаков после запятой.

Вот код для диаграммы я рисую:

/** 
     * 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]); 
     }); 

Я признателен за любую помощь или понимание, спасибо за ваше время!

---

EDIT

---

Я изменил мой код, чтобы использовать Google Analytics API вместе с Charts API, однако я по-прежнему возникают проблемы, приобретающие Продолжительность Avg 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); 

}); 

Мне нужно разделить данные в данных [2] (24 * 60 * 60) перед нанесением рисунка, а также.

данные [2]/(24 * 60 * 60), которые затем должны быть помещены в шаблон «H: mm: ss» до того, как моя таблица будет нарисована.

У меня возникли проблемы с поиском в документации по диаграммам, как это сделать.

Снова любое понимание очень ценится, спасибо за ваше время!

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