problem reloading data from javascript array

jackalbright

I have a datatable that gets its data from a javascript array of objects. When I load the data the first time all is fine:

    yearlyTable = $('#yearlyReportTable').DataTable( {
        "data":datatables_raw_data,
        "pagingType": "full_numbers",
        "scrollY":     true,
        "scroller": {
            "loadingIndicator": true
            },
        "rowId": 'period',
        "columns": [
            { 
                "data": "period" ,
                "width": "25%"
            },
            { 
                "data": "subtotal" ,
                "width": "25%"
            },
            { 
                "data": "total",
                "width": "25%"
            },
            { 
                "data": "num_invoices",
                width:"25%"
            }
        ]
    } );

Periodically, the contents of the datatables_raw_data array will change, at which time I want to refresh datatables.

I tried doing this but the table does not change. I can confirm that the array contains valid data. My data is available in the global scope.

if(the_data_changed){
yearlyTable.data = yearArray;
yearlyTable.draw();
}

Is this the wrong approach to the problem?