Google Analytics Charts in javascript
Question
Good Morning. I am a newbie in javascript, and I think what I want to do is easy, but i don´t know how.
I'm trying to draw Google analytics graph to display on my own dashboard. My code works, but I have several webs registered, and always shows me the same default unless I change it manually(the field is called PROPERTY). I would like the default web was another.
Here is my code (i have changed CLIENT ID to '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>
Can anybody help me with it? Thanks so much in advance
2 answers
solution1
3 ACCPTED 2015-04-01 17:00:28
If you know the ids parameter of the view you want to show by default then you don't need to use the view selector component, you can just hardcode that value in your queries.
For example, using your "Chart1" code:
// 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'
}
}
});
You just have to replace the 'ga:XXXXXXX' with the ids parameter of the view you want to display.
If you don't know the ids parameter, you can find it using the Google Analytics Account Explorer tool.
solution2
1 2015-04-01 17:17:43
I like the Query explorer it will give you the account ids as well as other parameters. And you can test to see if it returns what you expect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.