Example using jQuery Flot Animator

Animating flot charts with jQuery Flot Animator

Framework 1 :

Framework 2 :

+ Js file(s) :	//www.flotcharts.org/javascript/jquery.flot.min.js //www.codicode.com/demo/flotanimator/jquery.flot.animator.min.js

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="4a3" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

Javascript

$(function(){
var d8 = [[2, 2],[4, 5],[6, 8],[7, 4],[9,7],[10, 10],[12, 8],[13, 7],[14, 9]];
var d9 = [[2, 1.5],[2.5, 2],[4.5, 4],[6.5, 8],[7.5, 4],[9.5,7],[10.5, 10],[12.5, 8],[13.5, 7],[14.5, 9],[15, 10]];

var plot = $.plotAnimator($("#chart1"), [{data : d8, bars: { show: true, fill: true}},{data : d9, lines: {lineWidth:6}, animator: {start:100, steps:99, duration:1000, direction: "right"}}],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});

$("#bnt1").attr("disabled", "disabled");
$("#chart1").on("animatorComplete", function() {
    $("#bnt1").removeAttr("disabled");
    $("#txt").html('Animation complete.');
});
$("#bnt1").on("click",function() {
	$("#bnt1").attr("disabled", "disabled");
    $("#txt").html('Animating ...');
	plot = $.plotAnimator($("#chart1"), [{data : d8, bars: { show: true, fill: true}},{data : d9, lines: {lineWidth:6}, animator: {start:0, steps:121, duration:1500, direction: "right"}}],{grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }}});
});
});

Example using jQuery Flot Animator

Link :

Fork button :

Embed preview :