Graph two query results on one line chart (keen-dataviz.js)

Append a new series showing the result of a second query. This technique requires that both queries use the exact same timeframe and interval parameters.

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/keen-analysis-1.2.2.js"></script>
<link rel="stylesheet" href="https://d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.1.3.css">
<script src="https://d26b395fwzu5fz.cloudfront.net/keen-dataviz-1.1.3.js"></script>
<div id="chart"></div>

JavaScript

var client = new Keen({
  projectId: "53eab6e12481962467000000",
  readKey: "d1b97982ce67ad4b411af30e53dd75be6cf610213c35f3bd3dd2ef62eaeac14632164890413e2cc2df2e489da88e87430af43628b0c9e0b2870d0a70580d5f5fe8d9ba2a6d56f9448a3b6f62a5e6cdd1be435c227253fbe3fab27beb0d14f91b710d9a6e657ecf47775281abc17ec455"
});

var q1 = new Keen.Query("count", {
  event_collection: "user_action",
  timeframe: {
    start: "2011-12-01",
    end: "2015-02-01"
  },
  interval: "weekly"
});

var q2 = new Keen.Query("count", {
  event_collection: "purchases",
  timeframe: {
    start: "2013-12-01",
    end: "2015-02-01"
  },
  interval: "weekly"
});

var chart = new Keen.Dataviz({showLoadingSpinner: true})
  .el('#chart')
  .title('Title')
  .height(300)
  .type("line")
  .prepare();

client.run([q1, q2], function(err, res) {
  chart
    .data(res[0])
    .labelMapping({
      'Result': 'User Actions'
    })
    .call(function() {
      var ds2 = Keen.Dataset.parser('interval')(res[1]);
      this.dataset.appendColumn('Purchases', ds2.selectColumn(1).slice(1));
    })
    .render();
});