Сега, когато прочетох примера на @harshit по-внимателно, изглежда, че покрива всяка част от първоначалното изискване. Наистина ли опитахте да използвате кода?

person user804651    schedule 18.06.2011    source източник
comment
Има ли късмет? Всъщност трябва да направя нещо много подобно на това...   -  person André Morujão    schedule 16.09.2011


Отговори (4)


Намерих заобиколно решение, трябва да използвате 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();
});

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

person javiertoledos    schedule 02.11.2011
comment
изглежда добре, но в моя код изобщо няма налична променлива google.visualization.events.addListener(orgFilter, 'statechange', function(e) { alert(e); }); дава нула. също така не са налични променливи, дефинирани преди този израз. някакви идеи? - person iRaS; 04.12.2012

друг начин да го направите е да използвате събитието 'ready' на обекта на таблото, след което да създадете диаграма или таблица там въз основа на групиране, направено към главната таблица на таблото.

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)
person nathfy    schedule 11.10.2012
comment
Този начин работи по-чисто и по-лесно, отколкото да слушам за промени в състоянието на контролите, защото се сблъсках с някои условия на състезание с таблицата с приложени филтри, преди да се опитам да актуализирам диаграмите. Слушането за готовност на таблото елиминира това състояние на състезание и работи като чар. Благодаря - person JCricket; 25.09.2014
comment
За тези, които търсят допълнителни примери, намерих свързано решение с подробности, които помогнаха за изясняване на употребата тук: stackoverflow.com/a/23836866/4088892 - person timctran; 16.08.2018

След дълго проучване и развойна дейност намерих решението на този проблем. За корекцията използвах два слушателя на събития, в които единият е събитие 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();
 });

Намерете моята първоначална (проблемна) проба тук и коригирана (решена) проба тук

person mpsbhat    schedule 27.04.2013

Прочетете тази тема: Как да не показвате таблицата с данни (прочетете поне първите две публикации - останалите наистина са важни само ако имате работа с големи набори от данни).

По принцип трябва да използвате междинна диаграма (таблиците са добър избор, тъй като те са сравнително бързи за писане и изобразяване, с по-нисък отпечатък на паметта от повечето диаграми), която е напълно скрита от потребителите. Вие свързвате инструмента за избор на категория към тази диаграма в таблото за управление. След това настройвате манипулатор на събитие за събитието „statechange“ на инструмента за избор, който взема данните, групира ги в нова DataTable и чертае кръговата диаграма въз основа на групираните данни.

person Pradeep Shankar    schedule 22.09.2012
comment
Намерих свързан SO отговор, който илюстрира скритата междинна диаграма, спомената в този отговор. Вижте stackoverflow.com/a/23836866/4088892. - person timctran; 16.08.2018