title: jquery - update jquery.sparkline after async data fetch
body: <p><strong>Background</strong></p>
  
  <p>i'm using <a href="http://omnipotent.net/jquery.sparkline/" rel="nofollow">jquery.sparkline</a> to produce <a href="http://omnipotent.net/jquery.sparkline/#pie" rel="nofollow">Pie Charts</a>. The data for the Pie Chart is contained in an array.</p>
  
  <p>When the page is first loaded a web-service is called (using .ajax) to get the data, the callback specified there takes the received data and updates the array associated with the pie chart. </p>
  
  <p>That same update process is invoked when a dropdown on the screen changes value.</p>
  
  <p><strong>Situation</strong></p>
  
  <p>If I set the .ajax call to asynch=false this all works fine.</p>
  
  <p>If I set the .ajax call to asynch=true the results shown in the pie are always 'one refresh behind'. By this I mean there's no pie initially and then when the dropdown is changed the pie is rendered as it should have been initially.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>$.ajax({
      type: "GET",
      contentType: "application/json; charset=utf-8",
      url: requestURL,
      async:   true ,
      success: function (data) { successCallback(data); },
      error: function (data) { failureCallback(data); }
  });
  </code></pre>
  
  <p><strong>Help?</strong>
  Anyone out there recognise this problem ?</p>
  
  <p><strong>Options</strong>
  I've been looking at variations on the Observer pattern to monitor a change to the array and the (not sure how) persuade the jquery.sparkline object to redraw itself but this seems crazy and I'm sure I must be overlooking something much more straightforward.</p>
  
  <hr>
  
  <hr>
  
  <p>Thanks to Gareth and his sample code I was able to see what I was doing wrong (which wasn't anything to do with jquery.sparkline.</p>
  
  <p>I had some functions like this :</p>
  
  <pre><code>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
  }
  </code></pre>