Utilisation de Google ChartRangeFilter avec Keen IO

Question

J'espère trouver un moyen, en utilisant la bibliothèque de visualisation de Keen, d'intégrer ChartRangeFilter (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter) de Google Chart. La section docs Keen (https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart) liés aux cartes de ligne ne semble pas se permettre des enveloppes de tableau ou des contrôles.

En bref, est-il un moyen de rendre un graphique en ligne avec un ChartRangeFilter en utilisant Keen hors de la boîte? Ou devrais-je demander les données brutes et faire de la représentation cartographique pour moi-même?

Answer 1

En regardant l'exemple de code et les instructions du diagramme de Google au https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards, vous devez combiner le code de Google dans la partie graphique après que votre résultat a été calculé à partir de Keen.

Vous allez d'abord préparer vos données (dans votre cas, en utilisant le résultat renvoyé par Keen IO), puis créer un tableau de bord, puis dessiner/rendre les composants (y compris le chartRangeFilter). Dessin du filtre de gamme pour le graphique est une modification de la visualisation existante qui peut être avec Keen IO représentée graphiquement.

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

Voici un lien vers un violon JavaScript qui exécute ce code et affiche le résultat de l'analyse Keen étant rendu avec le composant de positionnement de gamme Google: http://jsfiddle.net/kuqod2ya/4/

Cet échantillon code utilise le plus récent keen-analysis.js & bibliothèques keen-dataviz.js. Pour accéder aux options supplémentaires de Google Chart, consultez loader.js.