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

Я надеюсь найти способ, с помощью библиотеки визуализации Кина, интегрировать Google Chart в ChartRangeFilter (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter). Раздел в документах Кина (https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart), связанных с линейными диаграммами, по-видимому, не предоставляет никаких оберток или элементов диаграммы.Использование Google ChartRangeFilter с Keen IO

Короче говоря, есть ли способ визуализации линейной диаграммы с помощью ChartRangeFilter с использованием Keen из коробки? Или мне нужно будет запрашивать необработанные данные и делать диаграммы для себя?

источник

2016-09-16 kyzarky

вам нужно будет подключить их вручную - при изменении ChartRangeFilter, используйте 'метод getDataTable' для получения данных и перерисовки Keen диаграмму линии - но почему бы не просто использовать Google линейную диаграмму в панели инструментов Google? – WhiteHat

Если вы посмотрите код образца и инструкции Google, приведенные в таблице от https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards, вам нужно будет комбинировать код с 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);

Вот ссылка на скрипку JavaScript, который работает этот код и показывает Keen результат анализа, оказываемые вместе с компонентом дальномера Google: http://jsfiddle.net/kuqod2ya/4/

Этот пример кода изез новейшие keen-analysis.js & библиотеки keen-dataviz.js. Для доступа к Google Chart дополнительные параметры включают loader.js.

источник

2017-01-12 00:59:09

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

ответ

Смежные вопросы