Панель инструментов Google с фильтрами из сгруппированных данных - как составить диаграмму сгруппированных данных

Я нашел обходной путь, вы должны использовать chartWrapper без панели инструментов, поэтому вы можете передать dataTable в качестве параметра:

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

Затем вы должны добавить обратный вызов к своим элементам управления, чтобы всякий раз, когда элемент управления изменяется, диаграммы за пределами панели мониторинга обновлялись, как при ручной привязке, давайте предположим, что элементом управления для cust_sex является $genderPicker, а объект таблицы 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();
});

Результат: всякий раз, когда вы выбираете мужчину, женщину или и то, и другое, круговая диаграмма будет отражать отфильтрованные результаты, сгруппированные по имени. Надеюсь, это поможет кому-то и извините за мой ломаный английский.

другой способ сделать это - использовать событие «готово» объекта панели мониторинга, а затем создать там диаграмму или таблицу на основе группировки, выполненной для основной таблицы панели мониторинга.

eg:

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

После долгих исследований и разработок я нашел решение этой проблемы. Для исправления я использовал два прослушивателя событий, один из которых является событием ready, а другой — событием statechange, например:

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();
 });

Найдите мой первоначальный (проблемный) образец здесь и исправленный (решенный) пример здесь

Прочитайте эту тему: Как не отображать таблицу данных (прочитайте хотя бы первые два сообщения — остальные действительно важны, только если вы имеете дело с большими наборами данных).

По сути, вы должны использовать промежуточную диаграмму (таблицы — хороший выбор, потому что они относительно быстро пишутся и визуализируются и требуют меньше памяти, чем большинство диаграмм), которая полностью скрыта от пользователей. Вы привязываете средство выбора категории к этой диаграмме на панели инструментов. Затем вы настраиваете обработчик события «statechange» средства выбора, который принимает данные, группирует их в новую таблицу данных и рисует круговую диаграмму на основе сгруппированных данных.