Skip to content

Instantly share code, notes, and snippets.

@wetzler
Last active August 29, 2015 13:57
Embed
What would you like to do?
Sample code for a simple dashboard that takes in a timeframe from a query string parameter. Allows viewer to easily modify the time period for all charts in the dashboard. Also shows the formula to see "Page Viewed Before Page X"!
<!DOCTYPE html>
<html lang='en'>
<head>
<script>
var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
// Configure the Keen Client
Keen.configure({
projectId: "<your project ID>",
readKey: "<your read key>"
});
var urlParams = {}; // Create object to store URL query params
(function () { // Get params and values from the URL
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
// Set a timeframe variable equal to the value provided in the query string
if (urlParams["timeframe1"] == null || urlParams["timeframe1"] == "") {
var timeframe = "last_24_hours" // Set a default in case no timeframe query param is provided
}
else {
var timeframe = urlParams["timeframe1"] // Create variable with friendly name for the timeframe value
}
Keen.onChartsReady(function(){ // Run Keen IO Queries and Draw Charts
// Data for the PieChart - Tells What Types of Signups Happened
var signupsByType = new Keen.Metric("signups", {
analysisType: "count",
groupBy: "type",
timeframe: timeframe, // use the variable timeframe from the query string
});
// Viz Settings for a PieChart
var signupsPieChart = new Keen.PieChart(signupsByType, {
height: 250,
width: 550,
chartAreaWidth: 550,
chartAreaLeft: 50,
title: "Signup Types (" + timeframe + ")",
font: "Helvetica Neue"
});
signupsPieChart.draw(document.getElementById("signup-types"));
// Data for the PieChart - Tells where visitors were before Signup Page
var signupViewsCameFrom = new Keen.Metric("pageviews", {
analysisType: "count",
groupBy: "referrer.relative",
filters: [{"property_name":"url.full","operator":"contains","property_value":"keen.io/signup"}], // We are only looking at the signup pageviews for this query
timeframe: timeframe, // use the variable timeframe from the query string
});
// Viz Settings for a PieChart
var signupViewsCameFromPieChart = new Keen.PieChart(signupViewsCameFrom, {
height: 250,
width: 550,
minimumSlicePercentage: 3,
chartAreaWidth: 550,
chartAreaLeft: 50,
title: "Page Viewed Before Signup Page (" + timeframe + ")",
font: "Helvetica Neue"
});
signupViewsCameFromPieChart.draw(document.getElementById("signup-views-came-from"));
});
</script>
</head>
<body>
<div id="signup-types"></div>
<div id="signup-views-came-from"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment