title: Chart.js animate chart after clicking a button
body: <p>I’m creating a radar chart using Chart.js. I want to start the animation when you click a button from the menu. Right now it starts when you load the site. </p>
  
  <p>Here is the actual script:</p>
  
  <pre><code>var radarChartData = {
      labels : ["Html5","Responsive","LESS","SASS","JavaScript","WordPress","Git","WebGL","LAMP","CSS3","User Interface Design","SEO","Web applications"],
      datasets : [{
          fillColor : "rgba(255,255,255,0.5)",
          strokeColor : "rgba(250,250,250,1)",
          pointColor : "rgba(255,255,255,1)",
          pointStrokeColor : "#fff",              
          data : [100,100,80,80,80,70,50,30,100,100,80,70,70]
      }]          
  }
  
  var myRadar = 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
  });
  
  var chartJsConstruct = function(){
  //..your chart.js invocation with 'new' as shown above
  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
      });
  };
  
  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);
  }
  </code></pre>