Mensagem de carregamento do gráfico do Google
Eu tenho o seguinte script que funciona, mas tem um problema irritante:
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChartAjax);
function drawChartAjax() {
$.ajax({
url: 'chart_json.aspx',
type: 'POST',
dataType: 'json',
success: function(data) {
drawChart(data);
}
});
}
function drawChart(json) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'User');
data.addColumn('number', 'v');
data.addRows(json.length);
for(var j in json) {
for(var k in json[j]) {
data.setValue(parseInt(j), 0, k);
data.setValue(parseInt(j), 1, json[j][k].v);
}
}
var chart = new google.visualization.PieChart( document.getElementById('chart_div') );
chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Titles goes here'});
}
</script>
</head>
<body>
<div id="header">header goes ehre</div>
<div id="chart_div"></div>
<div id="footer">footer goes here</div>
</body>
</html>
O problema é que, às vezes, o gráfico pode demorar para aparecer por vários motivos. Quando isso acontece, o cabeçalho é carregado, seguido pelo gráfico, seguido pelo rodapé. Parece IMO terrível. Na IMO, a página inteira deve carregar, incluindo o rodapé, e uma mensagem plana "loading .." deve ser exibida até que o gráfico esteja pronto para exibição, ou um gif animado até que o gráfico esteja pronto.
Como faço para que a página inteira carregue e exiba uma mensagem de carregamento até que o gráfico esteja pronto, em vez de ter o rodapé ausente, então o rodapé aparecerá subitamente quando o gráfico terminar de carregar?