Google-charts remove column with multiple checkboxes

Question

languages: jQuery, javascript

Code below: Working well.

(...)
var check_box_values = $('#myForm [type="checkbox"]:not(:checked)').map(function () 
{
    return this.value;
}).get();

Code below: Working well.

function f(check_box_values)
{
    (...)
    var obj = jQuery.parseJSON(jsonData);
    var data = google.visualization.arrayToDataTable(obj);

Code below: for cycle goes fine but if statement never starts

for (var i = 1; i < data.getNumberOfColumns()-1; i++)
{
    if ($.inArray(i, check_box_values) > -1) 
    { 
        data.removeColumn(i);
    }
}

Html code: Working well.

What am I doing wrong? note: the check_box_values array is populated.

edit: (eg.)
getNumberOfColumns: 6

check_box_values array: [1,3,5]

Answer 1

I see a problem in your code. Once data.removeColumn is called, the column index will be reset, and the result from getNumberOfColumns() will be different than what you expect. In the other words, this function is not designed to be called inside a loop.

Here is an example. Suppose you have five columns with the columIndex ranging from 0-4. You like to remove the 3rd (columnIndex: 2) and the 5th (columnIndex: 4) column. Once your code has been executed the first time, ie, removeColumn(2), the column index will get shifted and the getNumberOfColumns() will become 4. If you call removeColumn(4), it will cause run-time error because the index is not pointing to any column. You should call removeColumn(3) instead.