Paging buttons are not working in "google.visualization.Table()"

540 views
Skip to first unread message

Chetan Ghodasara

unread,
Feb 23, 2016, 7:42:54 AM2/23/16
to Google Visualization API
Hi,

I want to display some data on webpage using "google.visualization.Table()". The table is being displayed perfectly for small amount of data. But for more number of rows, I want to add paging in the table. For that I have added " page:[enable], pageSize:[20] " options while using draw() method. Now, table is displaying with paging as per the options (20 rows per page) and paging button is also displayed but those buttons are not working.

Actually I'm new to Google Visualization Chart. Can anyone help me, how to start working those buttons? 

Below is the code snippet which I've used.

Please let me know if any further information is required.

Thanks,
Chetan

//chartClickData is in JSON Format
function (chartClickData) {
 
                                var dataT = new google.visualization.DataTable();
 
                                // Declare columns
                                dataT.addColumn('string', 'DateTime');
                                dataT.addColumn('number', 'TimeElapsed');
                                dataT.addColumn('string', 'RemoteHost');
                                dataT.addColumn('string', 'Code');
                                dataT.addColumn('number', 'StatusCode');
                                dataT.addColumn('string', 'Meaning');
                                dataT.addColumn('number', 'Bytes');
                                dataT.addColumn('string', 'Method');
                                dataT.addColumn('string', 'URL');
                                dataT.addColumn('string', 'PeerStatus');
                                dataT.addColumn('string', 'PeerHost');
                                dataT.addColumn('string', 'Type');
 
                                for (var i = 0; i < chartClickData.length; i++) {
                                  dataT.addRow([chartClickData[i].DateTime,
                                    chartClickData[i].TimeElapsed,
                                    chartClickData[i].RemoteHost,
                                    chartClickData[i].Code,
                                    chartClickData[i].Status.StatusCode,
                                    chartClickData[i].Status.StatusMeaning,
                                    chartClickData[i].Bytes,
                                    chartClickData[i].Method,
                                    chartClickData[i].URL,
                                    chartClickData[i].PeerStatus,
                                    chartClickData[i].PeerHost,
                                    chartClickData[i].Type]);
                                }
 
                                var table = new google.visualization.Table(document.getElementById('Tablediv'));
 
                                var options = {
                                    alternatingRowStyle: [true],
                                    showRowNumber: [true],
                                    page: ['enable'],
                                    pageSize: [8],                                   
                                };
 
                                options['pageSize'] = 8;                                
 
                                table.draw(dataT,options); 
                            }

Daniel LaLiberte

unread,
Feb 23, 2016, 8:54:12 AM2/23/16
to Google Visualization API
The Table chart paging buttons will be disabled automatically if there is no next page or previous page of data.  So I would suspect your dataT doesn't have any more rows to show.  You can find out how many rows it has with alert('number of rows" + dataT.getNumberOfRows());

I noticed your option values all have [...] around them.  That notation creates arrays, which are not the correct type of values for those options, so I am wondering why you did it that way.  Setting options['pageSize'] = 8 will override that value.

--
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 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/ed195843-2bc6-40fd-888d-d0a3c6618964%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Chetan Ghodasara

unread,
Feb 23, 2016, 9:46:51 AM2/23/16
to Google Visualization API
Thank you Daniel for your quick reply.

It solved my problem. Actually "DataT" has rows in hundreds, but I have changed the option values as per your opinion and it's now working fine. :)

                        var table = new google.visualization.Table(document.getElementById('Tablediv'));
 
                                var options = {

                                    alternatingRowStyle:true,
                                    showRowNumber: true, 
                                    page: 'enable', 
                                    pageSize: 100,
                                    pagingSymbols: {prev: 'prev',next: 'next'}
                                };
 
                        table.draw(dataT,options);



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



-- 




Vadim Podlevsky
unread,
Oct 11, 2016, 1:38:29 PM10/11/16
to Google Visualization API
Having similar issue using TableQueryWrapper for ajax table representation. Arrow Buttons are functional but No page buttons are shown. If the page size is set to 25, getNumberOfRows() is showing 26 value.
How to tell google api the total number of records in my database?


вторник, 23 февраля 2016 г., 15:54:12 UTC+2 пользователь Daniel LaLiberte написал:

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



-- 




Daniel LaLiberte
unread,
Oct 17, 2016, 11:56:47 AM10/17/16
to Google Visualization API
Hi Vadim,

If you are still having this problem with the page buttons, can you point us at a page so we can see it happen?

I can imagine there could be an off-by-one error, such as your case, when the number of rows is one more than the page size.


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/68bdaa03-2998-4cd7-92f6-bc8f73f7dbc7%40googlegroups.com.


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





-- 




Reply all
Reply to author
Forward
0 new messages