Skip to content

Instantly share code, notes, and snippets.

@dustinlarimer

dustinlarimer/histogram.html

Last active June 7, 2017 16:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dustinlarimer/6b928c48abf803109ede to your computer and use it in GitHub Desktop.
Save dustinlarimer/6b928c48abf803109ede to your computer and use it in GitHub Desktop.
Download ZIP
Make histograms with keen-js v3
Raw
histogram.html
<!DOCTYPE html>
<html>
<head>
<title>Keen IO &#9829; Histograms!</title>
</head>
<body>
<div id="histogram"></div>
<script src="http://d26b395fwzu5fz.cloudfront.net/latest/keen.min.js"></script>
<script>
!function(){
var PROJECT_ID = "your_project_id"
, READ_KEY = "your_read_key"
, EVENT_COLLECTION = "user_action"
, TARGET_PROPERTY = "enviro_sensors.temp"
, NUM_SAMPLES = 10;
// Configure your project client
var project = new Keen({
projectId: PROJECT_ID,
readKey: READ_KEY
});
// Generate N queries
var queries = [];
for (var i = 0; i < NUM_SAMPLES; i++) {
queries.push(new Keen.Query("percentile", {
eventCollection: EVENT_COLLECTION
, targetProperty: TARGET_PROPERTY
, percentile: i*(100/NUM_SAMPLES)
}));
}
// Because otherwise yuck
var google_options = {
bar: { groupWidth: "95%" },
chartArea: { width: "90%" },
hAxis: {title: "Percentile" },
legend: { position: "none" }
};
// Run all queries together
project.run(temp_queries, function(res){
Keen.utils.each(res, function(response, i){
// Modify result to mirror a single interval query response.. tricky!
res[i]["label"] = String((+i)*(100/NUM_SAMPLES) + "%");
// check it out
// console.log( (+i)*(100/NUM_SAMPLES) + "%", "|", response.result );
});
new Keen.Visualization({ result: res }, document.getElementById("histogram"), {
library: "google"
, chartType: "columnchart"
, chartOptions: google_options
, title: "Distribution of Temperature"
, height: 240
, width: "auto"
});
});
}();
</script>
</body>
</html>
@brandonmwest
Copy link

I think you've got a small error on L43, temp_queries not defined. thanks for this snippet!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment