Skip to content

Instantly share code, notes, and snippets.

@dustinlarimer

dustinlarimer/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Save dustinlarimer/863a97a3fa19751831cb to your computer and use it in GitHub Desktop.
Save dustinlarimer/863a97a3fa19751831cb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Gist for Keen IO JS Library</title>
<script src="http://d26b395fwzu5fz.cloudfront.net/3.0.0/keen.min.js"></script>
<script>
var client = new Keen({
projectId: "5368fa5436bf5a5623000000",
readKey: "3f324dcb5636316d6865ab0ebbbbc725224c7f8f3e8899c7733439965d6d4a2c7f13bf7765458790bd50ec76b4361687f51cf626314585dc246bb51aeb455c0a1dd6ce77a993d9c953c5fc554d1d3530ca5d17bdc6d1333ef3d8146a990c79435bb2c7d936f259a22647a75407921056"
});
Keen.ready(function() {
// Create a new query
var pageviews_timeline = new Keen.Query("count", {
eventCollection: "pageviews",
interval: "hourly",
timeframe: {
start: "2014-05-04T00:00:00.000Z",
end: "2014-05-05T00:00:00.000Z"
}
});
var pageviews_total = new Keen.Query("count", {
eventCollection: "pageviews",
timeframe: {
start: "2014-05-04T00:00:00.000Z",
end: "2014-05-05T00:00:00.000Z"
}
})
// Calculate and visualize deltas
client.run(pageviews_timeline, function(response){
var chart, deltas = [];
// Loop over each record and build a modified value
Keen.utils.each(response.result, function(record, index){
var copy = JSON.parse(JSON.stringify(record)), // ugly, but effective
decimals = 0,
infinites = 100, // Value to swap in for "Infinity" (0 -> N increase)
previous = (index > 0) ? response.result[index-1].value : record.value,
delta = (record.value/previous - 1) * 100,
formatted = parseFloat(delta.toFixed(decimals));
deltas.push(copy);
deltas[index].value = (isFinite(formatted)) ? formatted : infinites;
});
// Build a chart with the new data set
chart = new Keen.Visualization({ result: deltas }, document.getElementById("chart1"), {
chartType: "columnchart",
title: "Delta in pageviews over 24 hours",
height: 250,
width: "auto",
chartOptions: {
legend: { position: "none" },
bar: {
groupWidth: "90%"
},
chartArea: {
left: "5%",
width: "80%"
},
isStacked: true
}
});
});
// Cumulative Increment
client.run(pageviews_timeline, function(response){
var chart, total = 0;
// Loop over each record and modify the value
Keen.utils.each(response.result, function(record, index){
record.value = total += record.value;
});
// Build a chart with the modified data set
chart = new Keen.Visualization(response, document.getElementById("chart2"), {
chartType: "columnchart",
title: "Cumulative pageviews over 24 hours",
height: 250,
width: "auto",
chartOptions: {
legend: { position: "none" },
bar: {
groupWidth: "90%"
},
chartArea: {
left: "5%",
width: "80%"
}
}
});
});
// Percentage of total
client.run([pageviews_timeline, pageviews_total], function(response){
var decimals = 2,
series = response[0],
total = response[1];
// Loop over each record and modify the value
Keen.utils.each(series.result, function(record, index){
var diff = record.value/total.result * 100;
record.value = parseFloat(diff.toFixed(decimals));
});
// Build a chart with the modified data set
chart = new Keen.Visualization(series, document.getElementById("chart3"), {
chartType: "areachart",
title: "Interval count as percentage of total",
height: 250,
width: "auto",
chartOptions: {
legend: { position: "none" },
chartArea: {
left: "5%",
width: "80%"
},
isStacked: true
}
});
});
});
</script>
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment