Google Chart Loading Message
Solution 1:
Put the script at the bottom of the HTML file. This won't do a loading screen, but this will prevent the browser from blocking while the chart loads.
To get a loading effect, Google's Charts will overwrite the innerHTML of the div
you're pointing it to, so you can keep a loading message in there (in whatever format you desire) and it will get overwritten when the chart loads.
Solution 2:
I would use an onload handler to call the chart functions. It should wait for the page to load, then add the chart.
$(function(){
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChartAjax);
});
If this doesn't work, perhaps you could add a load handler to the footer div.
Solution 3:
Does Google Charts clear the chart div on load?
/* style.css */.preloader {
height:350px; background:url(../images/spinner.gif) center center no-repeat;
}
Set the height of the preloader equal to the resulting chart.
<!-- HTML --><divid="chart_div"><divclass="preloader"> </div></div>
If it doesn't clear the preloader, you should add a callback on chart load to clear it.
Solution 4:
You can also take advantage of Google Chart events to listen for when the chart has loaded and perform an action. It may require you to initially hide the chart container or overlay a loading icon. Example:
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 */
});
Post a Comment for "Google Chart Loading Message"