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.
$.ajax()
](http://api.jquery.com/jQuery.ajax/
) producen una llamada asíncrona a no ser que se indique lo contrario con el parámetroasync: 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í?