Geek Answers Handbook

Jquery - update jquery.sparkline after receiving async data

Background

I am using jquery.sparkline to create Pie Charts . The data for the pie chart is contained in an array.

When the page is first loaded, the web service is called (using .ajax) to retrieve the data, the callback specified there accepts the received data and updates the array associated with the pie chart.

The same update process is called up when the pop-up menu on the screen changes the value.

Situation

If I set the .ajax call to asynch = false, all this works fine.

If I set the .ajax call to asynch = true, the results shown in the pie are always "updated for." By this, I mean that at first there is no pie, and then when the drop-down menu changes, the pie is displayed as it should have been originally.

the code

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

Help Does anyone know this problem?

Functions I looked at options for the Observer pattern to observe an array change and (not sure how) to convince the jquery.sparkline object to redraw, but it seems crazy, and I'm sure I should be missing something a lot more direct.

Thanks to Gareth and his sample code, I was able to see what I was doing wrong (which had nothing to do with jquery.sparkline.

I had some functions:

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
}
+5
1

, , , async: true .

: http://omnipotent.net/jquery.sparkline/ajaxtest.html

ajax : http://omnipotent.net/jquery.sparkline/ajax.phps

(.. display: none) , .sparkline(), $.sparkline_display_visible() , , .

+7

More articles:


All Articles