CODEWITHSUNDEEP
javascriptcssgoogle-visualization
Khrys
Khrys

Reputation: 2774

Google chart (Table) restyling after sort

I am using the following code to restyle the table, but everytime I sort a column, the table lose the styles. There is a way to keep it?

google.visualization.events.addListener(table, 'ready', function () {
    $(".google-visualization-table-table").find('*').each(function (i, e) {
        var classList = e.className ? e.className.split(/\s+/) : [];
        $.each(classList, function (index, item) {
            if (item.indexOf("google-visualization") === 0) {
                $(e).removeClass(item);
            }
        });
    });

    $(".google-visualization-table-table")
        .removeClass('google-visualization-table-table')
        .addClass('table table-bordered table-striped table-condensed table-hover')
        .css("width", "85%");
});

Upvotes: 4

Views: 1103

Answers (2)

Krzysztof Tomaszewski
Krzysztof Tomaszewski

Reputation: 1144

With current Google Charts (as of 06.09.2014) following solution was working:

var applyStyling = function() {
    // some restyling code:
    $(".google-visualization-table-table").find('*').each(function (i, e) {
        var classList = e.className ? e.className.split(/\s+/) : [];
        $.each(classList, function (index, item) {
            if (item.indexOf("google-visualization") === 0) {
                $(e).removeClass(item);
            }
        });
    });
    $(".google-visualization-table-table")
        .removeClass('google-visualization-table-table')
        .addClass('table table-bordered table-striped table-condensed table-hover')
        .css("width", "85%");
}

// ...

var table = new google.visualization.Table(document.getElementById('table_div'));

google.visualization.events.addListener(table, 'sort', applyStyling);
applyStyling();

Upvotes: 1

asgallant
asgallant

Reputation: 26340

I think the only way to achieve what you want is to use manual sorting. The Table will fire a "sort" event when the user clicks on a table header, and you can hook up an event handler to get the sort information, sort the data, set appropriate options, and redraw the Table.

To do this, set the Table's sort option to event, and create a "sort" event handler.

If table in your code is a Table object, this is what it would look like:

google.visualization.events.addListener(table, 'sort', function (e) {
    var view = new google.visualization.DataView(data);
    view.setRows(data.getSortedRows({column: e.column, desc: !e.ascending}));
    options.sortAscending = e.ascending;
    options.sortColumn = e.column;
    table.draw(view, options);
});

If table is a ChartWrapper object, you need to tweak this a bit, and add it to the wrapper's "ready" event handler in your code:

google.visualization.events.addListener(table.getChart(), 'sort', function (e) {
    var view = table.getView();
    view.rows = data.getSortedRows({column: e.column, desc: !e.ascending});
    table.setView(view);
    table.setOption('sortAscending', e.ascending);
    table.setOption('sortColumn', e.column);
    table.draw();
});

Upvotes: 1

Related Questions