Menu
I am using the Google Analytics Embed API. Below is the code example that I'm working with from Google's Development page. Is there a way to set the defaults for the Selector? Account | Property | View
<!doctype html>
<html lang="en">
<head>
<title>Google Charts</title>
<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
var ACCESS_TOKEN = 'xxxxx'; // obtained from your service account
gapi.analytics.auth.authorize({
serverAuth: {
access_token: ACCESS_TOKEN
}
});
/**
* Create a new ViewSelector instance to be rendered inside of an
* element with the id "view-selector-container".
*/
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container'
});
// Render the view selector to the page.
viewSelector.execute();
/**
* Create a new DataChart instance with the given query parameters
* and Google chart options. It will be rendered inside an element
* with the id "chart-container".
*/
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:users',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'LINE',
options: {
width: '100%'
}
}
});
/**
* Render the dataChart on the page whenever a new view is selected.
*/
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});
});
</script>
</head>
<body>
<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>
</body>
</html>
294
You first want to find the ids value of the account you want as your default. You do this by simply console logging 'ids' and then choosing the selector in your view-selector-container. This will past a number in your browsers console. You then need to set the value of 'ids' to this number. You change this in two places, firstly you add it into your query for dataChart. So for example if your ids number was 12345678 then you would write it as shown below ( ids: 'ga:12345678' ):
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
ids: 'ga:12345678',
metrics: 'ga:users',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'LINE',
options: {
width: '100%'
}
}
});
You then also need to change the value of ids where you execute dataChart
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});
so inside the query the second 'ids' is changed as shown below:
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: 'ga:12345678'}}).execute();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
