Как заставить скрипт срабатывать, когда до него доскроллишь?
var circle_viewed = false;  // Вспомогательная переменная
    var circle_scroll = $('.circle');     // Класс самой диаграммы
    var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы 

$(window).scroll(function(){
        if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
            $('.circle-1').circleProgress({  // Если докрутили, инициализируем 
                size: 160,
                startAngle: -1.55,
                value: 0.9,
                fill:{ color: "#30bae7"}
            }).on('circle-animation-progress', function(event, progress) {  // Рисуем проценты во время анимации
                $(this).find('strong').html(parseInt(90 * progress) + '<i>%</i>');
            });

            circle_viewed = true;
});
//  эта конструкция ((parseFloat(offset.top)) - parseFloat($(window).height())) делает следующее, когда вы долистываете до нужно диаграммы, то отсчет пикселей начинается с верхней части экрана пользователя, соответственно мы отнимаем высоту экрана и получается что когда долистываем до диаграммы снизу экрана, то она будет стартовать.
circle_viewed - это если мы один раз просмотрели диаграмму, то второй раз когда мы к ней долистаем, её анимировать не надо.
jQuery, разумеется, должен быть подключен.
BohdanK Спасибо за помощь, но у меня 5 разных диаграмм с разными ID, как в таком случае сделать? в условие вместо одной запихнуть 5? Так вроде не работает, да и переменная у нас вверху только одна объявлена
В данный момент код такойvar circle_viewed = false;  // Вспомогательная переменная
    var circle_scroll = $('#perc1');     // Класс самой диаграммы
    var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы 

$(window).scroll(function(){
        if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
            $('#perc1').circleProgress({
				value: 0.10,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(10 * progress));
			});
			$('#perc2').circleProgress({
				value: 0.15,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(15 * progress));
			});
			$('#perc3').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc4').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc5').circleProgress({
				value: 0.55,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(50 * progress));
			});

            circle_viewed = true;
});