En utilisant data.group pour visualisation de Google Dashboards

Question

J'ai une table avec deux clés, comme ceci:

+------+------+-------+ 
| key1 | key2 | value | 
+------+------+-------+ 
| abc | 123 | 5 | 
| abc | 456 | 7 | 
| abc | 789 | 9 | 
| xyz | 123 | 2 | 
| xyz | 456 | 4 | 
| xyz | 789 | 6 | 
+------+------+-------+ 

Je veux être en mesure de filtrer ce tableau par key2, donc je créé un google.visualization.Dashboard comme ceci:

var dashboard = new google.visualization.Dashboard(); 
dashboard.bind([ 
    new google.visualization.ControlWrapper({ 
     "controlType": "CategoryFilter", 
     "containerId": "...", 
     "options": { 
      "filterColumnIndex": 1 
     } 
    }); 
], [ 
    new google.visualization.ChartWrapper({ 
     "chartType": "Table", 
     "containerId": "...", 
     "options": {...} 
    }); 
]); 

maintenant, voici le hic: Je voudrais ajouter un diagramme circulaire à ce tableau qui regroupe les données par key1. Donc, sans aucun filtrage, le graphique montrerait quelque chose comme:

abc = 21 
xyz = 12 

Mais si je filtré jusqu'à « 456 », alors il doit montrer:

abc = 7 
xyz = 4 

Maintenant, si je n'utilise un tableau de bord , je peux accomplir cette agrégation comme ceci:

var graph = new google.visualization.PieChart(); 
var aggregatedData = google.visualization.data.group(
    data, 
    [0], 
    [{ 
     "column": 2, 
     "aggregation": google.visualization.data.sum, 
     "type": "number" 
    }] 
); 
graph.draw(aggregatedData); 

Cependant je ne sais pas comment effectuer cette agrégation dans un tableau de bord

Answer 1

enregistrer une référence au tableau de table,
utiliser son événement 'ready' pour dessiner le graphique circulaire

à tout moment les changements de filtre, l'événement 'ready' se déclenche

vous pouvez tirer la table de données filtrées à partir du tableau de table ,
à utiliser pour votre agrégation

ce sera la même table de données utilisées pour établir le tableau de bord,
avec les filtres appliqués

juste être sûr d'attribuer l'événement 'ready',
avant de dessiner le tableau de bord

quelque chose comme l'extrait suivant ...

var chartTable = new google.visualization.ChartWrapper({ 
    "chartType": "Table", 
    "containerId": "...", 
    "options": {...} 
}); 

var dashboard = new google.visualization.Dashboard(); 
dashboard.bind([ 
    new google.visualization.ControlWrapper({ 
     "controlType": "CategoryFilter", 
     "containerId": "...", 
     "options": { 
      "filterColumnIndex": 1 
     } 
    }); 
], [ 
    chartTable 
]); 

google.visualization.events.addListener(chartTable, 'ready', function() { 
    var graph = new google.visualization.PieChart(needContainer); 
    var aggregatedData = google.visualization.data.group(
     chartTable.getDataTable(), 
     [0], 
     [{ 
      "column": 2, 
      "aggregation": google.visualization.data.sum, 
      "type": "number" 
     }] 
    ); 
    graph.draw(aggregatedData); 
}); 

dashboard.draw(data); 

Note: le tableau de bord a également un événement 'ready',
mais tirera pour chaque contrôle lié et graphique,
donc deux fois dans ce scénario

et vous avez également besoin de où tirer la table de données filtrée à partir de,
d'où la sauvegarde d'une référence au tableau de table ...