Google messaggio grafico carico

Ho il seguente script che funziona, ma ha un problema fastidioso:Google messaggio grafico carico

<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>

Il problema è che a volte il grafico può richiedere molto tempo a comparire per vari motivi. Quando ciò accade, l'intestazione viene caricata, seguita dal grafico, seguita dal piè di pagina. Questo sembra terribile IMO. IMO, l'intera pagina dovrebbe essere caricata, incluso il piè di pagina, e un messaggio di "caricamento .." piatto dovrebbe essere visualizzato fino a quando il grafico non è pronto per essere visualizzato, o una gif animata finché il grafico non è pronto.

Come posso caricare tutta la pagina e visualizzare un messaggio di caricamento finché il grafico non è pronto, invece di mancare il piè di pagina, quindi il piè di pagina viene visualizzato all'improvviso al termine del caricamento del grafico?

fonte

2010-11-01 oshirowanen

Inserire lo script nella parte inferiore del file HTML. Questo non farà una schermata di caricamento, ma ciò impedirà al browser di bloccarsi mentre il grafico viene caricato.

Per ottenere un effetto di caricamento, Google Charts sovrascrive il innerHTML dello div a cui si sta puntando, in modo da poter mantenere un messaggio di caricamento (in qualsiasi formato desiderato) e verrà sovrascritto quando il grafico carichi.

fonte

2010-11-03 12:23:09

Non vorrei discutere se fosse l'anno 2003, ma è un po 'troppo vecchia scuola. Non puoi supporre che DOM sia pronto anche quando lo script è alla fine del file. bozdoz ha dato la risposta corretta. Usa $ (funzione) causa l'esecuzione del codice all'interno dopo che DOM è pronto. – naugtur

Grazie per il riconoscimento naugtur! :) – bozdoz

Google Charts cancella il grafico div in caricamento?

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

Impostare l'altezza del preloader uguale alla tabella risultante.

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

Se non cancella il preloader, è necessario aggiungere una richiamata sul caricamento del grafico per cancellarla.

fonte

2010-11-03 12:19:26

Vorrei utilizzare un gestore di carico per chiamare le funzioni del grafico. Dovrebbe attendere il caricamento della pagina, quindi aggiungere il grafico.

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

Se ciò non funziona, è possibile aggiungere un gestore di carico al div footer.

fonte

2010-11-03 12:24:21 bozdoz

È inoltre possibile utilizzare Google Chart events per ascoltare quando il grafico è stato caricato ed eseguire un'azione. Potrebbe essere necessario nascondere inizialmente il contenitore del grafico o sovrapporre un'icona di caricamento. Esempio:

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 */ 
     });

fonte

2014-10-13 14:04:26

Google messaggio grafico carico

risposta

Problemi correlati