Использование Google ChartRangeFilter с Keen IO

// Load the Google Visualization API and the controls package.
google.charts.load('current', {packages:['corechart', 'table', 'gauge', 'controls']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(init);

function init(){
  client
  //Run your Keen Query/Analysis Call 
  .query('count', {
      event_collection: 'add_to_carts',
      timeframe: {
        start: '2016-09-01',
        end: '2016-09-12'
      },
      interval: 'hourly',
      timezone: 'US/Pacific'
      //group_by: 'product_name'
  })
  .then(function(res){
  	var chart = new Dataviz()
    	.data(res)

    drawDashboard(chart.data());
  })
  .catch(function(err){
    console.log('err');
  });
}

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard(keenDataTable) {

  // Create our data table.
  var data = google.visualization.arrayToDataTable(keenDataTable);

  // Create a dashboard.
  var dashboardEl = document.getElementById('dashboard_div');
  var dashboard = new google.visualization.Dashboard(dashboardEl);

  // Create a range slider, passing some options
  var chartRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
	    'filterColumnIndex': 1,
      'ui': {
          'chartType': 'LineChart',
          'chartOptions': {
            'chartArea': {'height': '20%', 'width': '90%'},
            'hAxis': {'baselineColor': 'none'}
          }
      }
  	}
  });

  // Create a pie chart, passing some options
  var lineChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {
         // Use the same chart area width as the control for axis alignment.
        'chartArea': {'height': '80%', 'width': '90%'},
        'hAxis': {'slantedText': false},
        'vAxis': {'viewWindow': {'min': 0, 'max': 50}},
        'legend': {'position': 'none'}
    }
  });

  // Establish dependencies, declaring that 'filter' drives 'lineChart',
  // so that the chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(chartRangeSlider, lineChart);

  // Draw the dashboard.
  dashboard.draw(data);