2014-04-09 3 views
0

Google 대시 보드 ChartWrapper에서 이벤트를 가져 오려고합니다.ChartWrapper로 대시 보드에서 Selection을 얻는 방법

나는 내가 이벤트를 던져 선택한 값을 얻을 수있는 행을 선택할 때 필요합니다.

아무도 나를 도울 수 없거나 어떻게 할 수 있습니까?

Here's 내 코드 :

<script type="text/javascript" src="//www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', {packages: ['controls']}); 
    </script> 
    <script type="text/javascript"> 


    var data; 
    var table; 
    var dash_container; 
    var myDashboard; 
    var stringFilter; 
    var myTable; 


    function draw() { 
     // To see the data that this visualization uses, browse to 
     // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ 
     data = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=0Ai3BbtO5JfaodGluSWw0UVFvZ3BDak1nYzVac0RPWGc&pub=1'); 

     // Send the query with a callback function. 
     data.send(handleQueryResponse); 


    } 
    //fin de draw 

    function handleQueryResponse(response) { 

     if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
     } 

     table = response.getDataTable(); 

     // Create a dashboard. 
     dash_container = document.getElementById('dashboard'), 
     myDashboard = new google.visualization.Dashboard(dash_container); 

     // Define a StringFilter control for the 'Name' column 
     stringFilter = new google.visualization.ControlWrapper({ 
     'controlType': 'StringFilter', 
     'containerId': 'filter', 
     'options': {'filterColumnLabel': 'nombre'} 
     }); 

     // Table visualization 
     myTable = new google.visualization.ChartWrapper({ 
     'chartType' : 'Table', 
     'containerId' : 'table', 
     'view': {'columns': [0]} , 
     'dataTable': table 
     }); 


    // Register a listener to be notified once the dashboard is ready. 
     google.visualization.events.addListener(myDashboard, 'ready', dashboardReady); 


     myDashboard.bind(stringFilter, myTable); 

     myDashboard.draw(table); 


    } 

** Here's 내가 선택 행

function dashboardReady() { 

     google.visualization.events.addListener(myTable, 'select', function(event) { 

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


     // iterate over all selected rows 
     for (var i = 0; i < selection.length; i++) { 
      // do something with selection[i].row 
      var item = selection[i]; 
     } 
     alert('Fila seleccionada es: '+item.row +' y la Columna: '+item.column); 
    }); 
     } 

    google.setOnLoadCallback(draw); 

답변

2

를 얻을 수 있기 때문에이 문제가, 당신이해야 할 것을해야 할 일 차트 후 두 가지가 그려집니다 :

  1. 이 차트 래퍼에 '준비'이벤트 리스너를 추가;

  2. 차트 래퍼가 준비되면 테이블에 'select'이벤트 수신기를 추가하십시오.

그래서, 준비 기능이 트리거 될 때까지 내가 생각 버그로 여기를 참조 인해

google.visualization.events.addListener(myTable , 'ready', function(){ 
    google.visualization.events.addListener(myTable ,'select', tableSelectHandler); 
}); 


function tableSelectHandler(){ 
    var selection = myTable.getChart().getSelection(); 
    alert(data.getValue(selection[0].row,0)); 
} 

, 약 3 초 지연이있을 것입니다 코드에 myDashboard.draw(table); 후 다음 두 줄을 추가 이 문제에 대한 버그 신고에 대한 자세한 내용은 https://code.google.com/p/google-visualization-api-issues/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Stars%20Modified%20Type%20Status%20Priority%20Milestone%20Owner%20Summary&groupby=&sort=&id=1470

관련 문제