Dashboard di Google con filtri dai dati raggruppati - come cartografare i dati raggruppati

Question

Sto cercando di creare un cruscotto dell'API di Google charts con filtri, ma vorrei tracciare i dati in base ai dati raggruppati. Ad esempio, è possibile creare un datatable come questo:

salesman cust_age cust_sex quantity 
Joe  21  Male  3 
Joe  30  Female 10 
Suzie  40  Female 2 
Dave  15  Female 5 
Dave  30  Male  10 

posso opportunamente creare un cruscotto che crea due comandi (per cust_age e cust_sex) e qualsiasi numero di grafici uscita e tavoli tutti tirando da una sorgente dati esterna - Questo è piuttosto roba di magazzino, vedi http://code.google.com/apis/chart/interactive/docs/gallery/controls.html

Il problema che sto avendo è come mostrare tutti i grafici per valori raggruppati. Usando un grafico a torta come esempio, senza filtri ci sono 5 fette di torta (Joe, Joe, Suzie, Dave, Dave) - Mi piacerebbe vedere solo tre (Joe, Suzie Dave). Ovviamente, quando viene applicato un controllo, tutto dovrebbe essere aggiornato.

In altre parole, i filtri devono agire sul datatable originale, ma i grafici devono essere basati su un datatable raggruppato.

Direi che potremmo usare la funzione di raggruppamento: http://code.google.com/apis/ajax/playground/?type=visualization#group però io non riesco a legare i filtri per DataTable più grande, aggiornare la tabella raggruppata, e quindi disegnare i grafici basati sul tavolo raggruppate.

Qualche idea?

Answer 1

ho trovato una soluzione, è necessario utilizzare il chartWrapper senza il cruscotto, in modo da poter passare un DataTable come parametro:

var $pieChart = new google.visualization.ChartWrapper({ 
    'chartType': 'PieChart', 
    'containerId': 'pie_chart', 
    'options': { 
    'width': 300, 
    'height': 300, 
    }, 
    //group the data for the pie chart 
    'dataTable' : google.visualization.data.group($dataTable, [0], 
    [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]) 
}); 
$pieChart.draw(); 
$tableWrapper = new google.visualization.ChartWrapper({ 
    'chartType': 'Table', 
    'containerId': 'table_data' 
}); 
var $genderPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'gender_filter', 
    'options': { 
    'filterColumnIndex': '2', 
    'useFormattedValue' : true, 
    'ui': { 
     'allowTyping': false, 
     'allowMultiple': false, 
     'labelStacking': 'vertical' 
    } 
    }  
}); 
new google.visualization.Dashboard(document.getElementById('table_dashboard')). 
    bind([$genderPicker], [ $tableWrapper]). 
    draw($dataTable); 

Poi, si dovrebbe aggiungere un callback per i controlli in modo ogni volta che cambia il controllo del grafici al di fuori della plancia verrà aggiornato, come un manuale vincolante, supponiamo che il controllo per cust_sex è $ genderPicker e l'oggetto tabella ChartWrapper è $ tableWrapper:

google.visualization.events.addListener($genderPicker, 'statechange', 
function(event) { 
    // group the data of the filtered table and set the result in the pie chart. 
    $pieChart.setDataTable(google.visualization.data.group(
    // get the filtered results 
    $tableWrapper.getDataTable(), 
    [0], 
    [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}] 
)); 
    // redraw the pie chart to reflect changes 
    $pieChart.draw(); 
}); 

il risultato: ogni volta che si è scelto di sesso maschile, femminile o sia il grafico a torta che wil Riflico i risultati filtrati raggruppati per nome. Spero che aiuti qualcuno e mi dispiace per il mio inglese rotto.

Answer 2

Leggi questo thread: How to not display the data table (leggi almeno i primi due post - il resto è davvero importante solo se hai a che fare con insiemi di dati di grandi dimensioni).

Fondamentalmente, è necessario utilizzare un grafico intermedio (le tabelle sono una buona scelta, perché sono relativamente veloci da scrivere e renderizzare, con un ingombro di memoria inferiore rispetto alla maggior parte dei grafici) completamente nascosto agli utenti. È possibile associare il selettore di categoria a questo grafico nella dashboard. Quindi si imposta un gestore di eventi per l'evento "statechange" del raccoglitore che prende i dati, li raggruppa in un nuovo DataTable e disegna il PieChart in base ai dati raggruppati.

Answer 3

un altro modo per farlo è utilizzare l'evento "pronto" dell'oggetto dashboard, quindi creare un grafico o una tabella in base a un raggruppamento eseguito nella tabella principale del dashboard.

es:

//create datatable, filter elements and chart elements for the the dashboard then: 

dash=new google.visualization.Dashboard(document.getElementById(elId)); 
google.visualization.events.addListener(dash, 'ready', function() { 
     //redraw the barchart with grouped data 
     //console.log("redraw grouped"); 
     var dt=mainTable.getDataTable(); 
     var grouped_dt = google.visualization.data.group(
          dt, [0], 
          [{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}]); 

     var mainChart = new google.visualization.ChartWrapper({ 
       'chartType': 'ColumnChart', 
       'containerId': 'barChart', 
       'options': { 
       'height':500, 
       'chartArea':{'left':200} 
       }, 
       //view columns from the grouped datatable 
       'view': {'columns': [0, 1]}, 
       'dataTable':grouped_dt 
      }); 
     mainChart2.draw(); 
    }); 

dash.bind(
     [lots,of,filter,elements], 
     [lots,of,chart,elements] 
    ); 
dash.draw(data) 

Answer 4

Dopo un lungo R & D, ho trovato la soluzione fot questo problema.Per la correzione, ho usato due listener di eventi in cui uno è pronto eventi e altro è stateChange evento come,

google.visualization.events.addListener(subdivPicker, 'ready', 
function(event) { 
// group the data of the filtered table and set the result in the pie chart. 
columnChart1.setDataTable(google.visualization.data.group(
// get the filtered results 
table.getDataTable(), 
[0], 
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}] 
));  
// redraw the pie chart to reflect changes 
columnChart1.draw(); 
}); 

google.visualization.events.addListener(subdivPicker, 'statechange', 
function(event) { 
// group the data of the filtered table and set the result in the pie chart. 
columnChart1.setDataTable(google.visualization.data.group(
// get the filtered results 
table.getDataTable(), 
[0], 
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}] 
)); 
// redraw the pie chart to reflect changes 
columnChart1.draw(); 
}); 

Trova il mio iniziale (problematico) sample here e fisso (risolto) sample here