score: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


Related Query