Where is my data going?

I'm writing a a bar chart using the Google chart tool.

Here is my code:

 function drawBar(){
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Project');
    data2.addColumn('number', '2011 Fiscal Spending');
    data2.addRows(5);


    // Gather Data

    $.getJSON("/Organizations/TopFiveSpending",{orgName : "Office of Technology"},function(data){
        $(data).each(function(i,e){
                          //data2 is populating fine here when i debug
                          data2.setValue(i,0,e.ProjectName); 
                          data2.setValue(i,1,e.TotalFYSpending);          
            })
        });


    barGraph = new google.visualization.ColumnChart(document.getElementById('portfolio-total-spending'));

    var options = {width: 250, height: 190, legend: 'none',
                      hAxis: {title: 'Project', titleTextStyle: {color: 'red'}}
                     };
    //data2 has null data here
    barGraph.draw(data2,optio开发者_StackOverflow社区ns);
    google.visualization.events.addListener(barGraph, 'onmouseover', function(e) {
    console.log('barGraph hover '+e['row']);
     table.setSelection([{row:e['row']}]);
    });


    }

My chart never draws anything and I'm not getting any errors in my console. When I debug the code I not that data2 is populating with data correctly. However when the barGraph.draw() function is called the data is gone. I have commented in the code where this takes place. Any idea how to fix this?

You could try populating your graph with data within the JSON callback function, it's possible that when you pass the data2 object to the graph function it has not yet been populated.