Analyzing DAU / MAU can be difficult since you are measuring 2 metrics which are based on different time periods. Through Mixpanel's custom reporting language JQL and custom reporting capabilities, such an analysis can be made and easily visualized. An example of a custom application which calculates DAU / MAU that can be copied into your Mixpanel project can be found below.
<!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="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.js"></script>
</head>
<body class="mixpanel-platform-body">
<div class="mixpanel-platform-section">
<div id="dateSelect" style="float: right;"></div>
<div id="eventSelect" style="float: left;"></div>
<div id="propSelect" style="float: left;"></div>
<div id="valSelect" style="float: left;"></div>
<div style="clear: both;"></div>
<b>DAU / MAU</b>
<div id="daumauGraph"></div>
<div style="clear: both;"></div>
<br>
</div>
<div id="daumauTable"></div>
<script>
var dateSelect = $('#dateSelect').MPDatepicker();
var revenueGraph = $('#revenueGraph').MPChart({chartType: 'line'});
var daumauGraph = $('#daumauGraph').MPChart({chartType: 'line'});
var revenueTable = $('#revenueTable').MPTable({
firstColHeader: 'Event'
});
var daumauTable = $('#daumauTable').MPTable({
firstColHeader: 'Event'
});
var eventSelect = $('#eventSelect').MPEventSelect();
var propertySelect = $('#propSelect').MPPropertySelect();
var valueSelect = $('#valSelect').MPSelect();
$('#propSelect').hide();
$('#valSelect').hide();
var params = {
from: null,
to: null,
event_selectors: []
}
var queryEvent = 'Log In';
params['event_selectors'] = [{ event: queryEvent }];
var runQuery = function() {
var dateRange = dateSelect.MPDatepicker('value');
var dateRange = dateSelect.MPDatepicker('value');
var dateRange = dateSelect.MPDatepicker('value');
params['from'] = dateRange.from.toISOString().substring(0,10);
params['to'] = dateRange.to.toISOString().substring(0,10);
console.log(params);
MP.api.jql(function main() {
return Events({
from_date: params.from,
to_date: params.to,
event_selectors: params.event_selectors
})
.groupByUser([event => new Date(event.time).toISOString().substring(0,10)], mixpanel.reducer.count())
.groupBy([item => item.key[1]], mixpanel.reducer.count())
}, params).done(function(results) {
console.log(results);
MP.api.jql(function main() {
return Events({
from_date: params.from,
to_date: params.to,
event_selectors: params.event_selectors
})
.groupByUser([event => new Date(event.time).toISOString().substring(0,7)], mixpanel.reducer.count())
.groupBy([item => item.key[1]], mixpanel.reducer.count())
}, params).done(function(uniques) {
console.log(uniques);
var daumauFinal = {};
daumauFinal['DAU/MAU'] = {};
for(i=0; i<results.length; i++) {
var index = 0;
for(z=0; z<uniques.length; z++) {
if(uniques[z]['key'][0] == results[i]['key'][0].substring(0,7)) {
index = z;
}
}
//console.log(uniques[index]);
daumauFinal['DAU/MAU'][results[i]['key'][0]] = results[i].value / uniques[index].value;
}
console.log(daumauFinal);
daumauGraph.MPChart('setData', daumauFinal);
daumauTable.MPTable('setData', daumauFinal);
})
});
};
dateSelect.on('change', runQuery);
eventSelect.on('change', function(e, newEvent) {
params['event_selectors'] = [{ event: newEvent }];
propertySelect = $('#propSelect').MPPropertySelect('setEvent', newEvent);
$('#propSelect').show();
runQuery();
});
propertySelect.on('change', function(e, property) {
MP.api.query('https://mixpanel.com/api/2.0/events/properties/values', {event: eventSelect.MPEventSelect('value'), name: property}).done(function(jsons) {
var dropdownItems = [];
for (var i = 0; i<jsons.length; i++){
dropdownItems.push({'value': jsons[i], 'label': jsons[i]});
valueSelect.MPSelect('initEl', {items: dropdownItems})
}
});
$('#valSelect').show();
})
valueSelect.on('change', function(e, value) {
params.event_selectors = [];
var selector = '(properties["' + propertySelect.val() + '"] == "' + value + '")';
params.event_selectors = [{'event': queryEvent, 'selector': selector}];
runQuery();
});
</script>
</body>
</html>
