2011-10-10 16 views
5

AntecedentesjQuery - Actualización jquery.sparkline después de obtener los datos asincrónicos

estoy usando jquery.sparkline para producir Pie Charts. Los datos para el gráfico circular están contenidos en una matriz.

Cuando se carga la página por primera vez, se llama a un servicio web (utilizando .ajax) para obtener los datos, la devolución de llamada especificada toma los datos recibidos y actualiza la matriz asociada con el gráfico circular.

Ese mismo proceso de actualización se invoca cuando un menú desplegable en la pantalla cambia el valor.

Situación

si fijo el .ajax llaman a Asynch = false todo esto funciona bien.

Si configuré la llamada .ajax a asynch = true, los resultados que se muestran en el gráfico siempre son 'una actualización detrás'. Con esto quiero decir que no hay pastel inicialmente y luego, cuando se cambia el menú desplegable, el pastel se representa como debería haber sido inicialmente.

Código

$.ajax({ 
    type: "GET", 
    contentType: "application/json; charset=utf-8", 
    url: requestURL, 
    async: true , 
    success: function (data) { successCallback(data); }, 
    error: function (data) { failureCallback(data); } 
}); 

Ayuda? ¿Alguien por ahí reconoce este problema?

Opciones He estado buscando en variaciones en el patrón de observador para vigilar un cambio en la matriz y la (no sé cómo) persuadir al objeto jquery.sparkline volver a dibujar en sí pero esto parece una locura y estoy Seguro que debo estar pasando por alto algo mucho más directo.



Gracias a Gareth y su código de ejemplo que era capaz de ver lo que estaba haciendo mal (que no había nada que ver con jquery.sparkline.

tuve algunas funciones como este :

function RefreshPieChart(){ 
    //First call managePieDataFetch() 
    //to kick off the web-service request 

    managePieDataFetch(); 

    //now reinitialise the jquery.sparkline 
    //pie charts on the basis that the 
    //array variable initialised in 
    //pieDataFetchCallBack() has the newest 
    //data in it. 
    // 
    //.... It hasn't ! 
} 
function managePieDataFetch(){ 
    //invoke the .ajax call and 
    //provide function pieDataFetchCallBack() as 
    //a call back function 
} 
function pieDataFetchCallBack(){ 
    //post process the data 
    //returned from a successful 
    //ajax call. Place the results 
    //into an array variable at 
    //script scope 
} 

Respuesta

7

que iba a necesitar para ver un ejemplo más completo para determinar dónde está el problema, pero utilizando asíncrono:. verdadera funciona bien para mí

Aquí hay un enlace a un ejemplo muy simple de trabajo: http://omnipotent.net/jquery.sparkline/ajaxtest.html

La fuente para el lado Ajax es aquí: http://omnipotent.net/jquery.sparkline/ajax.phps

Si el gráfico está oculto (es decir. display: none) en el momento en que realmente se llama .sparkline(), puede que necesite llamar a $ .sparkline_display_visible() en el punto en que el gráfico se hace visible para forzar que se represente en ese punto.

+0

Gracias a su código de ejemplo me dio la confianza de que lo que estaba haciendo era correcto desde el punto de vista de jquery.sparklines y me permitió ver lo que realmente estaba haciendo mal (hacer suposiciones tontas sobre cómo funcionan las llamadas asincrónicas) – glaucon

+0

He dicho que he editado mi pregunta original para ampliar lo que estaba haciendo mal con la esperanza de que pueda informar a alguien más. – glaucon

+0

@gareth su primer hipervínculo devuelve un error 404 – hughesdan

Cuestiones relacionadas