Using Google ChartRangeFilter with Keen IO - google-visualization

Question

I'm hoping to find a way, using Keen's visualization library, to integrate Google Chart's ChartRangeFilter (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter). The section in Keen's docs (https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart) related to line charts doesn't seem to afford any chart wrappers or controls.
In short, is there any way to render a line chart with a ChartRangeFilter using Keen out of the box? Or would I have to ask for the raw data and do the charting for myself?

Answer 1

Looking at the sample code and Google chart's instructions from https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards you'll need to combine code from Google into the charting portion after your result is computed from Keen.
You will first prepare your data (in your case, using the data result returned from Keen IO), then create a dashboard, and lastly draw/render the components (including the chartRangeFilter). Drawing the range filter for the chart is a modification to the existing visualization that can be graphed with 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);
Here's a link to a JavaScript fiddle that runs this code and shows the Keen analysis result being rendered along with the Google range finder component:
http://jsfiddle.net/kuqod2ya/4/
This code sample uses the newest keen-analysis.js & keen-dataviz.js libraries. To access the Google Chart additional options include loader.js.