google-visualization - Google ビジュアライゼーション カテゴリ フィルタ

Question

Google ビジュアライゼーションでダッシュボードを作成しました。私のダッシュボードには、ChartWrapper を使用して描画されたテーブルがあり、カテゴリ フィルターを使用して列の 1 つでテーブルをフィルター処理しています。フィルター処理されたテーブルの行の 1 つを選択すると、2 番目のテーブルがポップアップするという選択イベントもあります。私の問題は、テーブルをフィルタリングして行の 1 つをクリックした後、2 番目のテーブルに正しい情報がないことです。フィルター処理されたテーブルのすべての行は、フィルター処理されていない最初の行から値を取得しているようです。フィルター処理されたテーブルで更新されたデータを取得し、選択イベントを使用する方法を知っていますか? 以下は私のコードの一部です：

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