Top X Results Table

Sort and filter results of a response, using a bar chart with the Google Charts adapter (default)

HTML

<script src="https://d26b395fwzu5fz.cloudfront.net/3.4.0/keen.js?date=2016-02-17"></script>
<div id="table"></div>

CSS

.google-visualization-table-th:first-child {
  text-align: left;
}
.google-visualization-table-th:last-child {
  text-align: right;
}

JavaScript

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

Keen.ready(function(){
    // Create a new Query instance
    var query = new Keen.Query("count", {
        event_collection: "user_action",
        group_by: "user.name",
        timeframe: {
  				start: "2013-12-01",
  				end: "2014-12-01"
				}
    });
    
    // Create a new Dataviz instance
    var table = new Keen.Dataviz()
    	.chartType('table')
      .el(document.getElementById('table'))
      .chartOptions({
        width: '100%'
      });
    
    // Run the query and the result
    client.run(query, function(err, res){
        table
        	.parseRequest(this)
          .call(function(){
          	// Rename the header row
            this.dataset.updateRow(0, function(value, index){
              return ['Player Name', 'Score'][index];
            });
            // Sort and filter results before rendering
            this.dataset.sortRows("desc", function(row){
              return row[1];
            });
            this.dataset.filteRows(function(row, index){
              return index < 11;
            });
          })
          .render();
    });
});