谷歌可視化類別過濾器

我做了一個儀表板與谷歌可視化。我的儀表板有一個藉助ChartWrapper繪製的表格，我藉助於類別過濾器在一列中過濾表格。我也有一個select事件，通過選擇過濾表中的一行，第二個表將被彈出。我的問題是，篩選表格並單擊其中一行後，第二個表格沒有正確的信息。似乎過濾表上的所有行都從第一個未過濾的行中獲取它們的值。你有什麼想法我可以如何獲得已過濾表格上的更新數據並使用select事件？以下是我的代碼部分：谷歌可視化類別過濾器

function drawDashboard() { 

    dataUrl = $("#site_promotion_summary")[0].attributes["data-google-chart-url"].value; 
    hip_get_dataTable(dataUrl, function (response) { 
     var dataTable = response.getDataTable(); 

     // Define a category picker control for the SiteTypeName column 
     var categoryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'category_picker', 
      'options': { 
       'filterColumnLabel': 'SiteTypeName', 
       'ui': { 
        'labelStacking': 'vertical', 
        'allowTyping': false, 
        'allowMultiple': false 
       } 
      } 
     }); 

     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'site_promotion_summary', 
      //'dataTable': dataTable, 
      'view': { 'columns': [0, 1, 4, 5, 6, 7, 8, 9] } 
     }); 
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).bind(categoryPicker, table).draw(dataTable); 

     //Select event 
     google.visualization.events.addListener(table, 'select', function() { 
      var selection = table.getChart().getSelection(); 
      for (var i = 0; i < selection.length; i++) { 
       var item = selection[i]; 
       var promos = dataTable.getValue(item.row, 3); 

       if (item.row != null && promos >= 2) { 
        var str = dataTable.getValue(item.row, 0); 
        var selectedSiteId = dataTable.getValue(item.row, 2); 
        var selectedRowPosition = $(".google-visualization-table-tr-sel").position(); 
        drawDetail(selectedSiteId, selectedRowPosition.top + 190); 

       } 

      } 
}); 
    }); 
} 

function drawDetail(siteId, positionTop) { 
    dataUrl = $("#detail_table")[0].attributes["data-google-chart-url"].value; 
    var dataUrlFormatted = dataUrl.replace("{0}", siteId); 
    hip_get_dataTable(dataUrlFormatted, function (response) { 
     var dataTable = response.getDataTable(); 
     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'detail_table', 
      'dataTable': dataTable, 
      'options': { 'width': '800px', 'height': '300px' } 

     }); 

     //format the wholesale and retail columns 
     var formatter = new google.visualization.TableNumberFormat(
     { prefix: "$", negativeColor: 'black', negativeParens: true }); 
     formatter.format(dataTable, 1); 
     formatter.format(dataTable, 2); 

     //format the orderItemCount column 
     var formatter = new google.visualization.TableNumberFormat(
     { groupingSymbol: "," }); 
     formatter.format(dataTable, 3); 

     table.draw(); 



     $("#detail_table").css({ 
      position: "absolute", 
      top: positionTop + "px", 
      left: "400px", 
      "background-color": "white" 

     }).show(); 

    }); 

    $("#detail_table").click(function (event) { 
     event.preventDefault(); 
     $(this).hide(); 
    }); 
}

來源

2012-06-24 user1476134

您是否曾遇到針對此問題的解決方案？同樣的情況發生在我身上，但是用餅圖而不是桌子。 –

在您選擇收聽，我們將創建一個包含過濾數據的數據視圖：

var filteredView = table.getDataTable();

然後，而不是在監聽使用DataTable，則會使用filteredView：

var promos = dataTable.getValue(item.row, 3);

來源

2014-01-23 20:42:29 hesscj

谷歌可視化類別過濾器

回答

相關問題