Skip to content

Instantly share code, notes, and snippets.

@kohiomobz

kohiomobz/davitaDashboard.js

Created October 9, 2015 20:16
Show Gist options
  • Save kohiomobz/a54694c67a6579bc712d to your computer and use it in GitHub Desktop.
Save kohiomobz/a54694c67a6579bc712d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
davitaDashboard.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/css/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.circle-div {
height: 400px;
display: inline-block;
width: 300px;
}
.app-launches {
}
.numberCircle {
border-radius: 50%;
width: 200px;
height: 200px;
padding: 8
background: #fff;
border: 2px solid #666;
color: #666;
text-align: cent
font: 72px Arial, sans-serif !important;
font-size: 72px !important;
text-align: center;
vertical-align: middle;
line-height: 200px;
}
.text {
font: 72px;
}
.span-css {
background-color: white;
border: 1px solid #7a8195;
border-radius: 5px;
color: #7a8195;
display: block;
margin-bottom: 25px;
padding: 10px;
max-width: 60%;
margin-top: 5%;
text-align: center;
}
.graphs {
width: 80%;
height: 500px;
margin: 50px;
}
</style>
</head>
<body>
<div class="app-launches circle-div">
<span class="span-css center-block"> Total App Launches</span>
<div class="numberCircle center-block"></div>
</div>
<div class="avg-monthly-visits circle-div">
<span class="span-css center-block"> Avg Monthly Visits</span>
<div class="numberCircle center-block"></div>
</div>
<div class="avg-logins circle-div">
<span class="span-css center-block"> Avg Logins</span>
<div class="numberCircle center-block"></div>
</div>
<div class="graphs">
<span class="span-css center-block">Daily Active Users</span>
<div class="daily-users"></div>
</div>
<div class="graphs">
<span class="span-css center-block">Monthly Active Users</span>
<div class="unique-users"></div>
</div>
<div class="graphs">
<span class="span-css center-block">Visits by Region</span>
<div class="visits-region"></div>
</div>
<div class="graphs">
<span class="span-css center-block">Total Users on Android vs iOS</span>
<div class="android-ios graphs"></div>
</div>
<script>
/* Hey Chuck, here's how you set Credentials for different Projects */
MP.api.setCredentials('7561b363f7783fbcca00a1ed50ced2df', '2bf819c76c6e0d73e718e1a8176bd916');
/*
So using this, you can set credentials for one project, extract data and then set credentials
for another project to pull out data.
*/
/*
Feedback
*/
/* Circles */
/* Average Monthly Visits per User */
var avgMonthlyVisits = MP.api.query('/api/2.0/segmentation/', {
from: moment().subtract(1, 'months'),
to: moment(),
event: 'Launch',
unit: 'month',
type: 'average'
}, {dataType:'json'}
).done(function(data){
var finalMonth = data['data']["values"]["Launch"]
var key = _.keys(finalMonth)[0]
var finalMonthData = Math.round(finalMonth[key],2)
var circle = $('.app-launches > .numberCircle')
circle.text(finalMonthData.toString())
});
var totalsQuery = MP.api.events('Launch', {
unit: 'month'
}).done(function(data){
var key = _.keys(data.values())[0]
var launchData = data.values()[key]
/* Find the final Month*/
var finalMonth = _.sortBy(_.keys(launchData))[_.keys(launchData).length -1]
var finalMonthData = launchData[finalMonth]
var circle = $('.avg-monthly-visits > .numberCircle')
circle.text(finalMonthData.toString())
});
/* AVG Logins per user */
var avgLogins = MP.api.query('/api/2.0/segmentation/', {
from: moment().subtract(1, 'months'),
to: moment(),
event: 'LoginSuccess',
unit: 'month',
type: 'average'
}, {dataType:'json'}
).done(function(data){
var finalMonth = data['data']["values"]["Launch"]
var key = _.keys(finalMonth)[0]
// var finalMonthData = Math.round(finalMonth[key],2)
var circle = $('.avg-logins > .numberCircle')
circle.text("0");
});
/* Daily Visits */
var dailyParams = {
type: 'general',
unit: 'day',
interval: 30
};
MP.api.events('Launch', dailyParams).done(function(results) {
/* Add Title to Chart */
var data = results.values();
var lineChart = $('.daily-users').MPChart({chartType: 'line', highchartsOptions: {
tooltip: {
backgroundColor: '#fffce7'
}
}});
lineChart.MPChart('setData', data);
});
/* Unique Users per Month */
var params = {
type: 'unique',
unit: 'month',
interval: 10
};
MP.api.events('Launch', params).done(function(results) {
var data = results.values();
var lineChart = $('.unique-users').MPChart({chartType: 'line', highchartsOptions: {
tooltip: {
backgroundColor: '#fffce7'
}
}});
lineChart.MPChart('setData', data);
});
/* Visits By Region */
var regionParams = {
type: 'general',
unit: 'month',
};
MP.api.segment('Launch', '$region', regionParams).done(function(results) {
/* Add Title to Chart */
var data = results.values();
var barChart = $('.visits-region').MPChart({chartType: 'bar', highchartsOptions: {
tooltip: {
backgroundColor: '#fffce7'
}
}});
barChart.MPChart('setData', data);
});
/* Android vs iOS */
/* Visits By Region */
var regionParams = {
type: 'general',
unit: 'month',
};
MP.api.segment('Launch', '$os', regionParams).done(function(results) {
/* Add Title to Chart */
var data = results.values();
var barChart = $('.android-ios').MPChart({chartType: 'bar', highchartsOptions: {
tooltip: {
backgroundColor: '#fffce7'
}
}});
barChart.MPChart('setData', data);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment