Table Chart: Selecting multiple rows?

[clayadavis]

This seems like it would be easy, but my search skills seem to be
failing me. Is there a way to set the default behavior for a Table
Chart to emulate always having the 'ctrl' key pressed? In other words,
whenever I click on an unselected row, I want to add it to the
currently selected rows; clicking on an unselected row would then
unselect it, similar to checkboxes.

The context for this is to select/unselect from the Table Chart items
which I want to compare in a Pie Chart.

[ChartMan]

There is no simple one line setting to make this happen but you can do the following.

Store the list of selected rows in your javaScript and listen to every "select" event with something like this function

var selectedRows = {};

function handleSelection() {

 var selection = table.getSelection();

 var row = selection[0]['row'];

 selectedRows['row'] = true;

 var newSelection = []; 

 for (var r in selectedRows) {

   newSelection.push({"row": r});

 }

 table.setSelection(newSelection);

}

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

[asgallant]

The problem with this comes when deselecting rows.  When you click an already selected row a second time, it clears the selection, so table.getSelection() returns null.  There is no way to determine which row was clicked on, so we don't know which to remove from the selection.  You can end route this by building the event listener in standard js.  If visual selection is all you need, then you can use CSS to highlight rows (the viz API's built in classes provide easy access to this).  If you need to access data, then you'll need to do a bit more work to make sure the rows selected in standard js match the ones you pull from the DataTable.

On Sunday, May 20, 2012 4:15:49 AM UTC-4, h wrote:

There is no simple one line setting to make this happen but you can do the following.

Store the list of selected rows in your javaScript and listen to every "select" event with something like this function

var selectedRows = {};

function handleSelection() {

 var selection = table.getSelection();

 var row = selection[0]['row'];

 selectedRows['row'] = true;

 var newSelection = []; 

 for (var r in selectedRows) {

   newSelection.push({"row": r});

 }

 table.setSelection(newSelection);

}

On Fri, May 18, 2012 at 11:17 PM, clayadavis <claya...@gmail.com> wrote:

This seems like it would be easy, but my search skills seem to be
failing me. Is there a way to set the default behavior for a Table
Chart to emulate always having the 'ctrl' key pressed? In other words,
whenever I click on an unselected row, I want to add it to the
currently selected rows; clicking on an unselected row would then
unselect it, similar to checkboxes.

The context for this is to select/unselect from the Table Chart items
which I want to compare in a Pie Chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[ChartMan]

Thanks. Good point :)

My snippet does not handle this case at all. However, what is the desired behavior? Do you want that row to be added, removed, clear selection or else?

On May 21, 2012 4:47 PM, "asgallant" <drew_g...@abtassoc.com> wrote:

[clayadavis]

This is getting more complicated than I thought lol.

My desired behavior is as follows:
* Click on unselected row -> add that row to the selection of rows,
highlight it
* Click on selected row -> remove that row from the selection of rows,
unhighlight it, leave other selected rows as selected.
* The selected rows are then compared in a pie chart.

By using your snippet, modified a bit, I'm keeping track of the rows
and getting them in the pie chart. By doing a table.setSelection(null)
after each row click, I make sure that I can both add and remove the
row from the pie chart. The problem with this is that I have no visual
feedback in the table. Is there then an easy way to just color all
the rows in a list? Perhaps by CSS?

On May 21, 12:22 pm, ChartMan <chart...@google.com> wrote:
> Thanks. Good point :)
>
> My snippet does not handle this case at all. However, what is the desired
> behavior? Do you want that row to be added, removed, clear selection or
> else?

> On May 21, 2012 4:47 PM, "asgallant" <drew_gall...@abtassoc.com> wrote:

[clayadavis]

I ended up getting the behavior I wanted with the following code.
Please let me know if there's something wrong/evil/foolish here:

var selectedRows = new Array();
function myTableClickHandler(){
var selection = tableviz.getSelection();
for (var idx in selection){
var item = selection[idx];
if (item) {
i = selectedRows.indexOf(item.row);
if (i == -1){
selectedRows.push(item.row);
tableView.setProperty(item.row,
0,'style','background-color:#d6e9f8;');
tableView.setProperty(item.row,
1,'style','background-color:#d6e9f8;');
} else {
selectedRows.splice(i,1);
tableView.setProperty(item.row,0,'style',null);
tableView.setProperty(item.row,1,'style',null);
}
}
}
tableViz.setSelection(null);
tableViz.draw(tableView, tableOptions);
pieView.setRows(selectedRows);
pieViz.draw(pieView);
}

[asgallant]

I was working on a similar solution to this and you beat me to posting it  >;o)

The only thing I would be concerned about is using:

for (var idx in selection) 

as selection is an array, and that will iterate over all of the properties of an array, not just it's elements.  Safer to use:

for (var idx = 0; idx < selection.length; idx++)

You can also use the #forEach method of arrays if you don't care about compatibility with IE 8 and earlier.