The Problem

Using the Google Chart Tool it is possible to insert HTML values into the field values, however, I am not confident that this is good practice.

The method I have used is as follows:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {
    allowHtml: true
  });
}

My Questions

1. Are there any other better methods of achieving this?
2. Are there ways of catching the events from these buttons, whilst also retrieving the id of the row that is receiving the event? In other words, how do I know which button has been clicked and for which row it represents?

The Problem

Using the Google Chart Tool it is possible to insert HTML values into the field values, however, I am not confident that this is good practice.

The method I have used is as follows:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {
    allowHtml: true
  });
}

My Questions

1. Are there any other better methods of achieving this?
2. Are there ways of catching the events from these buttons, whilst also retrieving the id of the row that is receiving the event? In other words, how do I know which button has been clicked and for which row it represents?

• javascript
• jquery
• html
• charts
• google-visualization

• not sure of the google charts structure but a way to test is to assign a class to all of the buttons and then use a click event to check the parent and see what it is and go from there – Steve Commented Nov 5, 2012 at 12:23
• @Steve This is exactly what I was going to do, but I see it as a dirty fix. It is not a very nice method as it relies on the parent having a unique feature, whether it be an id or content – Ben Carey Commented Nov 5, 2012 at 12:25

2 Answers 2

Are there ways of catching the events from these buttons, whilst also retrieving the id of the row that is receiving the event? In other words, how do I know which button has been clicked and for which row it represents?

Try this way for example

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function getSelectedRowNumber(table) {
  var selection = table.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message); 
}
function drawTable() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%',
    cssClassNames: {tableRow: 'myClass'}
  });
  // this works for buttons
  $(document).on('click','input[type=button]',function() {
    getSelectedRowNumber(table);
  });
  // this works for clicking on row unment to test it
  /*$(document).on('click','tr.myClass',function() {
    getSelectedRowNumber(table);
  });*/
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic./charts/loader.js"></script>
<div id="table_div"></div>

I have been using Google Charts for a while and as far as I know there isn't a better method for that.

Your way should be effective. Good luck. :)