Chartjs-Chart.js animate chart after clicking a button

by

0👍

Ok I think I have it. A bit of explanation about what I am trying to achieve here:

This constructor is what is responsible for configuring and constructing your Chart animation. 

 new Chart(document.getElementById("skill-radar").getContext("2d"))
.Radar(radarChartData,{
        scaleShowLabels : true
        , scaleOverride : true
        , scaleSteps : 10
        , scaleStepWidth : 10
        , scaleLineColor : "rgba(250,250,250,.5)"
        , angleLineColor : "rgba(250,250,250,.3)"
        , scaleFontFamily : "'Exo'"
        , scaleFontColor : "#fff", scaleFontSize : 10
        , scaleBackdropColor : "rgba(0,0,0,0.75)"
        , pointLabelFontFamily : "'Exo'"
        , pointLabelFontSize : 16
        , pointLabelFontColor : "#fff"
        , animationEasing : "easeOutSine"
        , animationSteps : 100
        , pointLabelFontSize : 10});

Each time you call the above your animation will be shown. We require a reference to function that can call it each time without having to type the cumbersome string above. Javascript lets you do it by wrapping it in a function and creating a function expression like this:

var chartJsConstruct = function(){
                         //..your chart.js invocation with 'new' as shown above
                        };

Now you can bind it to any action in your code to run the animation like this:

var skillsLink = document.getElementById('ui-id-2'); // find the target to add behavior

// add behavior agnostic of browser
if (skillsLink.addEventListener){// for Non-IE browsers
   skillsLink.addEventListener('click', chartJsConstruct);
}else if(skillsLink.attachEvent){// for IE9 and below
   skillsLink.attachEvent('onclick', chartJsConstruct);
}

This should reload the chart.js animation everytime you click on “Skills” link. Let me know how it goes

Leave a comment