ChartJS and Radar Chart animation

Question

I am using ChartJS to display data but I want to hold the chart animation until it becomes visible on the users screen. I have followed the post on How to make the Chart.js animate when scrolled to that section? but it's not working when I use it with the Radar chart. The sample code is below and I have the canvas setup as normal eg canvas id="canvas:

var radarChartData = {
    labels: ["x", "x", "x", "x", "x"],
    datasets: [{
        fillColor: "rgba(255, 97, 10, 0.5)",
        strokeColor: "rgb(255, 97, 10)",
        pointColor: "rgba(255, 255, 255, 1)",
        pointStrokeColor: "rgba(255, 255, 255, 1)",
        data: [48, 46, 47, 48, 38]
    }]

}

var inView = false;

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#canvas')) {
        if (inView) {
            return;
        }
        inView = true;
        newChart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            scaleShowLabels: false,
            scaleShowLabelBackdrop: false,
            scaleFontColor: "#fff",
            pointLabelFontSize: 14,
            pointLabelFontColor: "#fff",
            angleLineColor: "rgba(163, 165, 93,0.8)",
            scaleLineColor: "rgba(163, 165, 93,0.5)"
        });
    } else {
        inView = false;
    }
});

Answer 1

You need to move your scripts

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/Chart.js"></script>

to the top before the </head> to avoid any possible script clash and as I said in my comment, you have a typo:

newChart instead of the correct one new Chart

Answer 2

Worked for me : yeah as Yannis pointed out it has to be new Chart (instantiating the Chart object) see here and scroll down :

http://jsfiddle.net/HFS7v/

var radarChartData = {
    labels: ["x", "x", "x", "x", "x"],
    datasets: [{
        fillColor: "rgba(255, 97, 10, 0.5)",
        strokeColor: "rgb(255, 97, 10)",
        pointColor: "rgba(255, 255, 255, 1)",
        pointStrokeColor: "rgba(255, 255, 255, 1)",
        data: [48, 46, 47, 48, 38]
    }]

}

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#canvas')) {
        if (inView) {
            return;
        }
        inView = true;
        new
        Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            scaleShowLabels: false,
            scaleShowLabelBackdrop: false,
            scaleFontColor: "#fff",
            pointLabelFontSize: 14,
            pointLabelFontColor: "#fff",
            angleLineColor: "rgba(163, 165, 93,0.8)",
            scaleLineColor: "rgba(163, 165, 93,0.5)"
        });
    } else {
        inView = false;
    }
});