CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
Stelios Voskos
Stelios Voskos

Reputation: 524

Applying DataView on DataTable with duplicate values

I have a table and one of its columns has multiple duplicates. I want to filter all the rows that have the same value on the column at once. I tried to use the getFormattedValue() method which gets the value of a column and then I applied the usual code for DataView. When I click on the row, it disappears all the rows of the table except of the selected one and it doesn't filter all the rows with the duplicate value on the column. Here is my code so far:

var table = new google.visualization.Table(document.getElementById('chart_div'));
var items = " ";
table.draw(dataTable, {width: 1000, height: 300});
google.visualization.events.addListener(table, 'select',
    function(event) {
        var selection = table.getSelection();
        var view = new google.visualization.DataView(dataTable);
        for(i = 0; i < row.length; i++){
            var items == dataTable.getFormattedValue(i, i);
            if(items = "anti-social-behaviour"){
                console.log("if statement");
                view.setRows([selection[i].row]);
                table.draw(view, []);
            }
        }
    });

If anyone could spot the problem it wold be much appreciated. Thank you.

Upvotes: 0

Views: 1073

Answers (1)

asgallant
asgallant

Reputation: 26340

I see many problems with this code. First off, where is row coming from in this line?

for(i = 0; i < row.length; i++){

Second, you are testing the formatted value of (i, i) in the data set, which checks (0, 0), then (1, 1), then (2, 2), etc. instead of checking an entire row or column. Third, on these lines:

view.setRows([selection[i].row]);
table.draw(view, []);

You are setting the rows to be used in the view to the row property of the ith element in selection (which may be undefined, since there is nothing stopping i from growing larger than the length of selection). The setRows method sets the entire row set to use for the view, so each time you call that, you are setting the rows to (a maximum of) 1 row, and then drawing the table with the view, which is why you see only 1 row in the table.

If you want to filter the table to display only rows that have a value matching the value in the selected row, this is what you need to use:

google.visualization.events.addListener(table, 'select', function(event) {
    var selection = table.getSelection();
    if (selection.length) {
        var filterView = new google.visualization.DataView(dataTable);
        filterView.setColumns([{
            type: 'string',
            sourceColumn: 1, // set this column to be whatever column you want to check for duplicate values
            calc: 'stringify'
        }]);
        var value = filterView.getValue(selection[0].row, 0);
        var rows = filterView.getFilteredRows([{column: 0, value: value}]);
        var view = new google.visualization.DataView(dataTable);
        view.setRows(rows);
        table.draw(view, []);
    }
});

Upvotes: 1

Related Questions