CODEWITHSUNDEEP
javascriptkeen-io
ishanbakshi
ishanbakshi

Reputation: 1965

How to call multiple collections of Keen IO for a single graph?

Can I call multiple collections of Keen IO for a single visualization 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 graph which shows "total order price for every week" and "total adjustment price for every week". Weeks along x-axis and price on y-axis. Orders and adjustment price in different colors.

Can I make a nested call to Keen IO like this?

client.run(query1, function(){
.....
   client.run(query2, function(){
   }
}

Upvotes: 3

Views: 1052

Answers (2)

Michelle Wetzler
Michelle Wetzler

Reputation: 734

I thought it might also be helpful to share a code sample that results in visualization which combines queries from two collections, like this:

// 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 an image of the chart here: https://github.com/keen/keen-js/blob/master/docs/visualization.md#combine-two-line-charts

Upvotes: 4

terrhorn
terrhorn

Reputation: 510

keen-js supports passing an array of queries to client.run() as outlined in this example. Your setup could look something like:

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 understanding that the results of the queries are returned in an array in the same order as the array passed to client.run() via the response variable (or this.data if you prefer). The result of the first query in your array is returned as response[0], the second response[1], and so on and so forth. Likewise with this.data, you'd use this.data[0] and this.data[1].

The chart shown in the example is a line chart, but could just as easily be configured to be displayed as a bar chart via the chartType property.

Upvotes: 5

Related Questions