CODEWITHSUNDEEP
javascriptjqueryeventsgoogle-visualization
gmaestro
gmaestro

Reputation: 339

Add events on google visualisation datatable

Here I have google visualisation datatable:

        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 < maxrows; y++) {
    for (var x = 1, maxcols = data.getNumberOfColumns(); x < maxcols; x++) {

      data.setValue(y, x, '<input id="costRedovi" vr="'+ ajdi + '" kol="'+ data.getColumnLabel(x) +'" class="form-control" value="'+data.getValue(y,x)+'">');
    }
} 
 for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {

      data.setValue(y, 0, '<input class="span2 form-control" id="pocetak1" size="16" type="text" value="'+data.getValue(y,0)+'" readonly>');

} 


        data.addColumn('string', 'Kontrole');
        for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
        var mc= data.getNumberOfColumns()-1;
data.setValue(y, mc, '<a data-toggle="modal" data-target="#update" href="#" class="btn btn-success"><i class="fa fa-pencil"></i> Details</a>');

        }

         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]));


        })

    });

but where I need to add EVENTS:

new google.visualization.events.addListener(visualisation, 'ready', function () {
            google.visualization.events.addListener(visualisation, 'select', function () {

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 SSS(); when table is ready?

Upvotes: 0

Views: 1080

Answers (1)

asgallant
asgallant

Reputation: 26340

The event handler needs to be created in the same scope as the visualization. Also, in general, you want to set up all event handlers before the chart is drawn (especially "ready" event handlers).

In your case, it would look something like this:

visualization = new google.visualization.Table(document.getElementById('tpltroskovnik'));

// add select event
google.visualization.events.addListener(visualisation, 'select', function () {
    var selection = visualisation.getSelection();
    for (var i = 0; i < selection.length; i++) {
        // selection[i].row contains the row index, eg:
        console.log(data.getValue(selection[i].row, 1));
    }
});
// run SSS when table is ready
google.visualization.events.addListener(visualisation, 'ready', SSS);

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'
    }
});

Upvotes: 1

Related Questions