谷歌可视化类别过滤器

我做了一个仪表板与谷歌可视化。我的仪表板有一个借助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

谷歌可视化类别过滤器

回答

相关问题