Google Analytics Charts in javascript -
good morning. newbie in javascript, , think want easy, don´t know how.
i'm trying draw google analytics graph display on own dashboard. code works, have several webs registered, , shows me same default unless change manually(the field called property). default web another.
here code (i have changed client id 'xxx'
<html> <head> <title> google analytics charts </title> </head> <body> <p align="center"><b><u>visits<u> </b></p> <!-- step 1: create 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 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 user. var client_id = 'xxx'; gapi.analytics.auth.authorize({ container: 'auth-button', clientid: client_id, }); // step 4: create view selector. var viewselector = new gapi.analytics.viewselector({ container: 'view-selector' }); // step 5: create 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 components 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 me it? in advance
if know ids parameter of view want show default don't need use view selector component, can hardcode value in queries.
for example, using "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 have replace 'ga:xxxxxxx' ids parameter of view want display.
if don't know ids parameter, can find using google analytics account explorer tool.
Comments
Post a Comment