CODEWITHSUNDEEP
javascriptgoogle-visualization
data_modeler
data_modeler

Reputation: 196

Having trouble with getFilteredRows using Google Chart API dashboard

I'm putting together a dashboard and trying to do something that should be straight-forward. There will be Control Filters to operate at the dashboard level, but I also need to specify some additional filters (static, not through a control) to just a single table. The method for getFilteredRows seems to be the answer but it is not working.

I've mocked up the example that Google has in the Code Playground to try to get this to work. In this case, I'm trying to have the Pie chart only show those that are 20 years or older.

(link to Google Code Playground: http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard)

Code I'm trying:

function drawVisualization() {
  // Prepare the data
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8],
    ['Miranda', 'Female', 33, 6]
  ]);  

  // Define a slider control for the Age column.
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Age',
    'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a category picker control for the Gender column
  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Gender',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  // Define a Pie chart
  var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'title': 'Donuts eaten per person',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
     'view': {
       'columns': [0,3],
       'rows': [
         {
           'calc': function(data) {
             return data.getFilteredRows({column: 2, minValue: 20});
           },
           'type': 'number'
         }]
     }
  });

  // Define a table
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });

  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([slider, categoryPicker], [pie, table]).
      // Draw the entire dashboard.
      draw(data);
}

The only thing I've changed from the original example is adding to the 'view' section of the Pie Chart.

Anyone have any thoughts?

Upvotes: 1

Views: 3413

Answers (1)

Guy
Guy

Reputation: 12891

Couple of small changes: * No need for 'calc' as it is used for creating new calculated columns. * the format of the function requires array even for a single value.

 'view': {'columns': [0, 3], 
         'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}

Upvotes: 1

Related Questions