Skip to content

Instantly share code, notes, and snippets.

@wetzler
Created February 26, 2014 23:29
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wetzler/9241017 to your computer and use it in GitHub Desktop.
Save wetzler/9241017 to your computer and use it in GitHub Desktop.
This gist shows you how to make a custom Keen IO funnel query using raw counts for each step (no actor property required)
Keen.onChartsReady(function(){
var visitors = new Keen.Metric("visited_form", {
analysisType: "count"
});
var formsStarted = new Keen.Metric("form_started", {
analysisType: "count"
});
var formsSubmitted = new Keen.Metric("form_submitted", {
analysisType: "count"
});
buildFunnel(visitors, "Visit the form", formsStarted, "Start the form", formsSubmitted, "Submit the form", "Application Form Completions")
});
function buildFunnel(metric1, label1, metric2, label2, metric3, label3, title) {
var results = []
metric1.getResponse(function(response) { // Get the count for the first step
results[0] = response.result
drawFunnel(results)
});
metric2.getResponse(function(response) { // Get the count for the second step
results[1] = response.result
drawFunnel(results)
});
metric3.getResponse(function(response) { // Get the count for the third step
results[2] = response.result
drawFunnel(results)
});
function drawFunnel(arrayOfSteps) {
if (results.length >= 3) {
var formattedResult =
{
"result":[
arrayOfSteps[0],
arrayOfSteps[1],
arrayOfSteps[2]
],
"steps":[
{
"event_collection": label1,
"actor_property":"none"
},
{
"event_collection": label2,
"actor_property":"none"
},
{
"event_collection": label3,
"actor_property":"none"
}
]
}
var s1 = new Keen.Step("placeholder");
var s2 = new Keen.Step("placeholder");
var s3 = new Keen.Step("placeholder");
var appFunnel = new Keen.Funnel([s1, s2, s3], {});
//Create a Funnel Chart visualization for that funnel.
var appFunnelChart = new Keen.FunnelChart(appFunnel, {
height: 300,
width: 900,
title: title,
color: "#00afd7" // "#afd700","#f35757","#d700af", "#6f79a2", "#d79400", "#43d700"
});
appFunnelChart.draw(document.getElementById("funnel"), formattedResult);
}
else {
console.log("waiting for more queries to finish")
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment