jQuery Flot Animator Plugin

jQuery Flot Animator Plugin is a plugin that can make your Flot charts alive, animator plugin will add animations
to Flot charts, this plugin is written by Chtiwi Malek , and you can download it from Github

Using Flot Animator Plugin is pretty straightforward, you don`t need to alter any of your original
code, all you have to do is to add a reference "jquery.flot.animator.min.js" and change Plot function
from $.plot to $.plotAnimator.
 
<script type="text/javascript" src="jquery.flot.animator.min.js"></script>
<script>
   var myplot = $.plotAnimator($("#flotContainer"), flotData, flotOptions);
</script>


ExampleFlot Animated Line Chart
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.animator.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
	width: 600px;
	height: 200px;
	text-align: center;
	margin: 0 auto;
}

#btnBlock{
	text-align: center;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
function generateSeries(added) {
    var data = [];
    var start = 100 + added;
    var end = 200 + added;
    for (i = 1; i <= 200; i++) {
        var d = Math.floor(Math.random() * (end - start + 1) + start);
        data.push([i, d]);
        start++;
        end++;
    }
    return data;
}

$(document).ready(function () {
    var dataLarge1 = generateSeries(0);
    var dataLarge2 = generateSeries(300);
	
	
	function doPlot(){
		$.plotAnimator($("#flotcontainer"),
			[{ label: "data1", data: dataLarge1 }],
			{
			grid: {
				backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
			},
			xaxis: {
				ticks: 20
			},
			yaxis: {
				ticks: 10
			}
		});
	}
	
	doPlot();
	
	$("#btnBlock input").click(function(){
		doPlot();	
	});
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>
<div id="btnBlock"><input type="button" value="Run animation"></div>




ExamplejQuery Flot Animated Bar Chart
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.animator.min.js"></script>

<!-- CSS -->
<style type="text/css">
#btnBlock{
	text-align: center;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data = [[0, 11], [1, 15], [2, 25], [3, 24], [4, 13], [5, 18]];
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF"}];
var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"], [4, "Beijing"], [5, "Sydney"]];

var options = {
    series: {
        bars: {
            show: true
        }
    },
    bars: {
        align: "center",
        barWidth: 0.5
    },
    xaxis: {
        axisLabel: "World Cities",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        ticks: ticks
    },
    yaxis: {
        axisLabel: "Average Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3,
        tickFormatter: function (v, axis) {
            return v + "°C";
        }
    },
    legend: {
        noColumns: 0,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 2,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
    }
};

$(document).ready(function () {
    doPlot();
	
	$("#btnBlock input").click(function(){
		doPlot();	
	});
});

function doPlot(){
	$.plotAnimator($("#flot-placeholder"), dataset, options);
}

function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}
</script>

<!-- HTML -->
<div style="width: 550px; height: 250px; text-align: center; margin: 10px">
    <div id="flot-placeholder" style="width: 100%; height: 100%;">
    </div>
</div>

<div id="btnBlock">
	<input type="button" value="Run animation">
</div>




ExampleFlot Animated Multiple Axes Chart
Source Code Expand
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.animator.min.js"></script>

<!-- CSS -->
<style type="text/css">
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

#flotplaceholder {
	width: 600px;
	height: 200px;
	text-align: center;
	margin: 0 auto;
}

#btnBlock{
	text-align: center;
}

#spinStep, #spinDuration{
	width:50px;	
}
</style>


<!-- Javascript -->
<script type="text/javascript">
//Sin(x)
var data1 = [
    [0, 0.09983], [1, 0.19867], [2, 0.29552], [3, 0.38942], [4, 0.47943], [5, 0.56464], [6, 0.64422], [7, 0.71736], [8, 0.78333], [9, 0.84147], [10, 0.89121], [11, 0.93204], [12, 0.96356], [13, 0.98545], [14, 0.99749], [15, 0.99957], [16, 0.99166], [17, 0.97385], [18, 0.9463], [19, 0.9093], [20, 0.86321], [21, 0.8085], [22, 0.74571], [23, 0.67546], [24, 0.59847], [25, 0.5155], [26, 0.42738], [27, 0.33499], [28, 0.23925], [29, 0.14112], [30, 0.04158], [31, -0.05837], [32, -0.15775], [33, -0.25554], [34, -0.35078], [35, -0.44252], [36, -0.52984], [37, -0.61186], [38, -0.68777], [39, -0.7568], [40, -0.81828], [41, -0.87158], [42, -0.91617], [43, -0.9516], [44, -0.97753], [45, -0.99369], [46, -0.99992], [47, -0.99616], [48, -0.98245], [49, -0.95892], [50, -0.92581]
];
//Cos(x)
var data2 = [
    [0, 0.995], [1, 0.98007], [2, 0.95534], [3, 0.92106], [4, 0.87758], [5, 0.82534], [6, 0.76484], [7, 0.69671], [8, 0.62161], [9, 0.5403], [10, 0.4536], [11, 0.36236], [12, 0.2675], [13, 0.16997], [14, 0.07074], [15, -0.0292], [16, -0.12884], [17, -0.2272], [18, -0.32329], [19, -0.41615], [20, -0.50485], [21, -0.5885], [22, -0.66628], [23, -0.73739], [24, -0.80114], [25, -0.85689], [26, -0.90407], [27, -0.94222], [28, -0.97096], [29, -0.98999], [30, -0.99914], [31, -0.99829], [32, -0.98748], [33, -0.9668], [34, -0.93646], [35, -0.89676], [36, -0.8481], [37, -0.79097], [38, -0.72593], [39, -0.65364], [40, -0.57482], [41, -0.49026], [42, -0.4008], [43, -0.30733], [44, -0.2108], [45, -0.11215], [46, -0.01239], [47, 0.0875], [48, 0.18651], [49, 0.28366], [50, 0.37798]
];
//PI * x
var data3 = [
    [0, 0.31416], [1, 0.62832], [2, 0.94248], [3, 1.25664], [4, 1.5708], [5, 1.88496], [6, 2.19911], [7, 2.51327], [8, 2.82743], [9, 3.14159], [10, 3.45575], [11, 3.76991], [12, 4.08407], [13, 4.39823], [14, 4.71239], [15, 5.02655], [16, 5.34071], [17, 5.65487], [18, 5.96903], [19, 6.28319], [20, 6.59734], [21, 6.9115], [22, 7.22566], [23, 7.53982], [24, 7.85398], [25, 8.16814], [26, 8.4823], [27, 8.79646], [28, 9.11062], [29, 9.42478], [30, 9.73894], [31, 10.0531], [32, 10.36726], [33, 10.68142], [34, 10.99557], [35, 11.30973], [36, 11.62389], [37, 11.93805], [38, 12.25221], [39, 12.56637], [40, 12.88053], [41, 13.19469], [42, 13.50885], [43, 13.82301], [44, 14.13717], [45, 14.45133], [46, 14.76549], [47, 15.07964], [48, 15.3938], [49, 15.70796], [50, 16.02212]    
];


var dataset = [
    {
        label: "Sin(x)",
        data: data1,
        yaxis: 2,
        color: "#FF0000",
        points: { symbol: "circle", fillColor: "#FF0000", show: true },
        lines: { show: true }
    }, {
        label: "Cos(x)",
        data: data2,
        yaxis: 1,
        color: "#0062FF",
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true, fill:true}
		
    }, {
        label: "PI * x",
        data: data3,
        yaxis: 3,
        color: "#319400",
        points: { symbol: "diamond", fillColor: "#319400", show: true },
        lines: { show: true }
    }
];


var options = {
    xaxis: {
        ticks: []
    },
    yaxes: [{
        position: "left",
        color: "black",
        axisLabel: "Sin(x)",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }, {
        position: "right",
        color: "black",
        axisLabel: "Cos(x)",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }, {
        alignTicksWithAxis: 2,
        position: "right",
        color: "black",
        axisLabel: "PI * x",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3
    }
],
    legend: {
        noColumns: 0,
        labelFormatter: function (label, series) {
            return "<font color=\"white\">" + label + "</font>";
        },            
        backgroundColor: "#000",
        backgroundOpacity: 0.9,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 3,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
        axisMargin: 20
    }
};


$(document).ready(function () {
    $.plot($("#flotplaceholder"), dataset, options);
	setSpinner();
	
	$("#btnRun").click(function(){
		$("#btnRun").attr("disabled", true);	
		doAnimation();
		doPlot();		
	});
	
	$("#flotplaceholder").on("animatorComplete", function() {		
		$("#btnRun").attr("disabled", false);	
	});	
});

function setSpinner(){
	var spinStep = $("#spinStep").spinner({
		min: 5,
        max: 1000,        
        start: 50
	});
	
	var spinDuration = $("#spinDuration").spinner({
		min: 100,
        max: 10000,        
		step: 100,
        start: 1000
	});
}

function doAnimation(){
	var series = $("#series").val();
	var step = $("#spinStep").spinner("value");
	var duration = $("#spinDuration").spinner("value");
	var direction = $("#direction").val();
	
	var animator = {
		  steps:step,
		  duration:duration,
	  	  direction: direction
	}

	for(i=0;i<=2;i++){
		dataset[i].animator = null;
		delete dataset[i].animator;
	}	
	
	dataset[series].animator = animator;	
}


function doPlot(){	
	$.plotAnimator($("#flotplaceholder"), dataset, options);
}



function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}
</script>

<!-- HTML -->
<div id="flotplaceholder"></div>

<div style="text-align:center;margin-bottom:5px;">	
	Series : 
	<select id="series">		
		<option value="0" selected>Sin</option>
		<option value="1">Cos</option>
		<option value="2">PI</option>
	</select>
	Steps:<input id="spinStep" name="spinStep" value="50"/>
	Duration:<input id="spinDuration" name="spinDuration" value="1000"/>
	Direction : 
	<select id="direction">
		<option value="left" selected>Left</option>
		<option value="center">Center</option>
		<option value="right">Right</option>
	</select>
</div>

<div style="text-align:center">
	<input type="button" value="Run animation" id="btnRun">
</div>




ExampleFlot Animated Dynamically Add Series
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.animator.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
	width: 600px;
	height: 200px;
	text-align: center;
	margin: 0 auto;
}

#btnBlock{
	text-align: center;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
function generateSeries(added) {
    var data = [];
    var start = 100 + added;
    var end = 200 + added;
    for (i = 1; i <= 200; i++) {
        var d = Math.floor(Math.random() * (end - start + 1) + start);
        data.push([i, d]);
        start++;
        end++;
    }
    return data;
}

var dataset = [], id = 1, offset = 0;

$(document).ready(function () {
    dataset.push({ label: "data" + id, data: generateSeries(0)});    
	id++;		
	
	doPlot();
	
	$("#btnAdd").click(function(){
		$(this).attr("disabled", true);
		addSeries();	
	});
	
	$("#flotcontainer").on("animatorComplete", function() {		
		$("#btnAdd").attr("disabled", false);	
	});	
});

function doPlot(){
	$.plotAnimator($("#flotcontainer"),
		dataset,
		{
		grid: {
			backgroundColor: { colors: ["#00B3FF", "#7A7A7A"] }
		},
		xaxis: {
			ticks: 20
		},
		yaxis: {
			ticks: 5
		}
	});
}
	

function addSeries(){
	for(i=0;i<dataset.length;i++){
		dataset[i].animator = null;
		delete dataset[i].animator;
	}	
	
	dataset.push(
		{ 
			label: "data" + id, 
			data: generateSeries(200 * id),
			animator:{
				steps:50,
	   			duration:1000
			}
		}
	);    
	id++;		
	
	doPlot();
}
</script>

<!-- HTML -->
<div id="flotcontainer"></div>
<div style="text-align:center">
	<input type="button" value="Add animated series" disabled id="btnAdd">
</div>


comments powered by Disqus