Multiple Google visualization tables on one page

Question

I had a problem creating multiple Google visualization tables on the same page. How to dynamically generate an unknown number of Google visualization tables on one page with full functionality?

I referred to this (almost identical) question for help. How do I add two Google charts on the same page? however, the Dominor Novus solution will not help, if you have not yet created the page, the number of tables. For example, sometimes I need to have 5 tables, sometimes I only need 1.

My question is how to dynamically create a page that will dynamically create multiple Google visualization tables, each with its own unique identifier. Then, when the user clicks on a row in the table, can he return the row number, as well as a unique identifier for the dynamically created table?

Answer 1

To solve the problem effectively, we must store the table data and the table object in arrays. First we create arrays for the data and table object at the top of the page.

var tableData=new Array(); var table=new Array(); var tableid=0; 

Then we create our table storing them in arrays referenced by a unique identifier. Then, to execute the table selection function, we add a listener to the table object. Then we grab the identifier of the containing div table and take a substring of that identifier to find out which table was clicked. Then we take the row of this table, as usual, using the .getSelection () method. Once we have both the row and the table identifier, we can return them to users based on which table and row he clicked.

 //create dynamic number of tables for (id=0;id<num_of_tables;id++) { var tableID = 'table_div' + id; //The id of the google visualization table //Generate the div for the google visualization table $('<div/>', { id: tableID, class: 'cd_table' }).appendTo('#tables'); listData = data; if (listData[id].length>0) { tableData[id] = new google.visualization.DataTable(); tableData[id].addColumn('string', 'name'); tableData[id].addColumn('string', 'email'); for (var i=0; i<listData[id].length; i++) { tableData[id].addRows(1); tableData[id].setCell(i,0,listData[id][i].name); tableData[id].setCell(i,1,listData[id][i].email); } } table[id] = new google.visualization.Table(document.getElementById(tableID)); table[id].draw(tableData[id], {showRowNumber: false, sortColumn: 0}); google.visualization.events.addListener(table[id], 'select', function() { $(document).on('mousemove', '.google-visualization-table', function() { tableid=$(this).closest('.cd_table').attr('id').substring(9); }); var row; if (table[tableid].getSelection()[0] != undefined) { row = table[tableid].getSelection()[0].row; lastRowClick = row; } else row = lastRowClick; alert('table id:' + tableid + ' row:' + row); }); } 

This is almost perfect, but only works if you have clicked on the table already once. We must also add the mousemove event to the jQuery boot function of the bootstrap, for example:

 $(document).on('mousemove', '.google-visualization-table', function() { tableid=$(this).closest('.cd_table').attr('id').substring(9); }); 

And done. You can create an unlimited number of dynamically created Google visualization tables that can return the pressed row and the identifier of the table that the button was clicked on.