How to put Loader image in Jqplot charts untill the data is fetched completely and then show chart?

Question

i am using jqplot chart in my jsp page now there is more then 6 charts am showing in my one jsp page

• My problem is for each chart there is a ajax request which request the data from database and fetch the result and show in chart...it takes some time when there is thousands of rows in database..

so i want to put some loader image in each div and show charts when that div's charts ajax request is completed.

• i have tried the things but not succeeded .. when i tried to put image via ("#fl2").innerHtml when ajax start and on success i just remove that image then its not populating my jqplot charts

following is one of my div in which chart is loading

in my jsp page

<div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"></div>

and my ajax function is as follows which genrate the charts

function PieChartsCampByOrg(pUrl, pLoaderPath) {
    // Setup the placeholder reference

    $.ajax({
        type : 'post',
        url : pUrl,
        success : function(rawdata) 
                                      {
                    var total = rawdata.split(";");
                    var totalcount = 0;
                    var txt = null;
                    for ( var i = 1; i < total.length - 1; i++) 
                                           {
                        if (i == 1) {
                            txt = "[{ label: \"" + total[i] + "\", data: "
                                    + total[i + 1] + "}";
                        }

                        else {
                            txt = txt + ",  { label: \"" + total[i]
                                    + "\", data: " + total[i + 1] + "}";                        }

                        totalcount = parseInt(totalcount) + parseInt(total[i + 1]);
                        i++;

                    }

                    txt = txt + "];";

                    if (totalcount == 0 || data == null || data == 'undefined') {
                        labeltext = "Total Campaign: "
                                + totalcount
                                + "  <br> Statistic Type: Campaigns By Organization";
                    } else {

                        labeltext = "Total Campaign: "
                                + totalcount
                                + "  <br> Statistic Type: Campaigns By Organization";
                    }

                    document.getElementById('piecamporg').innerHTML = labeltext;

                    elem = $('#fl_3');

                    var data = eval(txt);

                    // Setup the flot chart using our data
                    $.plot(elem, data, {
//
                        //
                         series: {
                                pie: {
                                    show: true,
                                    radius: 1,
                                    label: {
                                        show: false,
                                        radius: 2 / 3,
                                        formatter: function (label, series) {
                                            return '<div style="font-size:7pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';

                                        },
                                        threshold: 0.1
                                    }
                                }
                            },
                        grid : {
                            hoverable : true,
                            clickable : true
                        },
                        colors : [ "#245779", "#85c441", "#e88b2f", "#bb43f2",
                                "#3073a0", "#9C2323", "#183b52", "#8cc7e0",
                                "#64b4d5", "#3ca0ca", "#2d83a6", "#22637e",
                                "#174356", "#0c242e" ]
                    // colors: [ "#b4dbeb", "#8cc7e0", "#64b4d5", "#3ca0ca",
                    // "#2d83a6", "#22637e", "#174356", "#0c242e" ]
                    });
                    // Create a tooltip on our chart
                    elem.qtip({
                        prerender : true,
                        content : 'Loading...', // Use a loading message
                        // primarily
                        position : {
                            viewport : $(window), // Keep it visible within
                            // the window if possible
                            target : 'mouse', // Position it in relation to
                            // the mouse
                            adjust : {
                                x : 7
                            }
                        // ...but adjust it a bit so it doesn't overlap it.
                        },
                        show : true, // We'll show it programatically, so no
                        // show event is needed
                        style : {
                            classes : 'ui-tooltip-shadow ui-tooltip-tipsy',
                            tip : false
                        // Remove the default tip.
                        }
                    });

                    // Bind the plot hover
                    elem
                            .on(
                                    'plothover',
                                    function(event, pos, obj) {

                                        // Grab the API reference
                                        var self = $(this), api = $(this)
                                                .qtip(), previousPoint, content,

                                        // Setup a visually pleasing rounding
                                        // function
                                        round = function(x) {
                                            return Math.round(x * 1000) / 1000;
                                        };

                                        // If we weren't passed the item object,
                                        // hide the tooltip and remove cached
                                        // point data
                                        if (!obj) {
                                            api.cache.point = false;
                                            return api.hide(event);
                                        }

                                        // Proceed only if the data point has
                                        // changed
                                        previousPoint = api.cache.point;
                                        if (previousPoint !== obj.seriesIndex) {
                                            percent = parseFloat(
                                                    obj.series.percent)
                                                    .toFixed(2);
                                            // Update the cached point data
                                            api.cache.point = obj.seriesIndex;
                                            // Setup new content
                                            content = obj.series.label + ' ('
                                            + obj.series.data[0][1] + ')';

                                            // Update the tooltip content
                                            api.set('content.text', content);
                                            // Make sure we don't get problems
                                            // with animations
                                            // api.elements.tooltip.stop(1, 1);
                                            // Show the tooltip, passing the
                                            // coordinates
                                            api.show(pos);
                                        }
                                    });

                }
            });

}

