jQuery Plugin For Animated Flot Chart - Flot Animator

File Size: 30.8KB
Views Total: 5411
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Animated Flot Chart - Flot Animator

Flot Animator is a jQuery plugin worked with Flot Chart Plugin that will add a fluid startup animation to any Flot chart. It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts.

How to use it:

1. Include jQuery javascript library and jQuery flot chart plugin in the head section of your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.flot.min.js" type="text/javascript"></script> 

2. Include jQuery Flot Animator plugin on your web page, after jQuery library.

<script src="jquery.flot.animator.min.js" type="text/javascript"></script>

3. Create a container for a plot chart.

<div id="chart"></div>

4. Animate the plot chart.

<script type="text/javascript">
$(window).load(function () {

var d8 = [[2, 5],[4, 8],[6, 2],[7, 5],[9,1],[10, 4],[12, 5],[13, 6],[14, 4]];
$.plotanimator($("#chart"), [{ data : d8, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }]);

});
</script>

About Author:

Author: jQuery Flot Animator By Chtiwi Malek

Project Homepage: http://www.codicode.com/art/jquery_flot_animator.aspx


This awesome jQuery plugin is developed by codicode.com. For more Advanced Usages, please check the demo page or visit the official website.