google graphs getSelection method dashboard

[byteME]

How can I use a getSelection() method to interact with the table in a dashboard..

Any suggestions is very much appreciated.. thanx.. 

[asgallant]

You need to get the chartWrapper's chart object, and then use the #getSelection method from that:

google.visualization.events.addListener(table.getChart(), 'select', function () {
    var selection = table.getChart().getSelection();
    // do something with selection
}); 

[byteME]

Many thanks for your reply.

I have just tried.. It worked in my test-code after adding getChart() to the line var selection = table.getChart().getSelection();

I will soon post a comment when I incorporate into my actual code..

thanks again.. 

[byteME]

I have just tried it in my actual code.. The getSelection() method works but when i filter the table its rows changes but the selection remains same with reference to the dataTable. so when i select a row after filtering I cannot get the right row's data.. 

On Monday, 13 August 2012 21:10:08 UTC+1, byteME wrote:

[asgallant]

The row in the selection refers to the row in the DataView used to draw the table; you need to translate that row back into the original DataTable.  Use the same method as in this answer, except you get the row from #getSelection instead of the event property.

Incidentally, if you are just fetching data, you can use the view rather than translating back to the original DataTable, as long as the view has the columns you need. 

[byteME]

I understand the problem is that the filtering changes the table row numbers but the associated data retrieved from the data source does not change... I attached the code both below and a separate file...

      var dashboard, table, data;

 

 function drawVisualization() {

        

var array = new Array(['ticker','time','bid','open','high','low','volume']);

var ticker, time, bid, open, high, low, volume;

$.get('php/getdata.php', {input: 'stocklist'}, function(data1){

$.each(data1, function(index, value){

ticker = value.ticker;

time = value.time;

bid = parseFloat(value.bid);

open = parseFloat(value.open);

high = parseFloat(value.high);

low = parseFloat(value.low);

volume = parseFloat(value.volume);

array.push([ticker, time, bid, open, high, low, volume]);

});

        data = google.visualization.arrayToDataTable(array);

        var stringFilter = new google.visualization.ControlWrapper({

          'controlType': 'StringFilter',

          'containerId': 'control1',

          'options': {

            'filterColumnLabel': 'ticker'

          }

        });

        table = new google.visualization.ChartWrapper({

          'chartType': 'Table',

          'containerId': 'chart1',

          'options': {'showRowNumber': false, 'height': '130px', 'width': '1000px'}

        });

        dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))

dashboard.bind(stringFilter, table);

dashboard.draw(data);

 

google.visualization.events.addListener(table, 'select', selectHandler);

      }, "json");

 }

 

 function selectHandler() {

var selection = table.getChart().getSelection();

      

 for (var i = 0; i < selection.length; i++) {

var item = selection[i];

if (item.row != null && item.column != null) {

} else if (item.row != null) {

stockID = data.getFormattedValue(item.row, 0);

} else if (item.column != null) {

stockID = data.getFormattedValue(0, item.column);

}

}

if (stockID == '') {

return;

}

alert(stockID);

    }

      

      google.setOnLoadCallback(drawVisualization);

 

 

 

  

On Monday, 13 August 2012 21:10:08 UTC+1, byteME wrote:

[asgallant]

In your selectHandler function, you need to get the DataView that the chart was built on, and then either pull values directly from the view

// replaces the "for" loop in the selectHandler function 

var view = chart.getDataTable();

for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {}

    else if (item.row != null) {

        stockID = view.getFormattedValue(item.row, 0);  // references view instead of data 
    }

    else if (item.column != null) {

        stockID = view.getFormattedValue(0, item.column);  // references view instead of data
    }
} 

or translate the row and column indices into the row and column indices of the underlying DataTable, 

// replaces the "for" loop in the selectHandler function 
var view = chart.getDataTable();

for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {}

    else if (item.row != null) {

              // #getTableRowIndex translates the row index in the view into the row index in the DataTable
        stockID = data.getFormattedValue(view.getTableRowIndex(item.row), 0);
    }

    else if (item.column != null) {

              // #getTableColumnIndex translates the column index in the view into the column index in the DataTable
        stockID = data.getFormattedValue(0, view.getTableColumnIndex(item.column));

[byteME]

It works now.. I thank you for your kind help.. I will post comments when I fully incorporate it into my program.. Thankx again..

On Monday, 13 August 2012 21:10:08 UTC+1, byteME wrote: