0

Tengo un dashboard que se muestra en la pantalla principal cuando el usuario inicie sesión.

Inicialmente tengo dos gráficas, una de líneas y una de barras. El problema es que las consultas de las gráficas son un poco pesadas y se demoran aproximadamente 30 segundos en cargar.

Ya hice optimización de las consultas y se mejoraron un poco, el problema es que al querer acceder a otras opciones del menú de la página no me deja, porque me toca esperar hasta que se carguen las gráficas.

Es íncomodo al usuario esperar hasta que las gráficas carguen, quisiera saber si hay una manera de que se pueda acceder a otras opciones de la página sin importar que las gráficas esten cargando.

El código que tengo es el siguiente:

/*
* Se obtienen las urls que tiene acceso el usuario en el dashboard. Esto se                  *  ejecuta cuando el usuario este en la pantalla principal.
*/
  $.getJSON(getBaseUri() + 'dashboard/index', function(data) {

    var datas  = data['return'];

    if(datas == ""){
      $productivities.removeClass('chartID');
      $productions.removeClass('chartID');
      $combox.addClass('hidden');
    }

    for (var i in datas) {
      receiveData({
        div       : datas[i].div,
        title     : datas[i].privilege,
        sign      : datas[i].sign,
        iconClass : datas[i].class,
        id        : datas[i].id,
        label     : datas[i].label,
        xaxis     : datas[i].xaxis,
        yaxis     : datas[i].yaxis,
        background: datas[i].background,
        url       : datas[i].route,
        type      : datas[i].type
      });
    }
  });

/*
   * La función receiveData() recibe los parámetros de los dashboard que tiene acceso el usuario y trae los data de cada controlador consultado, y de acuerdo al tipo de gráfica se ejecuta la función.
   */
  function receiveData(param) {

    $.ajax({
      url: param.url,
      method: 'GET',
      dataType: 'json',
      success: function(data){
        var datas = data['return'];

        if(param.type === "LineChart"){
          lineChart({
            data : datas,
            div  : param.div,
            title: param.title,
            url  : param.url
          });
          $loaderProduction.addClass("hidden");
        }

        if (param.type === "BarChart") {
          barCharts({
            data      : datas,
            div       : param.div,
            title     : param.title,
            url       : param.url,
            label     : param.label,
            xaxis     : param.xaxis,
            yaxis     : param.yaxis,
            background: param.background
          });
          $loaderProductivity.addClass('hidden');
        }

        if (param.type === "Indicator") {
          indicatorsChart({
            data  : datas,
            div   : param.div,
            title : param.title,
            icon  : param.sign,
            class : param.iconClass,
            idDash: param.id
          });
        }

        if (param.type === "Sowing") {
          sowingIndicator({
            data  : datas,
            div   : param.div,
            title : param.title,
            idDash: param.id
          });
        }
      },
      error: function(error){
        console.log(error);
      }
    });
  }

Basicamente estas son las funciones que estoy usando para mostrar las gráficas del dashboard.

10
  • 1
    ¿Qué opciones del sistema? No entiendo lo que no te funciona, todo parece estar en orden en el código y la ejecución de las llamadas parece asíncrona, ¿qué problema tienes exactamente?. ¿Podrías poner un ejemplo mínimo, completo y verificable? Gracias. Commented el 7 feb. 2017 a las 7:31
  • ¿Quieres decir que básicamente la UI se bloquea mientras realizas la petición AJAX?
    – gugadev
    Commented el 7 feb. 2017 a las 11:38
  • Sí, cuando el usuario inicia sesión y quiere dar clic en un menú que tiene el sistema, no puede porque toca esperar hasta que las gráficas carguen, entonces lo que quiero es que se pueda acceder a las otras opciones del menú sin importar que las gráficas esten cargando @guzgarcia Commented el 7 feb. 2017 a las 12:35
  • Al iniciar sesión se empiezan a cargar las gráficas, pero se demoran un poco, pero si el usuario quiere acceder a otras opciones del menú del programa no deja porque toca esperar hasta que las gráficas carguen, entonces no sé si hay una manera de que las gráficas carguen por debajo @OscarGarcia Commented el 7 feb. 2017 a las 12:49
  • Por defecto todas las llamadas a [$.ajax()](http://api.jquery.com/jQuery.ajax/) producen una llamada asíncrona a no ser que se indique lo contrario con el parámetro async: false y $.getJSON es un alias de $.ajax(), por lo que no debería darte problemas a no ser que hay otro problema más. ¿Podrías darme la URL o generar un ejemplo verificable como te pedí? Commented el 7 feb. 2017 a las 13:58

1 respuesta 1

0

Intenta buscar información de ajax MultiThread, o lo que más se conoce como ajax asincrono y sincrono, que habla sobre varias peticiones para ajax al mismo tiempo, quizás este enlace pueda servirte de algo

https://facilphp.wordpress.com/2010/11/22/ajax-asincrono-y-sincrono/

4
  • Voy a revisar el enlace gracias :) @CarlosEstarita Commented el 7 feb. 2017 a las 13:21
  • Aca también te dejo otro, que al parecer pudo ayudar a otra persona que tenia tu mismo problema. pero esta en ingles: stackoverflow.com/questions/10468772/… Commented el 7 feb. 2017 a las 13:32
  • Por defecto todas las llamadas a [$.ajax()](http://api.jquery.com/jQuery.ajax/) producen una llamada asíncrona a no ser que se indique lo contrario con el parámetro async: false y $.getJSON es un alias de $.ajax(), por lo que esa información no soluciona el problema. Aún así gracias por el esfuerzo :) PD: Único soporte de multithread para Javascript: developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/… Commented el 7 feb. 2017 a las 14:01
  • Se me pasó el tiempo de edición antes de poder agregar datos de compatibilidad. Por ahora sólo es compatible Chrome, Firefox y Opera. Ni Safari ni navegadores móviles iOS ni Android son compatibles. Es un estándar aún en desarrollo: caniuse.com/#feat=sharedworkers Commented el 7 feb. 2017 a las 14:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.