Home Forums Chart Support How to Re render with animation Reply To: How to Re render with animation



To render the chart each time with animation, you will need to create a new chart with updated options based on the value selected from dropdown. Code snippet below shows how you can achieve the same:

$( ".dropdown" ).change(function() {
  options.data[0].dataPoints = [];
  var e = document.getElementById("dropdownMenu");
  var selected = e.options[e.selectedIndex].value;
  dps = jsonData[selected];
  for(var i in dps) {
    var xVal = dps[i].x;
    options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
  (new CanvasJS.Chart("chartContainer", options)).render();

Please take a look at this JSFiddle for a working example with sample code.

Rendering chart based on dropdown value with animation

Bivek Singh