google visualization category filter

Question

I have made a dashboard with google visualization. My dashboard has a table that is drawn with the help of ChartWrapper and I filter the table by one of the columns with the help of category filter. I have a select event as well that by selecting one of the rows on the filtered table, a second table will be popped up. My problem is that after filtering the table and clicking on one of the rows the second table doesn't have the correct information. It seems that all the rows on the filtered table get their value from the first unfiltered row. Do you have any idea how I can get the updated data on the filtered table and use the select event? The following is part of my code:

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

Answer 1

On your select listener we will create a DataView that contains the filtered data:

 var filteredView = table.getDataTable();

Then instead of using dataTable in the listener, you use filteredView:

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