Google ChartRangeFilterをKeen IOで使用する

Question

私はKeenの視覚化ライブラリを使用して、Google ChartのChartRangeFilter（https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter）を統合する方法を見つけたいと考えています。折れ線グラフに関連するKeenのドキュメント（https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart）のセクションでは、チャートのラッパーやコントロールを用意する余裕がないようです。

要するに、Keenをそのまま使用してChartRangeFilterで折れ線グラフをレンダリングする方法はありますか？それとも、生データを求めて自分でチャートを作成する必要がありますか？

Answer 1

https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboardsからサンプルコードとGoogleグラフの指示を見ると、結果がKeenから計算された後にGoogleのコードをチャートの部分に組み合わせる必要があります。

まず、あなたのデータを準備し（あなたのケースでは、Keen IOから返されたデータ結果を使用）、ダッシュボードを作成し、最後にコンポーネント（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){ 
 
    \t var chart = new Dataviz() 
 
    \t .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': { 
 
\t  'filterColumnIndex': 1, 
 
     'ui': { 
 
      'chartType': 'LineChart', 
 
      'chartOptions': { 
 
      'chartArea': {'height': '20%', 'width': '90%'}, 
 
      'hAxis': {'baselineColor': 'none'} 
 
      } 
 
     } 
 
    \t } 
 
    }); 
 

 
    // 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);

ここでは、このコードを実行すると、Googleのレンジファインダ成分と一緒にレンダリングされているキーンの分析結果を示しているJavaScriptのフィドルへのリンクです： http://jsfiddle.net/kuqod2ya/4/

このコードサンプルは、用途最新のkeen-analysis.js & keen-dataviz.jsのライブラリ。 Google Chartにアクセスするには、loader.jsなどの追加オプションが必要です。