Graph Events google.setOnLoadCallback() and scope...

[byteME]

I am trying to click on a table row and display the relevant chart.. At the moment for testing purposes, I am trying to display an simple chart, but it does not work as intended. The code I have so far is below.. I guess the problem is to do with google.setOnLoadCallback() or with the scope of my variables and function.. Any help and suggestion is greatly valued.. thanks..

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var table;

var chart;

var array = new Array(['ticker','time','bid','open','high','low','volume']);

var ticker, time, bid, open, high, low, volume;

var tableData;

var chartData;

var options = {

'showRowNumber': false, 

'height': '500px'

};

//--------------------------------------------------------------------------------------------

$.get('php/getstocklist.php', function(dt){

$.each(dt, function(index, value){

ticker = value.ticker;

time = value.time;

bid = parseFloat(value.bid);

open = parseFloat(value.open);

high = parseFloat(value.high);

low = parseFloat(value.low);

volume = parseFloat(value.volume);

array.push([ticker, time, bid, open, high, low, volume]);

});

}, "json");

//--------------------------------------------------------------------------------------------

function drawTable() {

    tableData = google.visualization.arrayToDataTable(array);

table= new google.visualization.Table(document.getElementById('table'));

table.draw(tableData, options);

google.visualization.events.addListener(table, 'select', function(){

google.setOnLoadCallback(drawChart);

});

    }

//--------------------------------------------------------------------------------------------

function drawChart() {

    chartData = google.visualization.arrayToDataTable([['Mon', 20, 28, 38, 45]], true);

    chart = new google.visualization.CandlestickChart(document.getElementById('chart'));

    chart.draw(chartData, {legend:'none', width:600, height:400});

    }

//--------------------------------------------------------------------------------------------

    google.setOnLoadCallback(drawTable); 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

[asgallant]

Your event handler shouldn't set google.setOnLoadCallback - by this time, the API has already loaded and the callback executed, so this does nothing for you.  What you want is to call the drawChart function directly:

google.visualization.events.addListener(table, 'select', function() {
    drawChart();
});

Also, it is generally better practice to set up the event listeners before you call the chart's draw method (I don't think it matters in your case here, but it does in other cases, so it's best to get in the habit).