Fatal编程技术网

javascript中的谷歌分析图表

javascript charts google-analytics

javascript中的谷歌分析图表,javascript,charts,google-analytics,Javascript,Charts,Google Analytics,早上好。我是javascript的新手，我想我想做的很简单，但我不知道怎么做 我正在尝试绘制谷歌分析图，以显示在我自己的仪表板上。我的代码可以工作，但是我注册了几个站点，并且总是显示相同的默认值，除非我手动更改它（该字段称为PROPERTY）。我想默认的网站是另一个 这是我的代码（我已将客户ID更改为“XXX” <html> <head> <title> Google Analytics Charts </title> </head>

早上好。我是javascript的新手，我想我想做的很简单，但我不知道怎么做

我正在尝试绘制谷歌分析图，以显示在我自己的仪表板上。我的代码可以工作，但是我注册了几个站点，并且总是显示相同的默认值，除非我手动更改它（该字段称为PROPERTY）。我想默认的网站是另一个

这是我的代码（我已将客户ID更改为“XXX”

<html>
<head>
<title> Google Analytics Charts </title>
</head>
<body>
<p align="center"><b><u>VISITS<u> </b></p>
<!-- Step 1: Create the containing elements. -->

<section id="auth-button" hidden></section>
<section id="view-selector"></section>
<section id="timeline" class="left clear"></section>
<section id="pie" class="right"></section>
<section id="table" class="left clear"></section>
<section id="gauge" class="right"></section>

<!-- Step 1.1: CSS. -->
<style>
.left {float:left}
.right {float:right}
.clear {clear:both}
</style>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb)     {this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function() {g.load('analytics')};
}(window,document,'script'));
</script>

<script>
gapi.analytics.ready(function() {

// Step 3: Authorize the user.

var CLIENT_ID = 'XXX';

gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});

// Step 4: Create the view selector.

var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});

// Step 5: Create the timeline chart.

//Chart 1
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'metrics': 'ga:users',
'dimensions': 'ga:date',
//      'start-date': '30daysAgo',
//      'start-date': '2015-03-01',
'start-date': '7daysAgo',
'end-date': 'today',
},
chart: {
  type: 'LINE',
  container: 'timeline',
  options: {
    //width: '50%', height: '50%',
    title: 'Visits per day',
    curveType: 'function'
  }
}
});

//Chart 2
var pie = new gapi.analytics.googleCharts.DataChart({
query: {
  metrics: 'ga:sessions',
  dimensions: 'ga:country',
  'start-date': '30daysAgo',
  'end-date': 'yesterday',
  'max-results': 5,
  sort: '-ga:sessions'
},
chart: {
  container: 'pie',
  type: 'PIE',
  options: {
    // width: '50%', height: '50%',
    title: 'Visits per country',
    is3D: true
  }
}
});

//Chart 3
var table= new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
//      'metrics': 'ga:users',
  'metrics': 'ga:sessions',
//      'dimensions': 'ga:hour',
  'dimensions': 'ga:date',
  'dimensions': 'ga:campaign',
//      'start-date': '30daysAgo',
//      'start-date': '2015-03-01',
  'start-date': 'today',
  'end-date': 'today',
},
chart: {
  type: 'TABLE',
  container: 'table',
  options: {
    //width: '50%', height: '50%',
    title: 'Campaign visits today',
    is3D: true
  }
}
});

//Chart 4
var gauge= new gapi.analytics.googleCharts.DataChart({
query: {
  metrics: 'ga:socialInteractions',
//     metrics: 'ga:avgTimeOnPage',
  dimensions: 'ga:socialInteractionNetwork',
  'start-date': 'today',
  'end-date': 'today',
},
chart: {
  container: 'gauge',
  type: 'TABLE',
  options: {
    title: 'Exit Pages'
  }
}
});


// Step 6: Hook up the components to work together.

gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});

viewSelector.on('change', function(ids) {
var newIds = {
  query: {
    ids: ids
  }
}
timeline.set(newIds).execute();
pie.set(newIds).execute();
table.set(newIds).execute();
gauge.set(newIds).execute();
});
});
</script>
</body>
</html>


谷歌分析图表

访问

