Отложенный запуск скрипта
 

Есть скрипт вывода диаграмм - CanvasJS, для отложенного запуска использую viewportChecker, то есть что бы скрипт запускался когда страница прокручивается до нужного элемента. Проблема в том что в таком виде (ниже пример) скрипт не работает, но если записать его например в custom.js и подключить файл то работает как надо, в чем может быть проблема?

<script>
jQuery('.chart').viewportChecker({
        classToAdd: 'animated fadeIn',
    offset: 100,
        callbackFunction: function(elem, action){
    jQuery(document).ready(function(){
    var chart = new CanvasJS.Chart("chartContainerPie2",
    {
            animationEnabled: true,
        legend:{
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },
        data: [
        {       
            type: "pie",
            toolTipContent: "{legendText}: <strong>{y}%</strong>",
            indexLabel: "{label} {y}%",
            dataPoints: [
                {  y: 35, legendText },
                {  y: 20, legendText },
                {  y: 18, legendText },
                {  y: 15, legendText },
                {  y: 5, legendText   },
                {  y: 7, legendText   }
            ]
    }
    ]
    });
    chart.render();
  }
             )}, 
});
</script>

<div class="chart" id="chartContainerPie2" style="height: 300px; float: left;width: 60%;"></div>

akefa,
строка 6 должна быть максимум нулевой

В таком варианте вообще отказывается работать (

akefa,
строки 31 и и часть 32 вы тоже пренесли вниз?

akefa,

jQuery(document).ready(function() {
    jQuery('.chart').viewportChecker({
        classToAdd: 'animated fadeIn',
        offset: 100,
        callbackFunction: function(elem, action) {

            var chart = new CanvasJS.Chart("chartContainerPie2", {
                animationEnabled: true,
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },
                data: [{
                    type: "pie",
                    toolTipContent: "{legendText}: <strong>{y}%</strong>",
                    indexLabel: "{label} {y}%",
                    dataPoints: [{
                        y: 35,
                        legendText
                    }, {
                        y: 20,
                        legendText
                    }, {
                        y: 18,
                        legendText
                    }, {
                        y: 15,
                        legendText
                    }, {
                        y: 5,
                        legendText
                    }, {
                        y: 7,
                        legendText
                    }]
                }]
            });
            chart.render();
        }
    })
});

Да, именно так и сделал, и перестало все вовсе отображаться

Полный код графика, так он работает в тегах <script> но мне нужно что бы он запускался viewportChecker ом в этих тегах, но почему то выше приведенный код работает только если подгрузить его через custom.js

<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Try Various Chart Types"
      },
      data: [
      {
        type: "column", //change type to bar, line, area, pie, etc
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}

        ]
      }
      ]
    });

    chart.render();
  }
  </script>

akefa,
консоль смотрели на предмет ошибок

Когда подгружаю через custom.js - в консоле все чисто.
Если между тегами <script> - в консоле ошибка "Uncaught TypeError: undefined is not a function", в строке jQuery('.chart2').viewportChecker({

полный код

<script>
jQuery('.chart2').viewportChecker({
        classToAdd: 'animated fadeIn',
	offset: 100,
        callbackFunction: function(elem, action){
    jQuery(document).ready(function(){
	var chart = new CanvasJS.Chart("chartContainerPie2",
	{
            animationEnabled: true,
		legend:{
			verticalAlign: "bottom",
			horizontalAlign: "center"
		},
		data: [
		{       
			type: "pie",
			toolTipContent: "{legendText}: <strong>{y}%</strong>",
			indexLabel: "{label} {y}%",
			dataPoints: [
				{  y: 35, legendText: "Маркетинг", exploded: true, label: "Маркетинг" },
				{  y: 20, legendText: "Менеджмент", exploded: true, label: "Менеджмент" },
				{  y: 18, legendText: "Бизнес план", exploded: true, label: "Бизнес план" },
				{  y: 15, legendText: "Товар", exploded: true, label: "Товар"},
				{  y: 5, legendText: "Идея", label: "Идея" },
				{  y: 7, legendText: "Реализация", label: "Реализация"}
			]
	}
	]
	});
    chart.render();
  }
		     )}, 
});
</script>

<div class="chart2 animated" id="chartContainerPie2" style="height: 300px; float: left;width: 60%;"></div>