Verwenden von Google ChartRangeFilter mit Keen IO

Question

Ich hoffe, einen Weg zu finden, mit Google Keen's Visualisierung Bibliothek ChartRangeFilter (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter) von Google Chart zu integrieren. Der Abschnitt in Keens Dokumenten (https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart) in Bezug auf Liniendiagramme scheint keine Diagramm-Wrapper oder -Steuerelemente zu bieten.

Kurz gesagt, gibt es eine Möglichkeit, ein Liniendiagramm mit einem ChartRangeFilter mit Keen aus der Box zu rendern? Oder müsste ich nach den Rohdaten fragen und die Charts für mich selbst machen?

Answer 1

Wenn Sie sich den Beispielcode und die Google-Kartenanweisungen von https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards ansehen, müssen Sie den Code von Google in den Diagrammabschnitt einbinden, nachdem Ihr Ergebnis von Keen berechnet wurde.

Sie werden zunächst Ihre Daten vorbereiten (in Ihrem Fall das von Keen IO zurückgegebene Datenergebnis), dann ein Dashboard erstellen und schließlich die Komponenten (einschließlich chartRangeFilter) zeichnen/rendern. Das Zeichnen des Bereichsfilters für das Diagramm ist eine Änderung an der vorhandenen Visualisierung, die mit Keen IO grafisch dargestellt werden kann.

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

Hier ist ein Link zu einer JavaScript-Geige, die diesen Code ausgeführt wird und zeigen das Keen Analyseergebnis zusammen mit dem Entfernungsmesser Komponente Google gemacht wird: http://jsfiddle.net/kuqod2ya/4/

dieses Codebeispiel wird die neuesten keen-analysis.js & keen-dataviz.js-Bibliotheken. Für den Zugriff auf das Google-Diagramm sind zusätzliche Optionen wie loader.js verfügbar.