.left{float:left}
.right{float:right}
.clear{clear:两个}
（功能（w、d、s、g、js、fjs）{
g=w.gapi | |（w.gapi={}）；g.analytics={q:[]，ready:function（cb）{this.q.push（cb）}；
js=d.createElement；fjs=d.getElementsByTagName[0]；
js.src=https://apis.google.com/js/platform.js';
insertBefore（js，fjs）；js.onload=function（）{g.load（'analytics'）}；
}（窗口、文档、“脚本”）；
gapi.analytics.ready（函数（）{
//第三步：授权用户。
var客户机_ID='XXX'；
gapi.analytics.auth.authorize({
容器：“身份验证按钮”，
clientid:客户端ID，
});
//步骤4：创建视图选择器。
var viewSelector=new gapi.analytics.viewSelector({
容器：“视图选择器”
});
//步骤5：创建时间线图。
//图1
var timeline=新gapi.analytics.googleCharts.DataChart({
reportType:'ga'，
查询：{
“指标”：“ga:用户”，
“维度”：“ga:日期”，
//‘开始日期’：‘30天Sago’，
//“开始日期”：“2015-03-01”，
“开始日期”：“7daysAgo”，
“结束日期”：“今天”，
},
图表：{
键入：“行”，
容器：“时间线”，
选项：{
//宽度：“50%”，高度：“50%”，
标题：“每天访问量”，
曲线类型：“函数”
}
}
});
//图2
var pie=新的gapi.analytics.googleCharts.DataChart({
查询：{
指标：“ga:会话”，
维度：“ga:国家”，
‘开始日期’：‘30天Sago’，
“结束日期”：“昨天”，
“最大结果”：5，
排序：'-ga:会话'
},
图表：{
容器：“馅饼”，
键入“PIE”，
选项：{
//宽度：“50%”，高度：“50%”，
标题：“每个国家的访问次数”，
is3D：对
}
}
});
//图3
var table=新gapi.analytics.googleCharts.DataChart({
reportType:'ga'，
查询：{
//“指标”：“ga:用户”，
“指标”：“ga:会话”，
//“尺寸”：“ga:hour”，
“维度”：“ga:日期”，
“维度”：“ga:活动”，
//‘开始日期’：‘30天Sago’，
//“开始日期”：“2015-03-01”，
“开始日期”：“今天”，
“结束日期”：“今天”，
},
图表：{
键入：“表”，
容器：'表'，
选项：{
//宽度：“50%”，高度：“50%”，
标题:"今日竞选访问",，
is3D：对
}
}
});
//图4
var gauge=新gapi.analytics.googleCharts.DataChart({
查询：{
指标：“ga：社会互动”，
//指标：“ga:avgTimeOnPage”，
维度：“ga：社会互动网络”，
“开始日期”：“今天”，
“结束日期”：“今天”，
},
图表：{
集装箱：“规格”，
键入：“表”，
选项：{
标题：“退出页面”
}
}
});
//步骤6：将组件连接在一起工作。
gapi.analytics.auth.on（'success'，函数（响应）{
viewSelector.execute（）；
});
viewSelector.on（'change'，函数（id）{
var newIds={
查询：{
ids:ids
}
}
timeline.set（newIds.execute（）；
set（newIds.execute（）；
table.set（newIds.execute（）；
gauge.set（newIds.execute（）；
});
});
有人能帮我吗？非常感谢您，如果您知道默认情况下要显示的视图的
ids
参数，那么您不需要使用视图选择器组件，只需在查询中硬编码该值即可

例如，使用“图表1”代码：

您只需将
'ga:XXXXXXX'
替换为要显示的视图的
ids
参数

如果您不知道
ids
参数，可以使用该工具找到它。

如果您知道默认情况下要显示的视图的
ids
参数，则不需要使用视图选择器组件，您可以在查询中硬编码该值

例如，使用“图表1”代码：

您只需将
'ga:XXXXXXX'
替换为要显示的视图的
ids
参数

如果您不知道
ids
参数，您可以使用该工具找到它。

我喜欢它，它将为您提供帐户ID和其他参数。您可以测试它是否返回您期望的值。

我喜欢它将为您提供帐户ID和其他参数。您可以测试它是否返回您想要的值期待。

非常感谢你的帮助，菲利普。它现在起作用了！太好了！如果它对你有效，那么你应该将答案标记为已接受，这样其他有相同问题的人也会受益。非常感谢你的帮助，菲利普。它现在起作用了！太好了！如果它对你有效，那么你应该将答案标记为已接受，这样其他有相同追求的人也会受益ion可以从中受益。非常感谢你的帮助Rothrock。是一个很棒的工具it。现在，我可以找到我想用它的指标。非常感谢你的帮助Rothrock。是一个很棒的工具it。现在，我可以找到我想用它的指标。 
// Chart 1
var timeline = new gapi.analytics.googleCharts.DataChart({
  query: {
    'ids': 'ga:XXXXXXX',
    'metrics': 'ga:users',
    'dimensions': 'ga:date',
    'start-date': '7daysAgo',
    'end-date': 'today',
  },
  chart: {
    type: 'LINE',
    container: 'timeline',
    options: {
      title: 'Visits per day',
      curveType: 'function'
    }
  }
});