how to assign values to TR in google dashboard table

Question

i am using Google Dashboard's table functionality, i want to assign value of id to tr of each row that is created, i have array as follows

   var data = google.visualization.arrayToDataTable([
      ['Name', 'Donuts eaten','id'],
      ['Michael' , 5,'1'],
      ['Elisa', 7,'2'],
      ['Robert', 3,'3'],
      ['John', 2,'4'],
      ['Jessica', 6,'5'],
      ['Aaron', 1,'6'],
      ['Margareth', 8,'7']
    ]);

      var table = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'chart2',
                    dataTable: data,
                    'options': {
                        'width': '500px'
                    }
                });
                table.draw();

I am still unable to figure out if there is some way to bind values to DOM elements any help will be appreciated.

read asgallant's answer and last comment. Use the plugin and help to improve or make your own...:) — Sami, Dec 26 '13 at 19:50
well making my own to do specifc job is way easy but this Table/feature is bundled with Dashoard, if we cant modify whats the point of using 1? coz there are too many already out there. — noobie-php, Dec 27 '13 at 19:09

Eran Boudjnah · Accepted Answer · 2013-12-30T13:40:25.217

3

Here's one solution, using JQuery:

google.visualization.events.addListener(table, 'ready', function () {
  $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) {
      var idx = $('td:nth-child(2)', this).html();
      $(this).attr('id', 'row' + idx);
    });
  });

And to remove the ID column:

google.visualization.events.addListener(table, 'ready', function () {
  $('.google-visualization-table-tr-head td:nth-child(3)').remove();
  $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) {
      var td = $('td:nth-child(2)', this)
      var idx = td.html();
      td.remove();
      $(this).attr('id', 'row' + idx);
    });
  });

With sorting taken into account:

function tableCleanUp() {
  google.visualization.events.addListener(table.getChart(), 'sort', tableCleanUp2);
  tableCleanUp2();
}

function tableCleanUp2() {
  $('.google-visualization-table-tr-head td:nth-child(3)').remove();
  $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) {
      var td = $('td:nth-child(2)', this)
      var idx = td.html();
      td.remove();
      $(this).attr('id', 'row' + idx);
    });
}

google.visualization.events.addListener(table, 'ready', tableCleanUp);

edited Dec 30 '13 at 13:40

answered Dec 29 '13 at 14:41

Eran Boudjnah

1,228
20
22

Thx for reply, i tried this, it works but has limitations the id column, that i passed in above example was just an example, i meant it to be displayed as id should be applied as something like this, they way you are doing is nice that u take, some column name and take its html value and assign it to "", the limitation is that i dont want to pass it as a column val. – noobie-php Dec 30 '13 at 11:55
How do you want to pass it, then? You need some way of identifying the row in question if you want to assign to it an ID from your data array. – Eran Boudjnah Dec 30 '13 at 12:06
"i want to assign value of id to tr of each row that is created" thats what i quoted, as mentioned earlier that i appreciate your solution but ID in data array was sent in a manner so that it can be assigned to TR's ID, as i think we all know that we dont displayed ID in columns usually, as it can come from DB, if you modify this a little i will certainly mark your question true. – noobie-php Dec 30 '13 at 12:16
Two things: First, if your concern is security, then the fact that the ID is sent from the server would be bad enough, whether you display it in a column or not. Second, I'm still not clear on how you want to assign the right ID. Is there are unique key in the array? Is it the name? Because, if I have 2 Michaels, how would you expect the code to know which ID to assign to each Michael? – Eran Boudjnah Dec 30 '13 at 12:22
well both are my concerns at the moment , 1st i dont wanna display ID for 1)Secuirty 2)I dont want it in my View. The only unique identifier per row is ID. – noobie-php Dec 30 '13 at 12:25
Ok then, the security issue, as I said before, is not relevant. So long as you pass the ID to the client, you should assume users can read it. Would you like to remove the ID field after assigning the ID? Would that solve your second part? – Eran Boudjnah Dec 30 '13 at 12:27
1

yeah, i can try that. – noobie-php Dec 30 '13 at 12:31
Edited to add an alternative that removes the ID column after reading its contents. – Eran Boudjnah Dec 30 '13 at 12:37
1

ah, another issue here, google table is sortable , so when i sort columns the removed field is displayed again. try it and you will know what i am referring to. – noobie-php Dec 30 '13 at 13:25

score 0 · Answer 2 · answered Dec 18 '13 at 16:24

0

There is no support in the Table visualization for assigning ID's to tr's. You have to parse the created HTML manually to set them appropriately.

answered Dec 18 '13 at 16:24

asgallant

26,060
6
72
87

And how to do? Might be acceptable answer. I have tried but not succeeded :( – Sami Dec 25 '13 at 18:19
There is no easy way to do this. You have to parse your table to match values in the table cells to values in your DataTable in order to uniquely identify a row (which may not be possible if some of your rows have duplicate data). It is easiest if you have a single cell with a unique key value for each row. – asgallant Dec 26 '13 at 15:43
1

If you'll allow a shameless product plug, I have an open-source (licensed under GPLv3) Table visualization in beta now that provides functionality above and beyond that of the default Google Table visualization - including the ability to assign attributes (like id's) to table elements. You can get it here: https://github.com/asgallant/gViz.Table. It is very much a beta product (read: probably has a ton of undiscovered bugs), so I don't think it is ready for a production environment, but if I could get some active testers, the bugs could be hammered out quickly. – asgallant Dec 26 '13 at 15:53

score -1 · Answer 3 · answered Dec 18 '13 at 13:38

-1

In the simplest form it can be done as the following: tr.id = containerId;

answered Dec 18 '13 at 13:38

asdasd

1

and where to use it? ContainerId should be ID of whole container i guess not just 1 TR. – noobie-php Dec 18 '13 at 13:52

how to assign values to TR in google dashboard table

3 Answers3