Google Analytics Graphs to your Dashboard in Python Web Frameworks

Python:

from oauth2client.client import SignedJwtAssertionCredentials
import json
def get_access_token():
''' Get Access Token From GOOGLE'''
SCOPE = 'https://www.googleapis.com/auth/analytics.readonly'
KEY_FILEPATH = <location to key file>
with open(KEY_FILEPATH) as key_file:
key_data = json.load(key_file)
credentials = SignedJwtAssertionCredentials(
key_data['client_email'], key_data['private_key'], SCOPE)
return credentials.get_access_token().access_token

Javascript:

//script to load analytics
<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 to show graphs
<script>
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
'serverAuth': {
'access_token': "{{google_access_token}}"
}
});
var dataChart1 = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': '{{google_userid}}',
'start-date': '30daysAgo',
'end-date': 'today',
'metrics': 'ga:sessions',
'dimensions': 'ga:date',
'sort': '-ga:date'
},
chart: {
'container': 'chart-1-container',
'type': 'LINE',
'options': {
'width': '100%'
}
}
});
dataChart1.execute();
//To change when selectbox value is changed$("#chart-1").change(function(){
dataChart1.set({query: {"start-date": $("#chart-1").val()}, chart:{"type":$("#chart-type-1").val()}})
dataChart1.execute();
})
$("#chart-type-1").change(function(){
dataChart1.set({query: {"start-date": $("#chart-1").val()}, chart:{"type":$("#chart-type-1").val()}})
dataChart1.execute();
})
});
</script>

HTML

<div class='col-md-12 graph_wrap'>
<span>Users Sessions</span>
# select box to change type of graph
<span class="col-md-4 select_box">
<select id="chart-type-1">
<option value="LINE">Line</option>
<option value="COLUMN">Column</option>
<option value="TABLE">Table</option>
</select>
</span>
# select box to switch between 1 week and 1 month
<span class="col-md-4 select_box">
<select id="chart-1">
<option value="30daysAgo">Last 30 Days</option>
<option value="7daysAgo">Last 7 Days</option>
</select>
</span>
<div class="clearfix"></div>
<div id="chart-1-container"></div>

The article was originally published at MicroPyramid blog

--

--

--

Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What happens when you type ls *.c

n8n.io — Runa’s new co-investment with Sequoia and firstminute capital leverages community to…

My 100 days of learning challenge

Flutter : How to generate Signed apk quickly ?

ระบบความปลอดภัยศูนย์ข้อมูลด้วย VMware NSX — ตอน 4

Why 333 is not 333 (in Python)

AWS-Cognito: Setup signup feature for a Serverless App

Team interview | Software engineering apprenticeship pattern 📚

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
MicroPyramid

MicroPyramid

Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

More from Medium

How to add/delete/count multiple records in Redis using Python

CSV Data Migration With Google Sheets

Python with MySQL Database

An Example Application of SQLAlchemy ORM