Fire jquery animation when scrolled to - animation

Question

Im using some jquery to animate a bar graph but it is far enough down the page that the user will need to scroll to see it.
How do I set it to animate when the user has scrolled to its location.
arrayOfDataMulti = new Array(
[[936656,556247],'2005'],
[[913318,453238],'2006'],
[[921707,362327],'2007'],
[[894496,376587],'2008'],
[[738624,326656],'2009'],
[[759379,311336],'2010'],
[[746972,332962],'2011'],
[[666210,295708],'2012'],
[[568817,286204],'2013'],
[[548247,315037],'2014']
);
arrayOfDataMultiForSort = new Array(
[[936656,556247],'2005'],
[[913318,453238],'2006'],
[[921707,362327],'2007'],
[[894496,376587],'2008'],
[[738624,326656],'2009'],
[[759379,311336],'2010'],
[[746972,332962],'2011'],
[[666210,295708],'2012'],
[[568817,286204],'2013'],
[[548247,315037],'2014']
);
arrayOfColors = new Array('#006446','#6ebd44');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors,legends: ['Scope 1 / Direct','Scope 2 / Indirect'],
legend: true });
$('#multiMulti').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, type: 'multi' });
$('#multiDyn').html(",<br /> type: 'multi'");
});
$('#multiLegend').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, legend: true, legends: ['ads','leads','google ads'] });
$('#multiDyn').html(",<br /> legends: ['ads','leads','google ads'],<br /> legend: true");
});
$('#multiSortDesc').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMultiForSort, colors: arrayOfColors, sort: 'desc' });
$('#multiDyn').html(",<br /> sort: 'desc'");
});
$('#multiPrePost').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, prefix: '$', postfix: 'k' });
$('#multiDyn').html(",<br /> prefix: '$',<br /> postfix: 'k'");
});
$('#multiHideValues').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, showValues: false });
$('#multiDyn').html(",<br /> showValues: false");
});
$('#multiNoAnimate').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, animate: false });
$('#multiDyn').html(",<br /> animate: false");
});
$('#multiClear').click(function(){
$('#exampleMulti').html('');
$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors });
$('#multiDyn').html("");
});
</script>

Answer 1

Will this answer serve your purposes?
function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
If not, there are some other good answers in that thread, including jQuery's $().appear() function.