google visualization category filter

Ik heb een dashboard met google-visualisatie gemaakt. Mijn dashboard heeft een tabel die is getekend met behulp van ChartWrapper en ik filter de tabel op een van de kolommen met behulp van categoriefilter. Ik heb ook een select-evenement dat door een van de rijen in de gefilterde tabel te selecteren, er een tweede tabel wordt weergegeven. Mijn probleem is dat na het filteren van de tabel en het klikken op een van de rijen, de tweede tabel niet de juiste informatie heeft. Het lijkt erop dat alle rijen in de gefilterde tabel hun waarde krijgen uit de eerste ongefilterde rij. Heb je enig idee hoe ik de bijgewerkte gegevens op de gefilterde tabel kan krijgen en de selectiegebeurtenis kan gebruiken? Het volgende maakt deel uit van mijn 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();
    });
}
2
Heb je ooit een oplossing voor dit probleem gevonden? Hetzelfde gebeurt met mij, maar met een cirkeldiagram in plaats van een tabel.
toegevoegd de auteur Miki de Arcayne, de bron

1 antwoord

Op uw geselecteerde luisteraar zullen we een DataView maken die de gefilterde gegevens bevat:

 var filteredView = table.getDataTable();

Dan in plaats van dataTable in de luisteraar te gebruiken, gebruik je filteredView:

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