Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This gist uses Keen IO conversion funnels to generate a line chart showing conversion over time. In this example we'll chart the number of video viewing sessions that make it past the 50% mark in the video.
Keen.onChartsReady(function() {
var dataPointsInChart = 7 // Number of days in your line chart
calculateConversionTrend(dataPointsInChart, "conversionLineChart")
function calculateConversionTrend(dataPointsInChart, div) {
var dataForLineChart = []
var i = 0
while (i < dataPointsInChart) {
// Start & end date for each data point in the chart
var startDate = new Date();
startDate.setDate(startDate.getDate() - dataPointsInChart + i) // for weekly analysis use dataPointsinChart*7 and i*7
startDate.setHours(0, 0, 0)
var endDate = new Date(startDate)
endDate.setDate(endDate.getDate() + 1) // for weekly analysis use "+ 7"
// Funnel steps used for calculating conversion. The number that made it to step 2 divided by the number in step 1 will give you the conversion percentage for that time period. E.g. 25% of viewing sessions made it past 50%.
var step1 = new Keen.Step("progress", { // Raw number of sessions for this video
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, ],
timeframe: {
start: startDate,
end: endDate
}
});
var step2 = new Keen.Step("progress", { // Sessions that made it to 50%
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, {
property_name: "progress",
operator: "eq",
property_value: 50
}],
timeframe: {
start: startDate,
end: endDate
}
});
//Instantiate a new Keen.Funnel for those steps.
var myFunnel = new Keen.Funnel([step1, step2], {
actorProperty: "session.id"
});
myFunnel.getResponse(function(response) { // Run the funnel query
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 == dataPointsInChart) {
var title = "Percentage of sessions that make it past 50%"
// 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, {
title: title,
showLegend: false,
});
placeholderLineChart.draw(document.getElementById(div), formattedResult);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment