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

Question

Я хочу создать инструментальную панель API Google Charts с фильтрацией, но я хотел бы отобразить данные на основе сгруппированных данных. Например, я могу создать таблицу данных, такую ​​как это:

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

Я могу соответствующим образом создать панель управления, которая создает два элемента управления (для cust_age и cust_sex) и любое количество выходных графиков и таблиц, извлекаемых из внешнего источника данных - это довольно простые вещи, см. http://code.google.com/apis/chart/interactive/docs/gallery/controls.html

Проблема, с которой я сталкиваюсь, заключается в том, чтобы показать все диаграммы по сгруппированным значениям. На примере круговой диаграммы без каких-либо фильтров есть 5 секторов (Джо, Джо, Сьюзи, Дейв, Дейв) - я хотел бы видеть только три (Джо, Сьюзи Дейв). Конечно, когда элемент управления применяется, все должно обновляться.

Другими словами, фильтры должны действовать на исходную таблицу данных, но диаграммы должны основываться на сгруппированных данных.

Я думаю, мы могли бы использовать функцию группировки: http://code.google.com/apis/ajax/playground/?type=visualization#group однако я не могу связать фильтры с более крупными данными, обновить сгруппированную таблицу и затем нарисовать диаграммы на основе сгруппированной таблицы.

Есть мысли?

Answer 1

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

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

Answer 2

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

например:

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

После долгих НИОКР я нашел решение этой проблемы. Для исправления я использовал два прослушивателя событий, один из которых ready , а другой - statechange event as,

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

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

Answer 4

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

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