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 e.g. 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;
    }
});

just a remark, where you say `newChart`, should't that be `new Chart`? — Yannis Dran, Mar 02 '14 at 17:43

score 1 · Answer 1 · answered Mar 04 '14 at 08:45

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

score 0 · Answer 2 · answered Mar 03 '14 at 13:22

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

Hey and make sure you have a JQuery library being called in your page (if you were copy-pasting the code) I would say JQuery 2.0.2 is good — peevesy, Mar 03 '14 at 13:27
Thanks, this works but when previewing it on Android, the chart re-draws everytime you scroll up and down causing it to enlarge to the point that it completely disappears — user3133586, Mar 05 '14 at 22:23
Another issue is the points on the actual chart - when changing the values of the chart (e.g. data: [48, 46, 47, 48, 38] to data: [48, 90, 47, 48, 38]), the re-drawn chart doesn't represent the figures properly — user3133586, Mar 05 '14 at 22:31

ChartJS and Radar Chart animation

2 Answers2