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. On Jul 5, 2011 12:39 AM, "scott5616" <[email protected]> wrote: > 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); > }); > > -- > You received this message because you are subscribed to the Google Groups "Google Visualization API" group. > 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. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
