mensaje gráfico de carga

tengo el siguiente script que funciona, pero tiene un problema molesto:mensaje gráfico de carga

<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 tiempo en aparecer por varias razones. Cuando esto sucede, el encabezado se carga, seguido por el gráfico, seguido por el pie de página. Esto se ve horrible IMO. IMO, se debe cargar toda la página, incluido el pie de página, y debe mostrarse un mensaje de "carga ... plana" hasta que el gráfico esté listo para mostrarse, o un archivo .gif animado hasta que el gráfico esté listo.

¿Cómo puedo hacer que toda la página cargue y muestre un mensaje de carga hasta que el gráfico esté listo, en lugar de perder el pie de página, aparece el pie de página una vez que el gráfico ha terminado de cargarse?

Fuente

2010-11-01 oshirowanen

Coloque la secuencia de comandos en la parte inferior del archivo HTML. Esto no hará una pantalla de carga, pero esto evitará que el navegador bloquee mientras se carga el gráfico.

Para obtener un efecto de carga, los Gráficos de Google sobrescribirán el innerHTML del div que lo está apuntando, para que pueda mantener un mensaje de carga allí (en el formato que desee) y se sobrescribirá cuando el gráfico cargas.

Fuente

2010-11-03 12:23:09

No discutiría si fue en el año 2003, pero eso es demasiado antiguo. No puede suponer que DOM está listo incluso cuando el script se encuentra al final del archivo. bozdoz ha dado la respuesta correcta. Usar $ (función) hace que el código interno se ejecute después de que DOM esté listo. – naugtur

Gracias por el reconocimiento naugtur! :) – bozdoz

¿Google Chart borra el gráfico div en la carga?

/* style.css */ 
.preloader { 
    height:350px; background:url(../images/spinner.gif) center center no-repeat; 
}

Establezca la altura del precargador igual al gráfico resultante.

<!-- HTML --> 
<div id="chart_div"><div class="preloader">&nbsp;</div></div>

Si no se borra el preloader, debe agregar una devolución de llamada en la carga del gráfico para borrarlo.

Fuente

2010-11-03 12:19:26

Usaría un controlador de carga para llamar a las funciones del gráfico. Debería esperar a que la página se cargue, luego agregar el gráfico.

$(function(){ 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChartAjax); 
});

Si esto no funciona, tal vez podría agregar un manejador de carga al separador de pie de página.

Fuente

2010-11-03 12:24:21 bozdoz

También puede aprovechar Google Chart events para escuchar cuando el gráfico se haya cargado y realizar una acción. Es posible que necesite ocultar inicialmente el contenedor del gráfico o superponer un ícono de carga. Ejemplo:

google.visualization.events.addListener(chart, 'ready', function() { 
      // Do something like ... 
      /* $('#chart_div').css('visibility', 'visible'); // provided this was already hidden 
      $('.loading-icon').hide(); // if it exists in your HTML */ 
     });

Fuente

2014-10-13 14:04:26

Respuesta

Cuestiones relacionadas