How to generate a line chart for conversion analysis with Keen IO
<script type="text/javascript" charset="utf-8">
// Global Properties for Line Chart Viz
var chartHeight = 400
var chartWidth = 600
var lineWidth = 3
var chartAreaWidth = "60%"
var chartAreaLeft = "10%"
var xAxisLabelAngle = "45%"
Keen.onChartsReady(function() { // The onChartsReady function draws charts as soon as the page is loaded.
var daysInChart = 10 // Number of days in your line chart
var step1CollectionName = "user_created"
var step2CollectionName = "user_play"
var actorProperty = "player_id"
var retentionPeriod = 1 // Number of days to use for retention analysis (E.g. D7 Retention (T-7 installs return T0) has a retention value of 7) aka DaysSinceFirstPlay. A retentionPeriod of 1 means the number of people who did step2 in the 24hour period after their step1 activity.
calculateRetention(daysInChart, step1CollectionName, step2CollectionName, retentionPeriod, actorProperty, "chart1A")
// calculateRetention(daysInChart, step1CollectionName, step2CollectionName, 3, actorProperty, "chart1B")
// calculateRetention(daysInChart, step1CollectionName, step2CollectionName, 7, actorProperty, "chart1C")
});
function calculateRetention(daysInChart, step1CollectionName, step2CollectionName, retentionPeriod, actorProperty, div) {
var dataForLineChart = []
var i = 0
while (i < daysInChart) {
// Funnel steps used for calculating retention
var firstStepDate = new Date();
firstStepDate.setDate(firstStepDate.getDate() - daysInChart - retentionPeriod + i)
firstStepDate.setHours(0,0,0)
var firstStepDateEnd = new Date(firstStepDate)
firstStepDateEnd.setDate(firstStepDateEnd.getDate() + 1)
var secondStepDate = new Date(firstStepDate);
secondStepDate.setDate(firstStepDate.getDate())
// The start timeframe for step 2 is now the same as step 1
var secondStepDateEnd = new Date(secondStepDate)
secondStepDateEnd.setDate(secondStepDateEnd.getDate() + retentionPeriod + 1)
// The end timeframe for step 2 is the the now a 24hr window
var s1 = new Keen.Step(step1CollectionName, {
timeframe: {start: firstStepDate, end: firstStepDateEnd}
});
var s2 = new Keen.Step(step2CollectionName, {
timeframe: {start: secondStepDate, end: secondStepDateEnd}
});
//Instantiate a new Keen.Funnel for those steps.
var myFunnel = new Keen.Funnel([s1, s2], {
actorProperty: actorProperty
});
myFunnel.getResponse(function(response){
var percentage = response.result[1]/response.result[0]
dataForLineChart.push({
"value" : percentage,
"timeframe" : {
"start" : response.steps[1].timeframe["start"],
"end" : response.steps[1].timeframe["end"]
}
})
if (dataForLineChart.length == daysInChart) {
var title = "D" + retentionPeriod + " Retention"
// Need to sort data for line chart!
dataForLineChart.sort(function(x, y){
date1 = new Date(x.timeframe["start"]);
date2 = new Date(y.timeframe["start"]);
return date1 - date2;
})
drawMyLineChart(dataForLineChart, "daily", div , title)
}
});
i++
}
}
function drawMyLineChart(data, interval, div, title) {
// The final formatting required so that the result can be processed by the Keen.MultiLineChart draw method.
var formattedResult = {
result: data
}
// Create a Series object so that it can be referenced by the draw method.
// This is kind of a hack since we are passing in our own result object and not really querying the collection specified here.
// The "placeholder" is used instead of a collection name, since this is not used.
var placeholderSeries = new Keen.Series("placeholder", {
interval: interval
})
var placeholderLineChart = new Keen.LineChart(placeholderSeries, {
height: chartHeight,
width: chartWidth,
lineWidth: lineWidth,
chartAreaWidth: chartAreaWidth,
chartAreaLeft: chartAreaLeft,
title: title,
// colors: colors,
showLegend: false,
xAxisLabelAngle: xAxisLabelAngle
});
placeholderLineChart.draw(document.getElementById(div), formattedResult);
}
</script>