dashboard with table, string filter on table and column filter.

Alex Frieden

unread,

Jan 25, 2013, 2:46:07 PM1/25/13

to google-visua...@googlegroups.com

Hi all, I have a dashboard with a stringfilter on a column in the table, what I want is to add an additional filter that allows the additional or removal of columns. I have code that I think almost does this. Any suggestions?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
  </title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['controls']});
  </script>
  <script type="text/javascript">
  function drawVisualization() {
  // Prepare the data.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Foo');
  data.addColumn('number', 'Bar');
  data.addColumn('number', 'Baz');
  data.addColumn('number', 'Cad');
  data.addRows([
  ['2005',  45, 60, 89, 100],
  ['2006',  155, 50, 79, 24],
  ['2007',  35, 31, 140, 53],
  ['2008',  105, 23, 43, 82],
  ['2009',  120, 56, 21, 67],
  ['2010',  65, 19, 34, 134],
  ['2011',  80, 23, 130, 40],
  ['2012',  70, 140, 83, 90]
  ]);

  var columnsTable = new google.visualization.DataTable();
  columnsTable.addColumn('number', 'colIndex');
  columnsTable.addColumn('string', 'colLabel');
  var initState= {selectedValues: []};
  // put the columns into this data table (skip column 0)
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
  columnsTable.addRow([i, data.getColumnLabel(i)]);
  initState.selectedValues.push(data.getColumnLabel(i));
  }

  // Define a StringFilter control for the 'Name' column
  var stringFilter = new google.visualization.ControlWrapper({
  'controlType': 'StringFilter',
  'containerId': 'control2',
  'options': {
  'filterColumnLabel': 'Foo'
  }
  });

  // Define a table visualization
  //var table = new google.visualization.ChartWrapper({
  // 'chartType': 'Table',
  // 'containerId': 'chart1',
  // 'options': {'height': '13em', 'width': '20em'}
  //});

  var table = new google.visualization.ChartWrapper({
  chartType: 'Table',
  containerId: 'chart1',
  dataTable: data,
  options: {
  title: 'Foobar',
  width: 600,
  height: 400
  }
  });

  var columnFilter = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'control2',
  dataTable: columnsTable,
  options: {
  filterColumnLabel: 'colLabel',
  ui: {
  label: 'Columns',
  allowTyping: false,
  allowMultiple: true
  //selectedValuesLayout: 'belowStacked'
  }
  },
  state: initState
  });

  google.visualization.events.addListener(columnFilter, 'statechange', function () {
  var state = columnFilter.getState();
  var row;
  var columnIndices = [0];
  for (var i = 0; i < state.selectedValues.length; i++) {
  row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
  columnIndices.push(columnsTable.getValue(row, 0));
  }
  // sort the indices into their original order
  columnIndices.sort(function (a, b) {
  return (a - b);
  });
  chart.setView({columns: columnIndices});
  chart.draw();
  });

  // Create the dashboard.
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
  // Configure the string filter to affect the table contents
  bind(stringFilter, table).
  //bind(columnFilter,table).
  // Draw the dashboard
  draw(data);
  }


  google.setOnLoadCallback(drawVisualization);
  </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
  <div id="dashboard">
  <table>
  <tr style='vertical-align: top'>
  <td style='width: 300px; font-size: 0.9em;'>
  <div id="control1"></div>
  <div id="control2"></div>
  <div id="control3"></div>
  </td>
  <td style='width: 600px'>
  <div style="float: left;" id="chart1"></div>
  <div style="float: left;" id="chart2"></div>
  <div style="float: left;" id="chart3"></div>
  </td>
  </tr>
  </table>
  </div>
  </body>
</html>

Thanks!

asgallant

unread,

Jan 25, 2013, 3:32:06 PM1/25/13

to google-visua...@googlegroups.com

You are very close, there are just a handful of adjustments needed:

1) give the two controls different containers (both are currently set to "control2")

2) call the draw method of the columnFilter control

3) change the references to the "chart" variable in the columnFilter's "statechange" event handler to use "table" instead

See a working example here: http://jsfiddle.net/asgallant/dF8tn/

Alex Frieden

unread,

Jan 25, 2013, 3:34:26 PM1/25/13

to google-visua...@googlegroups.com

Perfect Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

--
Alexander Frieden

Reply all

Reply to author

Forward