CODEWITHSUNDEEP
javascripthtmlanimationchartsamcharts
00-BBB
00-BBB

Reputation: 866

Animate transition between values on amcharts svg bar graph

I have a bar chart I built using the 'amcharts' plugin.

The graph updates its values when the a dropdown menu item is selected,

I am trying to get the graph to animate the transition between the values when it changes, currently it either resets the whole animation and animates from '0', or if animateAgain() is commented out (line 142 in js) it jumps to the new value. This code is called after the values have been updated: 

// Animate between values instead of resetting animation?
chart.animateAgain();  // Resets animation
chart.validateData(); // redraws the chart with new data

I've searched the docs and google but can't find anything to help with this, anyone have any ideas or pointers in the right direction? Is it possible? Here's the codepen :

http://codepen.io/bananafarma/pen/yewbJQ

Cheers!!

Upvotes: 2

Views: 1712

Answers (1)

martynasma
martynasma

Reputation: 8595

You can use amCharts' own Animate plugin.

It adds a new method to chart objects animateData().

function updateGraph() {
  var newData = chart.dataProvider.slice();
  if( document.getElementById('data-set').value == 1 ) {
    newData[0].gain= 3.8;
    newData[1].gain= 8.5;
    newData[2].gain= 3;
    newData[3].gain= 1.9;
  }
  else if ( document.getElementById('data-set').value == 2 ) {
    console.log("yo");
    newData[0].gain= 2.6;
    newData[1].gain= 8.6;
    newData[2].gain= 13.8;
    newData[3].gain=  4;
  }
  else if ( document.getElementById('data-set').value == 3 ) {
    newData[0].gain= 4.8;
    newData[1].gain= 10.6;
    newData[2].gain= 15.9;
    newData[3].gain= 16;
  }

  // use Animate plugin
  chart.animateData( newData, { duration: 1000 } );

}

Here's your updated working demo.

Upvotes: 2

Related Questions