Jquery sparkline does not work when loading remote HTML content

To speed the load time for a page on my site I use jquery to load a remote page that contains usage statistics and a usage chart.

By allowing the primary page to load first - and then loading the stats content separately I was able to dramatically reduce the primary page load time - improving user experience.

The page's initial design loaded the stats content in line and displayed one of the elements using sparkline.js:

class="sparkline" data-values="1,2,3"

The problem was that when I loaded this content using:
$(document).ready(function(){ $("#people-list").load("stats-source.asp");
The sparkline js wasn't applying to the remotely loaded content. The solution was to fire the sparkline JS again after the content was loaded: <script> $(document).ready(function(){ $( "#stats" ).load( "stats-source.asp", function() { // alert( "Load was performed." ); $('.sparkline').each(function(){ var $box = $(this).closest('.infobox'); var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF'; $(this).sparkline('html', {tagValuesAttribute:'data-values', type: 'bar', barColor: barColor , chartRangeMin:$(this).data('min') || 0} ); }); }); }); </script>
By applying the sparkline js function after successful load, the sparkline appeared just fine on the HTML loaded sparkline data.
Happy coding.