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.
