Question

I have the following code:

 //creates a DataTable. don't worry about this. this works
var projectData = createDataView(json);

// Create and draw the visualization.
var table = new google.visualization.ChartWrapper({
    chartType: "Table",
    containerId: "projectChart"
});

// add user filter
var userFilter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'userFilter',
    'options': {
        'filterColumnLabel': 'User'
    }
});

var dashboard = new google.visualization.Dashboard(
            document.getElementById('projectChartContainer'))
        .bind(userFilter, table);

function drawTable() 
{
    dashboard.draw(projectData, {
        'allowHtml': true,
        showRowNumber: true,
        title: "Project Data",
        width: middleWidth
    });


    // google visualization styles
    $(".google-visualization-table-td-number").addClass("small");
    $(".google-visualization-table-td-center").addClass("eighty");
}

// set width 
middleWidth = $("#contentMiddle").width();
drawTable();

// if user resized the browser, change the width and redraw.  
//this is ugly, but the only way i could find. 100% was buggy
$(window).resize( function() {
    middleWidth = $(window).width()-142;
    drawTable();
});

// add a change listener to table
google.visualization.events.addListener(table, 'ready', function() {                    
    // get hour totals
    var workedHours = 0;
    var billedHours = 0;

    // THIS IS WHERE I NEED HELP!!!!!       
    /*var dataLength = table.getNumberOfRows();
    for (var x = 0; x < dataLength; x++)
    {
        workedHours += table.getValue(x, 7);
        billedHours += table.getValue(x, 9);
    }
    $("#totalWorked").text(workedHours);
    $("#totalBilled").text(billedHours);
    $("#totalsContainer").show();*/

    console.log(projectData.getValue(1,1));
});

Everything works fine as far as the table displaying and filtering. What I need is a way to grab the newly filtered table’s column totals. I can use projectData.getValue() to get the values the first time, but it returns the same values no matter what is filtered out. I could have no rows in the newly drawn table and it will show the same values as it did originally. I’m not really surprised because I’m really just changing the table and listening for it to be redrawn. But I cannot get any values from the table. The functions I have above for table (ie…table.getNumberOfRows()) do not exist. That’s just what I would like to happen. Any ideas of how to get the new column values of a filtered table?

Answer 1

My suggestion is to turn the table data in to a datatable first with var tableData = table.getDataTable();

That dataTable will be filtered and ordered as shown in your table. You can then run your for() loop on tableData:

for (var x = 0; x < tableData.getNumberOfRows(); x++)
{
    workedHours += tableData.getValue(x, 7);
    billedHours += tableData.getValue(x, 9);
}
$("#totalWorked").text(workedHours);
$("#totalBilled").text(billedHours);
$("#totalsContainer").show();