Percentage of all intervals in a series (keen-dataviz.js)

Visualize each interval as a percent of the series total

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('Percentage of all intervals in a series')
  .height(300)
  .stacked(true)
  .chartOptions({
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          count: 6,
          format: '%Y-%m-%d'
        }
      },
      y: {
        label: "Total actions"
      }
    },
   
  })
  .type('bar')
  .prepare();

// Compute the query with keen-analysis.js
client
  .query('count', {
    event_collection: 'purchases',
    timeframe: {
      start: "2014-02-02T00:00:00.000-00:00",
      end: "2014-03-01T00:00:00.000-00:00"
    },
    group_by: [
      "user.address.state"
    ],
    interval: "weekly"
  })
  .then(function(res) {
    // Handle the result
    chart
      .data(res)
      .call(function() {
        var sum = this.dataset.sum(this.dataset.selectColumn(1));
        this.dataset.appendColumn("% of Total", function(row) {
          var perc = row[1] / sum * 100;
          return perc.toFixed(2);
        });
        this.colors(["#ccc", this.colors()[3]]);
      })
      .render();
  })
  .catch(function(err) {
    // Handle the error
    chart
      .message(err.message);
  });