title: How to put Loader image in Jqplot charts untill the data is fetched completely and then show chart?
body: <p>i am using   <a href="http://www.jqplot.com/tests/" rel="nofollow">jqplot</a> chart in my jsp page now there is more then 6 charts am showing in my one jsp page</p>
  
  <ul>
  <li>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..</li>
  </ul>
  
  <p>so i want to put some loader image in each div and show charts when that div's charts ajax request is completed.</p>
  
  <ul>
  <li>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</li>
  </ul>
  
  <p>following is one of my div in which chart is loading</p>
  
  <p>in my jsp page</p>
  
  <pre><code>&lt;div id="fl_3"style="height: 250px; width: 100%; margin: 50px auto 0"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and my ajax function is as follows which genrate the charts</p>
  
  <pre><code>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 &lt; 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
                                  + "  &lt;br&gt; Statistic Type: Campaigns By Organization";
                      } else {
  
                          labeltext = "Total Campaign: "
                                  + totalcount
                                  + "  &lt;br&gt; 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 '&lt;div style="font-size:7pt;text-align:center;padding:2px;color:white;"&gt;' + label + '&lt;br/&gt;' + series.data[0][1] + '&lt;/div&gt;';
  
                                          },
                                          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);
                                          }
                                      });
  
                  }
              });
  
  }
  </code></pre>
  
  <p>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..</p>