Mensaje de carga del gráfico de Google
Tengo el siguiente script que funciona, pero tiene un problema molesto:
<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>
El problema es que a veces el gráfico puede tardar mucho en aparecer por varias razones. Cuando esto sucede, se carga el encabezado, seguido del gráfico, seguido del pie de página. Esto se ve horrible IMO. En mi opinión, se debe cargar toda la página, incluido el pie de página, y se debe mostrar un mensaje plano de "cargando ..." hasta que el gráfico esté listo para mostrarse, o un gif animado hasta que el gráfico esté listo.
¿Cómo puedo cargar la página completa y mostrar un mensaje de carga hasta que el gráfico esté listo, en lugar de que falte el pie de página, entonces el pie de página aparece de repente una vez que el gráfico ha terminado de cargarse?