Is it possible to disable sorting in a table chart after the table is drawn

131 views
Skip to first unread message

Weii Wang

unread,
May 5, 2017, 8:20:06 PM5/5/17
to Google Visualization API
Hello,

I have a table chart already drawn, but want to disable sorting after a checkbox is checked.
Is there a method to change option after the table is ready.

var SPRITE_table = new google.visualization.ChartWrapper({
 'chartType': 'Table',
 'containerId': 'sprite_table',
 'options' : {
'showRowNumber' : 'false',
'allowHtml': 'true',
//'width': '2000',
'cssClassNames': cssClassNames
  },
'view': {'columns': [20,0,1,2,3,4,5,6,7,8,9,10,11]}
});
google.visualization.events.addListener(SPRITE_table, 'ready', function () {
            if($('#mycheckbox').is(':checked')){
                   // disable sorting for SPRITE_table
            }
)};

Thanks,
Weii

Daniel LaLiberte

unread,
May 5, 2017, 10:43:44 PM5/5/17
to Google Visualization API
In order for a change of options (such as disabling sorting) to take effect, currently you would have to draw it again, but if you want it sorted the same as it was, you would have to recreate that order somehow (either reorder your datatable, or invoke the same sorting actions on the table).  So unfortunately, there is no way to do what I believe you are asking for, at least not in the Table chart functionality.

But you could probably override the click event handler that causes the sorting actions by the user, with suitable DOM manipulations.

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7ce33d0a-1266-44fe-9a3e-0da61ba4e492%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Weii Wang

unread,
May 8, 2017, 9:04:58 PM5/8/17
to Google Visualization API
Hi Daniel,

Thanks a lot for the clarification and the hint.
What I want to do is to give every row in the table an id.
This is achieved by:
google.visualization.events.addListener(SPRITE_table, 'ready', function () {
                   $('.google-visualization-table-table tbody tr').each(function (e){
var idx = $('td:nth-child(1) span', this).attr('setid');
var ue = $('td:nth-child(2) span', this).attr('realuetxt');
var id;
if(ue == null){
id = idx;
}else{
id = idx + '_' + ue;
}
$(this).attr('id', id);
$(this).attr('class', idx);
});
});

But whenever the <th> is clicked, the id I set above is gone. 
Even when I set option : 'sort': 'disabled' still the id is gone whenever <th> is clicked.
So I thought maybe I should do something with the 'sort' event like assign the ID again for each row but nothing happened.
I added below code outside or inside the ready listener both of them did not do anything.
google.visualization.events.addListener(SPRITE_table, 'sort', function(e){
console.log('sort event triggered!');

}); 

Can you please shed some light 

Thanks! and BR,
Winnie

To post to this group, send email to google-visua...@googlegroups.com.



--
beforeTHclicked.JPG
afterTHclicked.JPG

Daniel LaLiberte

unread,
May 8, 2017, 10:48:41 PM5/8/17
to Google Visualization API
Once you disable sorting, I would not expect the table to be regenerated after clicking a column header (though it sounds like you are saying it is), nor would I expect a 'sort' event to be triggered (though it sounds like you were expecting it would).  

It is unfortunate that the table does not have a built-in way to identify each row, or each column.  This should be something we fix at some point because it fairly easy to add identifying information, and it is difficult for users to work around the lack.

The easiest way currently to determine which row the user has clicked on is to work with the selection data returned by getSelection().  Is that not enough to go on?    It is more work to figure out which column the user has clicked on, something else we should fix.

Recreating changes to the table after each update of the table seems like something I would not attempt myself.  It would require at least figuring out which data row each table row corresponds to, and once you know the data row, that ought to be enough.  Perhaps you want to say more about why you have gone down this path.


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/540a34e7-d451-4b20-b243-151a2f2a4800%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Weii Wang

unread,
May 25, 2017, 8:23:03 PM5/25/17
to Google Visualization API
Hi Daniel,

I appreciate your response.
It'd be great if you can add index for each row in the next release. 
I added id for each row to achieve grouping the table chart and be able to expand/collapse the category (like attached capture2)
But after I clicked the header row to sort, all the ID for each row are gone.
At first I think that I should assign the ID again after the sort event but it didn't work for below code:
google.visualization.events.addListener(SPRITE_table, 'sort', function(e){
  console.log('sort event triggered!');
});
So I want to just disable the sort function to avoid messing up the expand/collapse function.
After some struggling and googling ... the sort event works with adding .getChart()
google.visualization.events.addListener(SPRITE_table.getChart(), 'sort', function(e){
  console.log('sort event triggered!');
});
As why I've gone down the path for recreating changes to the table after each update is I have some charts reflecting the grouped data of the table every time the categoryFilter is changed.
(as attached capture3)
If you have any suggestion for other way of doing this, that'd be super helpful!

Thanks and Best Regards,
Winnie

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Capture3.JPG
Capture2.JPG
Reply all
Reply to author
Forward
0 new messages