使用Google ChartRangeFilter和Keen IO

我希望能找到一種方法，使用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）中與折線圖相關的部分似乎無法提供任何圖表包裝或控件。使用Google ChartRangeFilter和Keen IO

總之，有沒有什麼方法可以使用Keen開箱即可使用ChartRangeFilter繪製折線圖？或者我需要索取原始數據併爲自己做圖表嗎？

來源

2016-09-16 kyzarky

您需要手動將它們掛鉤 - 當ChartRangeFilter更改時，使用getDataTable方法獲取數據並重繪Keen折線圖 - 但爲何不只是在谷歌儀表板中使用谷歌折線圖？ – WhiteHat

看看示例代碼和谷歌圖表的說明，從https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards您需要將來自Google的代碼組合到您的結果從Keen計算後的圖表部分。

您將首先準備好您的數據（在您的情況下，使用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);

下面就來運行這個代碼，並顯示了敏銳的分析結果與谷歌測距儀組成部分一起被渲染的一個JavaScript小提琴鏈接： http://jsfiddle.net/kuqod2ya/4/

此代碼示例使用最新的keen-analysis.js & keen-dataviz.js庫。要訪問Google圖表，其他選項包括loader.js。

來源

2017-01-12 00:59:09

使用Google ChartRangeFilter和Keen IO

回答

相關問題