show loading box before flot chart generates

Question

I am trying to display loading box before the flot chart is updated. on document load it works fine however when i use click events on the buttons the loading box only appears after the flot chart has updated.

following doc ready works.

function showLoadGraph() {
    $("#loading-div-background").removeAttr( 'style' );
    $("#loading-div-background").css({display:"block"});
    console.log("showLoadGraph");
}

function hideLoadGraph() {
    $("#loading-div-background").css({display:"none"});
    console.log("hideLoadGraph");
}
$(document).ready(function() {
    //api.loadActivityIndicator();
    //$("#loading-div-background").css({ opacity: 0.8 });

    showLoadGraph();
...
$.ajax({
        url: 'flot_network_ajax.php',
        type: 'GET',
        data: 'action=network_availability&' + params,
        dataType: 'json',
        success: function(data) {
            ajax_data = data.rows;

            //process data
            var availability_object = loopInitial(data.rows,"sevendays","");

            var json_object = calculateAvailability(availability_object);

            rePlot(json_object);
            api.hideActivityIndicator();
            hideLoadGraph();
            },
        error: function(e) {
            //called when there is an error
            console.log(e.responseText);
        }
    });

Once initial load is over, i try displaying the loading box on click events but it only changes after flot has updated. Following is placed in doc.ready

//today click event
    $("#group_period input").change(function(){
        showLoadGraph();
        var id = $(this).attr('id');
        var to = false;
        if (id == "yesterday" || id == "lastmonth")
            to = true;
        var availability_object = loopInitial(ajax_data,id,to);     
        var json_object = calculateAvailability(availability_object);
        rePlot(json_object);
    });

UPDATE

I have added timer to check where it is taking very long. It is actually taking long processing chartdata than the chart itself. If I try to show a loading box before chart data processing it still does not show

start sevendays process: 1450369631807
Object {vfvftfvf: Array[0], vfvf: Array[0], tfvf: Array[0]}
finish sevendays process: 1450369639141
process sevendays duration : 7.334s
start graph render: 1450369639141
[Object]
finish graph render: 1450369639179
process graph render duration : 0.038s

Answer 1

I set timeout of 1 sec to allow loading box to appear as mentioned in this post