How do I call multiple Keen IO collections for one graph?
Is it possible to call multiple Keen IO collections for one render graph?
Let's say I have a collection named orders
:
{
"order_number": "dfdfd2323",
"order_price": 21.00,
}
And I have another collection named adjustments
:
{
"adjustment_id": "34ss3432",
"adjustment_price": 2.00,
}
Now I want to display a bar chart that shows the "total order price for each week" and the "total adjustment price for each week". Weeks along the x-axis and price along the Y-axis. Orders and price adjustments in different colors.
Is it possible to make a nested call to Keen IO this way?
client.run(query1, function(){
.....
client.run(query2, function(){
}
}
source to share
keen-js supports passing an array of requests client.run()
as described in this example . Your installation might look something like this:
var orders = new Keen.Query("sum", {
eventCollection: "orders",
targetProperty: "order_price",
interval: "weekly",
timeframe: "this_month"
});
var adjustments = new Keen.Query("sum", {
eventCollection: "adjustments",
targetProperty: "adjustment_price",
interval: "weekly",
timeframe: "this_month"
});
client.run([orderTotals,priceAdjustments],function(response) {
var orderTotals = response[0].result;
var adjustmentTotals = response[1].result;
// code that draws the chart
}
The trick is to understand that query results are returned in an array in the same order as the array passed to client.run()
via a variable response
(or this.data
if you prefer). The result of the first query in your array is returned as response[0]
, the second response[1]
, etc. Etc. Likewise this.data
, you must use this.data[0]
and this.data[1]
.
The chart shown in the example is a line chart, but it can be easily configured as a graphical chart via a property chartType
.
source to share
I thought it would be helpful to share a sample of code that will result in a render that combines queries from two collections, for example:
// use a variable to ensure timeframe & interval for both queries match
var interval = "daily"
var timeframe = "last_30_days"
var pageviews = new Keen.Query("count", { // first query
eventCollection: "pageviews",
interval: interval,
timeframe: timeframe
});
var uniqueVisitors = new Keen.Query("count_unique", { // second query
eventCollection: "pageviews",
targetProperty: "uuid",
interval: interval,
timeframe: timeframe
});
var chart = Keen.Dataviz()
.chartType("linechart")
.chartOptions({
hAxis: {
format:'MMM d',
gridlines: {count: 12}
}
})
.prepare();
client.run([pageviews, uniqueVisitors], function(response){ // run the queries
var result1 = response[0].result // data from first query
var result2 = response[1].result // data from second query
var data = [] // place for combined results
var i=0
while (i < result1.length) {
data[i]={ // format the data so it can be charted
timeframe: result1[i]["timeframe"],
value: [
{ category: "Pageviews", result: result1[i]["value"] },
{ category: "Visitors", result: result2[i]["value"] }
]
}
if (i == result1.length-1) { // chart the data
chart
.parseRawData({ result: data })
.render();
}
i++;
}
});
You can see a picture of the diagram here: https://github.com/keen/keen-js/blob/master/docs/visualization.md#combine-two-line-charts
source to share