kohiomobz/davitaDashboard.js

## 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>
	<!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>