使用Google Analytics核心报告API查询中的数据绘制图表

I have a question regarding the Google Analytics Core Reporting API and displaying the result Data within a Chart. I´ve managed to make a query to Analytics, which works just fine. I can choose a start and end-date, the Property and some Dimensions and Metrics in a Web-Formular. Then in return I´m getting all the data, I think in a dataTable Format,because of the Query-Option 'output': 'datatable'

我对Google Analytics核心报告API有疑问,并在图表中显示结果数据。我设法对Analytics进行了查询,该工作正常。我可以在Web-Formular中选择开始和结束日期,属性和一些维度和度量标准。然后作为回报我得到了所有数据,我认为是在dataTable格式中,因为Query-Option'输出':'datatable'

Now i want to display the Data (the DataTable) within a Google Chart. There is the problem. Something is drawn on the screen, but none of the data is being displayed. So I think the drawn Graph is just empty. Logically i tried to create a new dataTable and fill it up with the Data from the Query-Response and then draw it. Somewhere there must be a problem, maybe with the format? I´ve tried many things, but none lead to a proper Chart.

现在我想在Google Chart中显示数据(DataTable)。有问题。屏幕上绘制了一些内容,但没有显示任何数据。所以我认为绘制的图表只是空的。从逻辑上讲,我尝试创建一个新的dataTable并用Query-Response中的Data填充它,然后绘制它。某处肯定有问题,可能是格式?我尝试了很多东西,但没有一个能够得到合适的图表。

By the Way: If I try to draw a chart with given data, like in the example of the Google Chart Documentation (https://developers.google.com/chart/interactive/docs/quick_start) the graph is drawn without any problem. So I´m guessing its a format-problem.

顺便说一句:如果我尝试使用给定数据绘制图表,例如Google图表文档(https://developers.google.com/chart/interactive/docs/quick_start)的示例,则绘制图表时没有任何问题。所以我猜它是一个格式问题。

Here is the Code (a little shorten):

这是守则(稍微缩短):

 function queryCoreReportingApi(profileId) {    
      gapi.client.analytics.data.ga.get({
      'ids': 'ga:' + profileId,
      'start-date': startDate,                  //Startdate Datepicker
      'end-date': endDate,                      //Enddate Datepicker
      'metrics': 'ga:sessions',
      'dimensions': dimension,
      'filters': 'ga:landingPagePath=@'+service+';'+'ga:deviceCategory=='+device,     
      'output': 'datatable'
    })
    .then(function(response) {
      var formattedJson = JSON.stringify(response.result, null, 2);

      //Output Data in Text-Area
      document.getElementById('query-output').value = formattedJson;
      document.getElementById('query-output-obj').value = response.result.dataTable;

      //Load Chart Lib
      google.load('visualization', '1.0', {'packages':['corechart']});

      //Create Data-Table and fill up
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Browser');
      data.addColumn('number', 'Sessions');

      response.result.dataTable.rows.forEach(function pushNumericColumn(row) {
        data.addRow([row[0], parseInt(row[1])]);
      });

      var options = {
      title: 'Custom Chart',
      };

      //Draw Chart
      var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
      chart.draw(data, options);
    }

Output for formattedJson: all the data from the query |

formatJson的输出:来自查询的所有数据

Output for response.result.dataTable: [Object Object] |

response.result.dataTable的输出:[Object Object] |

Errors: No Errors in the Console

错误:控制台中没有错误

The Authentication process (which is not shown in the code sample) works fine too.

身份验证过程(代码示例中未显示)也可以正常工作。

1 个解决方案

#1

I was able to draw the chart by accessing the "v" property of the row object, like so:

我能够通过访问行对象的“v”属性来绘制图表,如下所示:

data.addRow([row.c[0].v, parseInt(row.c[1].v)]);