我如何使用从谷歌分析检索到的数据并在谷歌图表中显示

How can I use the data retrieved from Google Analytics and show it in Google Charts

本文关键字:谷歌 数据 显示 何使用 检索      更新时间:2023-09-26

我已经执行了所有的查询功能,其中帐户首先经过身份验证,然后从Google Analytics获得查询结果。

我在下面的一个表中输出结果的代码;

//To Get the Profile ID first
function queryCoreReportingApi(profileId) {
  updatePage('Querying Core Reporting API.');
  gapi.client.analytics.data.ga.get({
    'ids': 'ga:' + profileId,
    'start-date': lastNDays(14),
    'end-date': lastNDays(0),
    'dimensions': 'ga:date,ga:year,ga:month,ga:week,ga:day',
    'metrics': 'ga:visitors'
  }).execute(handleCoreReportingResults);
}
//To Show the Result
function handleCoreReportingResults(response) {
  if (!response.code) {
    if (response.rows && response.rows.length) {
      var output = [];
      // Profile Name.
      output.push('Profile Name: ', response.profileInfo.profileName, '<br>'); 
      var table = ['<table>'];
      // Put headers in table.
      table.push('<tr>');
      for (var i = 0, header; header = response.columnHeaders[i]; ++i) {
        table.push('<th>', header.name, '</th>');
      }
      table.push('</tr>');
      // Put cells in table.
      for (var i = 0, row; row = response.rows[i]; ++i) {
        table.push('<tr><td>', row.join('</td><td>'), '</td></tr>');
      }
      table.push('</table>');
      output.push(table.join(''));
      outputToPage(output.join(''));
    } else {
      outputToPage('No results found.');
    }
  } else {
    updatePage('There was an error querying core reporting API: ' +
        response.message);
  }
}
function outputToPage(output) {
  document.getElementById('output').innerHTML = output;
}

function updatePage(output) {
  document.getElementById('output').innerHTML += '<br>' + output;

}

现在的问题是如何将返回的结果显示在谷歌图表中(条形图-饼图等)。我厌倦了使用googlecharts.js,但不喜欢用户如何集成。有人能帮忙吗?

坦率地说,入门指南应该正是您所需要的。我将在这里进行总结,但我可能会忽略一些您需要做的微妙之处:

  1. 包括JSAPI:<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  2. 加载库:<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
  3. 添加回调:google.setOnLoadCallback(drawChart);
  4. drawChart函数中绘制图表

然后,我会去看各个图表上的文档,并填写详细信息。由于您已经将数据显示为表格,我将从谷歌的表格图表开始,然后继续。