[Chartjs]-ChartJS and Radar Chart animation

by

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

0👍

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;
    }
});

Leave a comment