Skip to content

Instantly share code, notes, and snippets.

@wetzler
Last active December 24, 2015 14:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wetzler/6816497 to your computer and use it in GitHub Desktop.
Save wetzler/6816497 to your computer and use it in GitHub Desktop.
Here's how you can get query results for two Keen IO series, in parallel, and then combine them in one multiline chart.I really want to rewrite this to run N queries at a time, but this works for now.
Keen.configure({
projectId: id,
readKey: key
});
// Timeframe parameters for queries
var timeframe = "last_14_days"
var interval = "daily"
Keen.onChartsReady(function(){
// ==================================================
// Create Signups Over Time Combined Multi-Line Chart
// ==================================================
var newOrgsSeries = new Keen.Series("create_organization", { // First line in the line chart
analysisType: "count",
interval: interval,
timeframe: timeframe,
});
var newOrgsFromPartnersSeries = new Keen.Series("create_organization", { // Second line in the line chart
analysisType: "count",
interval: interval,
timeframe: timeframe,
filters: [{"property_name":"partner","operator":"eq","Heroku"}]
});
makeTwoLineSeriesChart(newOrgsSeries, "Total", newOrgsFromPartnersSeries, "Heroku", interval, "newOrgs")
});
function makeTwoLineSeriesChart(series1, series1label, series2, series2label, interval, div){
var combinedResultArray = [] // variable to store results from various queries
var result1 = null // Create variables for holding query results
var result2 = null
series1.getResponse(function(response) { // Get the values for the first query
result1 = response.result
combineResults()
});
series2.getResponse(function(response){ // Get the values for the second Series query
result2 = response.result
combineResults()
});
function combineResults() {
if ((result1 != null) && (result2 != null)) {
i = 0
while (i < result1.length)
{
combinedResultArray[i]={
timeframe: result1[i]["timeframe"],
value: [{ category: series1label, result: result1[i]["value"] },
{ category: series2label, result: result2[i]["value"] }]
}
i++;
}
drawMyMultiLineChart(combinedResultArray, "category", interval, div)
}
else {
// do nothing
}
}
}
function drawMyMultiLineChart(data, groupBy, interval, div) {
// 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,
groupBy: groupBy
})
var myMultiLineChart = new Keen.MultiLineChart(placeholderSeries, {
chartWidth: 700,
xAxisLabelAngle: "45%",
colors: ["#00afd7","#f35757"]
})
myMultiLineChart.draw(document.getElementById(div),formattedResult);
}
@LeeXGreen
Copy link

I had to change lines 83-87 to read as follows:

            var myMultiLineChart = new Keen.MultiLineChart(placeholderSeries, {
                chartWidth: 700,
                xAxisLabelAngle: "45%",
                colors:  ["#268bd2", "#dc322f"] // choose your colors, of course
            })

@wetzler
Copy link
Author

wetzler commented Jan 27, 2014

Thanks Lee -- fixed :)

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