我如何使用ChartWrapper在儀表板中獲取選擇

我試圖在Google儀表板ChartWrapper中獲取事件。我如何使用ChartWrapper在儀表板中獲取選擇

我需要，當我選擇一行我可以拋出一個事件，並獲得選定的值。

任何人都可以幫助我或說我怎麼得到它？

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

來源

2014-04-09 Juan Nub

要做到這一點，你需要做的繪製圖表後的兩件事：

將'ready'事件偵聽器添加到您的圖表包裝器中;
當圖表包裝就緒時，向表中添加一個'select'事件偵聽器。

所以，加myDashboard.draw(table);後，下面兩行代碼中的

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秒鐘的延遲纔會觸發就緒功能，由於我覺得一個bug，看這裏有關此問題的錯誤報告的更多詳細信息：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

來源

2015-01-23 14:41:42 Tony

我如何使用ChartWrapper在儀表板中獲取選擇

回答

相關問題