Control google chart load order

[scott5616]

Hi all,

I am in the process of building a dashboard using google visualization
and jquery. So far, the dashboard has a collection of the tables that
contains data from a external database. Now, I would like to use the
data from an existing table to create a google bar chart using
specified values obtained from filtering the table, etc...

I have the main table loading at this stage, and have defined a
function to create the chart, but there is a problem with the load
order in that the table takes longer to render than it takes for the
parse to reach the code to draw the chart; when adding an alert
function call I notice the chart is rendered correctly.

Looking around the net, I am unable to see how load ordering could be
implemented. If anyone has experience then please let me know - code
example below:

$(function(tableData){
$.getJSON('src/getDefects.php', {r: $_POST['q'], p: $_POST['p']},
function(reldata) {
var data = new google.visualization.DataTable();
data.addRows(reldata.length);
data.addColumn('string','DatabaseID');
data.addColumn('string','Synopsis');
data.addColumn('string','Target Release');
data.addColumn('string','State');
$.each(reldata, function(k, val){
data.setCell(k, 0, val.dbid);
data.setCell(k, 1, val.synopsis);
data.setCell(k, 2, val.target_rel);
data.setCell(k, 3, val.state);
});

var options =
{'showRowNumber':false ,'allowHtml':true ,sortColumn:
1 ,sortAscending:false
,page:'enable' ,width:'100%' ,pagingSymbols:
{next:'next' ,prev:'prev'}};

var v = new google.visualization.DataView(data);
v.setColumns([1,2,3,4,5]);

// get distinct values from view list.
states = v.getDistinctValues(4);

//itterate through unique states and push on to the array.
$.each(states, function(k, val){
cols.push(val);
rows.push(v.getFilteredRows([{column: 4, value:
val}]).length);
});

if(v.getNumberOfRows() > 0){
var tableData = new
google.visualization.Table(document.getElementById('table' +
verString));
tableData.draw(v,options);
}else{
$('div#table' + verString).prepend('<p><strong>No Issues
could be found.</strong></p>');
}
});
google.setOnLoadCallback(tableData);
});

google.load('visualization', '1');
$(function dtable() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [cols,rows],
options: {'title': 'Issues by State'},
containerId: 'viz'
});
wrapper.draw();
//google.setOnLoadCallback(dtable);
});

[Riccardo Govoni ☢]

I'm not sure I entirely understand from your code the dependency that exists between the table and the chart (they both seem powered to me by data computed from a single input source, hence I don't understand why you couldn't assemble and draw the chart in the same place where its cols, rows data are computed, instead of using a separate function like you do, which causes the async ordering issue you mention).

Anyway, assuming such a dependency exists, all the visualizations fire a 'ready' event whenever they are drawn. By attaching a listener (google.visualization.events.addListener) on the ready event fired by the table, and drawing the chart from inside the listener callback, you have the guarantee that the chart will be drawn after the table.

/R.

> --
> You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
> To post to this group, send email to google-visua...@googlegroups.com.
> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
>