Google Graphique message de chargement

Je le script suivant qui fonctionne, mais il a un problème gênant:Google Graphique message de chargement

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

Le problème est que, parfois, le tableau peut prendre beaucoup de temps à apparaître pour diverses raisons. Lorsque cela se produit, l'en-tête se charge, suivi du graphique, suivi du pied de page. Cela semble horrible IMO. IMO, la page entière devrait charger, y compris le pied de page, et un message de "chargement" plat devrait être affiché jusqu'à ce que le graphique soit prêt à s'afficher, ou un gif animé jusqu'à ce que le graphique soit prêt.

Comment puis-je charger la page entière et afficher un message de chargement jusqu'à ce que le graphique soit prêt, au lieu que le pied de page manque, le pied de page apparaît soudainement une fois le chargement du graphique terminé?

Source

2010-11-01 oshirowanen

Placez le script au bas du fichier HTML. Cela ne fera pas un écran de chargement, mais cela empêchera le navigateur de bloquer pendant le chargement du graphique.

Pour obtenir un effet de chargement, les graphiques de Google remplaceront le innerHTML du div que vous pointez, de sorte que vous puissiez y conserver un message de chargement (quel que soit le format souhaité) et qu'il soit écrasé lorsque le graphique charges.

Source

2010-11-03 12:23:09

Je ne discuterais pas si c'était l'année 2003, mais c'est un peu trop old-school. Vous ne pouvez pas supposer que DOM est prêt même lorsque le script est à la fin du fichier. bozdoz a donné la bonne réponse. L'utilisation de $ (fonction) provoque l'exécution du code à l'intérieur après que DOM soit prêt. – naugtur

Merci pour la reconnaissance naugtur! :) – bozdoz

Est-ce que Google Charts efface le graphique div en charge?

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

Définir la hauteur du préchargeur égale au graphique résultant. Si le préchargeur n'est pas effacé, vous devez ajouter un rappel au chargement du diagramme pour le supprimer.

Source

2010-11-03 12:19:26

Je voudrais utiliser un gestionnaire onload pour appeler les fonctions de graphique. Il devrait attendre le chargement de la page, puis ajouter le graphique.

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

Si cela ne fonctionne pas, vous pourriez peut-être ajouter un gestionnaire de charge à la div pied de page.

Source

2010-11-03 12:24:21 bozdoz

Vous pouvez également tirer parti de Google Chart events pour savoir quand le graphique a été chargé et effectuer une action. Cela peut vous obliger à masquer initialement le conteneur de graphique ou à superposer une icône de chargement. Exemple:

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

Source

2014-10-13 14:04:26

Répondre

Questions connexes