Display a loader until all the ajax requests are uploaded

I have to show a loader on a page that shows graphs and I need to show the loader until they do not load all.

The problem is that the loader is displayed in a very short time and is hidden before they load all the contents.

The code is as follows:

/*
     * Se obtienen las urls que tiene acceso el usuario en el dashboard.
     */
    $.getJSON(getBaseUri() + 'dashboard/index', function(data) {
        var datas = data['return'];
        var urls = [];
        var idDash = [];
        var types = [];
        /*
         * Recorro el data para enviar los datos de cada dashboard
         */
        for (var i in datas) {
            //Se guardan las urls, los id de las dashboard y las descripciones en un arreglo
            urls.push({
                url: datas[i].route,
                id: datas[i].id,
                title: datas[i].privilege,
                div: datas[i].div
            });
            idDash.push(datas[i].id); //Se guardan los id de las dashboard en un arreglo
            types.push(datas[i].type); //Se guardan los tipos de dashboard en un arreglo
            /*
             * Envío los parámetros a la función receiveData()
             */
            receiveData(datas[i].route, datas[i].sign, datas[i].class, datas[i].div, datas[i].privilege, datas[i].type, types, idDash, datas[i].id, urls, datas[i].label, datas[i].xaxis, datas[i].yaxis, datas[i].background);
        }
    });
    /*
     * La función receiveData() recibe los parámetros de los dashboard que tiene acceso el usuario y trae los data de cada url consultada.
     */
    function receiveData(url, sign, iconClass, div, title, type, types, idDash, id, urls, label, xaxis, yaxis, background) {

/* 
 * Consulta de cada uno de los controladores y envía el data a cada una de las                funciones
*/

         $.ajax({
           url: url,
           method: 'GET',
           dataType: 'json',
           success: function(data){
             var datas = data['return'];
             if (type === "Bar") {
                 barChart(datas, title, div, type, types, idDash, id, urls);
             }
             if (type === "Indicator") {
                 indicatorsChart({
                     data: datas,
                     div: div,
                     title: title,
                     icon: sign,
                     class: iconClass,
                     idDash: id
                 });
             }
             if (type === "Sowing") {
                 sowingIndicator({
                     data: datas,
                     div: div,
                     title: title,
                     idDash: id
                 });
             }
             if (type === "BarChart") {
                 barCharts({
                     data: datas,
                     div: div,
                     title: title,
                     url: url,
                     label: label,
                     xaxis: xaxis,
                     yaxis: yaxis,
                     type: sign,
                     background: background
                 });
             }
           },
           error: function(error){
             console.log(error);
           }

         });
    }

To the AJAX function I added the loader in the beforeSend , it works but only once and already, I also use the events .ajaxStart() and .ajaxStop() and they do not work for me.

This is the HTML:

<div id="loading" class="text-center margin">
    <h3>Un momento por favor...</h3>
  </div>

<div class="col-lg-12 no-margin no-padding">
        <canvas id="productivity" width="500" height="270"></canvas>
      </div>
      <div class="col-lg-12 no-margin no-padding">
        <canvas id="plantProduction" width="500" height="300"></canvas>
      </div>

This is what I have tried and it does not work:

$(document).bind("ajaxSend", function(){
     $loading.show();
   }).bind("ajaxComplete", function(){
     $loading.hide();
   });

Is there any way to show the loader until all the requests are complete?

Thank you.