Difference in values at each interval in a series (keen-dataviz.js)

Append a new series showing the difference in values at each interval

HTML

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

JavaScript

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

// Create and configure the chart instance
var chart = new Dataviz()
  .el('#chart')
  .title('Difference in values at each interval in a series')
  .height(300)
  .chartOptions({
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          count: 6,
          format: '%Y-%m-%d'
        }
      }
    },
    point: {
      show: false
    }
  })
  .type('line')
  .prepare();

// Compute the query with keen-analysis.js
client
  .query('count', {
    event_collection: "user_action",
    group_by: "offline",
    timeframe: {
      start: "2013-12-01",
      end: "2015-02-01"
    },
    interval: "weekly"
  })
  .then(function(res) {
    // Handle the result
    chart
      .data(res)
      .call(function() {
        var highlight = this.colors()[1];
        const res = {}
        this.dataset.appendColumn("difference", function(row) {
          return row[2] - row[1];
        });
        // Highlight new series
        this.colors(["#ccc", "#000", highlight]);
      })
      .render();
  })
  .catch(function(err) {
    // Handle the error
    chart
      .message(err.message);
  });