above is my ajax call...its quite complex function but what i just want is to display loader until the ajax success hope any one got the solution...i know there should be some simple solution but am not much proficient in ajax..

Answer 1

To show the loader image you can use following html structure :

<style type="text/css">
  .loader_Image{
    background-image: url('Path_to_loaderImage\loader.gif');
    width:100%;
    height:100%;
 }
</style>    

<div id="chart_Container" style="width:100%;height:100%;">   
  <div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"></div>
  <div class="loader_Image"/>  
</div>

<script type="text/javascript>
  $(document).ready(function(){
    $('.loader_Image').hide();

  });

 function PieChartsCampByOrg(pUrl, pLoaderPath) {
  // Setup the placeholder reference
  $('.loader_Image').show();
  $('#fl_3').hide();

  $.ajax({
    type : 'post',
    url : pUrl,
    success : function(rawdata) 
  {
           $('.loader_Image').hide();
           $('#fl_3').show();
                var total = rawdata.split(";");
                var totalcount = 0;
                var txt = null;
                for ( var i = 1; i < total.length - 1; i++) 
                                       {
                    if (i == 1) {
                        txt = "[{ label: \"" + total[i] + "\", data: "
                                + total[i + 1] + "}";
                    }

                    else {
                        txt = txt + ",  { label: \"" + total[i]
                                + "\", data: " + total[i + 1] + "}";                        }

                    totalcount = parseInt(totalcount) + parseInt(total[i + 1]);
                    i++;

                }

                txt = txt + "];";

                if (totalcount == 0 || data == null || data == 'undefined') {
                    labeltext = "Total Campaign: "
                            + totalcount
                            + "  <br> Statistic Type: Campaigns By Organization";
                } else {

                    labeltext = "Total Campaign: "
                            + totalcount
                            + "  <br> Statistic Type: Campaigns By Organization";
                }

                document.getElementById('piecamporg').innerHTML = labeltext;

                elem = $('#fl_3');

                var data = eval(txt);

                // Setup the flot chart using our data
                $.plot(elem, data, {
                  //
                    //
                     series: {
                            pie: {
                                show: true,
                                radius: 1,
                                label: {
                                    show: false,
                                    radius: 2 / 3,
                                    formatter: function (label, series) {
                                        return '<div style="font-size:7pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';

                                    },
                                    threshold: 0.1
                                }
                            }
                        },
                    grid : {
                        hoverable : true,
                        clickable : true
                    },
                    colors : [ "#245779", "#85c441", "#e88b2f", "#bb43f2",
                            "#3073a0", "#9C2323", "#183b52", "#8cc7e0",
                            "#64b4d5", "#3ca0ca", "#2d83a6", "#22637e",
                            "#174356", "#0c242e" ]
                // colors: [ "#b4dbeb", "#8cc7e0", "#64b4d5", "#3ca0ca",
                // "#2d83a6", "#22637e", "#174356", "#0c242e" ]
                });
                // Create a tooltip on our chart
                elem.qtip({
                    prerender : true,
                    content : 'Loading...', // Use a loading message
                    // primarily
                    position : {
                        viewport : $(window), // Keep it visible within
                        // the window if possible
                        target : 'mouse', // Position it in relation to
                        // the mouse
                        adjust : {
                            x : 7
                        }
                    // ...but adjust it a bit so it doesn't overlap it.
                    },
                    show : true, // We'll show it programatically, so no
                    // show event is needed
                    style : {
                        classes : 'ui-tooltip-shadow ui-tooltip-tipsy',
                        tip : false
                    // Remove the default tip.
                    }
                });

                // Bind the plot hover
                elem
                        .on(
                                'plothover',
                                function(event, pos, obj) {

                                    // Grab the API reference
                                    var self = $(this), api = $(this)
                                            .qtip(), previousPoint, content,

                                    // Setup a visually pleasing rounding
                                    // function
                                    round = function(x) {
                                        return Math.round(x * 1000) / 1000;
                                    };

                                    // If we weren't passed the item object,
                                    // hide the tooltip and remove cached
                                    // point data
                                    if (!obj) {
                                        api.cache.point = false;
                                        return api.hide(event);
                                    }

                                    // Proceed only if the data point has
                                    // changed
                                    previousPoint = api.cache.point;
                                    if (previousPoint !== obj.seriesIndex) {
                                        percent = parseFloat(
                                                obj.series.percent)
                                                .toFixed(2);
                                        // Update the cached point data
                                        api.cache.point = obj.seriesIndex;
                                        // Setup new content
                                        content = obj.series.label + ' ('
                                        + obj.series.data[0][1] + ')';

                                        // Update the tooltip content
                                        api.set('content.text', content);
                                        // Make sure we don't get problems
                                        // with animations
                                        // api.elements.tooltip.stop(1, 1);
                                        // Show the tooltip, passing the
                                        // coordinates
                                        api.show(pos);
                                    }
                                });

            }
        });
    }
  </script>