title: Add events on google visualisation datatable
body: <p>Here I have google visualisation datatable:</p>
  
  <pre><code>        function drawTroskovnik() {
              var cssClassNames = {
          'headerRow': 'zaglavlje',
          'tableRow': 'red',
          'oddTableRow': 'red',
          'selectedTableRow': 'orange-background large-font',
          'hoverTableRow': 'prekoreda',
          'headerCell': 'gold-border',
          'tableCell': 'cell',
          'rowNumberCell': 'underline-blue-font'
      };
  
    // Create and populate the data table.
    var JSONObject = $.ajax({
                      url: 'getTroskovnik.php', // make this url point to the data file
                      dataType: 'json',
                      data:{id_akt:ajdi},
                      async: false,
                      type: 'POST',
                  }).responseText;
  
    var data = new google.visualization.DataTable(JSONObject, 0.5);
  
  for (var y = 0, maxrows = data.getNumberOfRows(); y &lt; maxrows; y++) {
      for (var x = 1, maxcols = data.getNumberOfColumns(); x &lt; maxcols; x++) {
  
        data.setValue(y, x, '&lt;input id="costRedovi" vr="'+ ajdi + '" kol="'+ data.getColumnLabel(x) +'" class="form-control" value="'+data.getValue(y,x)+'"&gt;');
      }
  } 
   for (var y = 0, maxrows = data.getNumberOfRows(); y &lt; maxrows; y++) {
  
        data.setValue(y, 0, '&lt;input class="span2 form-control" id="pocetak1" size="16" type="text" value="'+data.getValue(y,0)+'" readonly&gt;');
  
  } 
  
  
          data.addColumn('string', 'Kontrole');
          for (var y = 0, maxrows = data.getNumberOfRows(); y &lt; maxrows; y++) {
          var mc= data.getNumberOfColumns()-1;
  data.setValue(y, mc, '&lt;a data-toggle="modal" data-target="#update" href="#" class="btn btn-success"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt; Details&lt;/a&gt;');
  
          }
  
           var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'chart2',
            'cssClassNames': 'cssClassNames',
            'options': {
          cssClassNames: cssClassNames,
          allowHtml: true
      }
          });
  
  
    // Create and draw the visualization.
    visualization = new google.visualization.Table(document.getElementById('tpltroskovnik'));
    visualization.draw(data, {'allowHtml': true, cssClassNames: {
      'headerRow': 'zaglavlje',
          'tableRow': 'red',
          'oddTableRow': 'red',
          'selectedTableRow': 'orange-background large-font',
          'hoverTableRow': 'prekoreda',
          'headerCell': 'gold-border',
          'tableCell': 'cell',
          'rowNumberCell': 'underline-blue-font'
    }});
  }
  new google.visualization.events.addListener(visualisation, 'ready', function () {
          google.visualization.events.addListener(visualisation, 'select', function () {
              var selection = visualisation.getSelection();
              console.log(selection);
              //alert(data.getValue(visualization.getSelection()[0].row, 0));
  
  
                ajdi = data.getDataTable().getValue(selection[i].row,0);
                console.log(data.getDataTable().getValue(selection[i].row,0));
                console.log(data.getDataTable().getColumnLabel(selection[i]));
  
  
          })
  
      });
  </code></pre>
  
  <p>but where I need to add EVENTS:</p>
  
  <pre><code>new google.visualization.events.addListener(visualisation, 'ready', function () {
              google.visualization.events.addListener(visualisation, 'select', function () {
  </code></pre>
  
  <p>I try on the end of code but I get error: visualisation is not defined ... also how to getselection() of selected row ? and how to run function <code>SSS();</code> when table is ready?</p>