Finding Animated Bar Chart Library Or Component

I am interested in making a bar chart that changes over time (ideally bars will move up and down smoothly to show data changes over time). I didn't expect it would be difficult but, maybe due to the way I am searching, I cannot find a pre-built component or library that does this. I have come across other animated graphs that show data changes over time (like https://developers.google.com/chart/interactive/docs/gallery/motionchart and http://www.highcharts.com/demo/dynamic-update) but nothing that does what I describe in a bar chart. It would also work if I could find a line chart or pie chart that smoothly changed over time but I would rather make a bar chart to do this if possible.

Does an application or component or library like this exist (and if so can you point me in the right direction)? If for some reason nothing like this is available, what is the closest thing to it available (what is the path that would require the least amount of effort to produce this chart)?

Solution

ZingChart should be able to do this for you, and it's super easy to use. The chart configuration is defined using a JSON object. Inside the plot object, the animation object can hold a number of different animation options, including effect, speed, delay, and sequence. More information on ZingChart's animation effects can be found here. The render method is called to tell ZingChart where to render the chart using a div's unique ID. For this example, I configured a function to be called every 3000 milliseconds, generating a random array of numbers between 0 and 100, using the setseriesvalues method to change the data at plotindex 0.

var oData = {
  "type": "bar",
  "scaleY": {
    "values": "0:100:10"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_BOTTOM"
    }
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69]
  }]
};

zingchart.render({
  id: 'myChartDiv',
  width: 600,
  height: 400,
  data: oData
});

setInterval(function() {
  var aValues = [];
  for (var n = 0; n < 12; n++) {
    var num = Math.random() * (100 - 0) + 0;
    aValues.push(num);
  }
  console.log(aValues);
  zingchart.exec('myChartDiv', 'setseriesvalues', {
    plotindex: 0,
    values: aValues
  });
}, 3000);

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>

Full disclaimer: I'm on the ZingChart team, but if there's anything else I can help you with, I'd be happy to help!