如何使用从Google Analytics检索到的数据并将其显示在Google Charts中

时间:2013-08-30 12:43:58

标签: javascript jquery google-analytics google-visualization

我已经执行了首先对帐户进行身份验证的所有查询功能,然后从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 个答案:

答案 0 :(得分:0)

坦率地说,Getting Started指南应该正是您所需要的。我将在这里总结一下,但我可能会遗漏一些你需要做的微妙之处:

  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函数中绘制图表。
  5. 然后,我会去看看各个图表上的文档,并填写详细信息。由于您已经将数据显示为表格,因此我从Google's Table Chart开始,然后从那里开始。