Percentage of all intervals in a series

Visualize each interval as a percent of the series total

HTML

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

JavaScript

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

var chart = new Dataviz()
	.el(document.getElementById("chart"))
  .title('Title')
  .height(300)
  .chartOptions({
      axis: {
          x: {
              type: 'timeseries',
              tick: {
                  count: 6,
                  format: '%Y-%m-%d'
              }
          },
          y: {
              label: "Total actions"
          },
          y2: {
              show: true,
              label: "Percent of total"
          }
      },
      data: {
        axes: {
          'Result': 'y',
          '% of Total': 'y2'
        }
      }
  })
  .type('area')
	.prepare();

client
  .query('count', {
        event_collection: "user_action",
        timeframe: {
  					start: "2013-12-01",
  					end: "2015-02-01"
				},
        interval: "every_21_days"
    })
  .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);
  		});