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).
On Monday, August 6, 2012 6:34:41 AM UTC-4, byteME wrote:
>
>
>
> 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);
>
>
> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/pRJRHnB2pewJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
