Geek Answers Handbook

Google chart upload message

I have the following script that works, but has one nasty problem:

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

The problem is that sometimes a chart can take a long time for various reasons. When this happens, the header is loaded, followed by the chart, and then the footer. It looks awful IMO. IMO, the entire page should be loaded, including the footer, and the flat message "loading .." should be displayed until the graph is ready to display itself or an animated gif until the graph is ready.

How can I make the entire page load and display a downloadable message until the graph is ready, instead of the absence of a footer, the footer will suddenly appear after the graph has finished loading?

+5
4

script HTML . , .

, Google Charts innerHTML div, , ( , ), .

+17

onload . , .

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

, , div .

+6

Google div ?

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

, .

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

, , .

+4

Google Chart, , . , . :

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

More articles:


All Articles