jQuery Flot Animator

Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.
It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts. Flot Animator also animates any type of series (lines, points, bars ...)

How it works?

This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

Then it will use “setTimeout” and the jQuery Flot “.setData()” and  “.draw()” functions to draw each frame, and when the animation is complete, the original data is restored and displayed.

How to use this plugin :

It is very easy to animate a Flot chart with Flot Animator, just add a reference to the Flot Animator JavaScript file “jquery.flot.animator.min.js” after your “jquery.flot.min.js” reference, and change your plot function from :

var plot = $.plot($("#myChart"), [{ data : ... }]);

To:

var plot = $.plotAnimator($("#myChart"), [{ data : ... }]);

You can also choose which series to animate and change some properties of the animation by adding the “animator: {}” keyword :

var plot = $.plotAnimator($("#myChart"), [{ data : dt, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }]);

In the example above, the animation will start after 0.1 second (100ms) and will last 1 second, the animation will begin from the left to the right and will be composed of 99 frames : Also when the animation is complete an event will be fired “animatorComplete” on the chart container:

$("#myChart ").on("animatorComplete", function() {
  // do something ...
});

This version '1.0' of Flot Animator will display all series available in your chart/graph, but you’ll have to choose only one of the series to animate, I will try to add multiple, simultaneous (or one at a time) series animation in the next version.

More demos and samples are available here => http://www.codicode.com/demo/flotanimator/

This plugin is available under Creative Commons Attribution 3.0 Unported License, You can use it freely for commercial and personal projects.

Source code, minified JavaScript and demo files are available in the attached file, and on Github.