Menu
I'd like to do a line-graph on a web-page using Javascript. I want it to be animated so that when the page loads, the line is slowly "drawn" onto the graph.
I've managed to get a static graph working, using flot, however I'm unsure how to animate it.
It would be half my job done to just make it draw a line half-way along the graph, but when I try to do this by modifying the data-set, it modifies the structure of the graph as well, so that the line fills 100% of the graph area.
So is there a way to draw the line data in stages, so I can animate it?
Or alternatively, is there some other javascript graphing framework that I've overlooked?
814
Here's a simple example using Flot
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Animated Flot Example</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var linePoints = [[0, 3], [4, 8], [8, 5], [9, 13]];
var i = 0;
var arr = [[]];
var timer = setInterval(function(){
arr[0].push(linePoints[i]);
$.plot($("#placeholder"), arr);
i++;
if(i === linePoints.length)
clearInterval(timer);
},300);
});
</script>
</body>
</html>
Thinking outside the box (since the box that is flot is unfamiliar to me), you could just cover the graph with a div which slow recedes and displays the line. Shrinking a div in javascript is a trivial task even without third party libraries.
Edit:
I had to see how easy it was, so I threw this together in about 10 mins.
<html>
<head>
</head>
<body>
<div style="width:480px;height:480px;position:relative;">
<img onload="setTimeout(function(){reduce();}, interval);" src="http://images.freshmeat.net/editorials/r_intro/images/line-graph-1.jpg" />
<div id="dvCover" style="position:absolute;width:370px;height:320px;background-color:white;border:solid 1px white;top:70px;left:70px;"></div>color:white;border:solid 1px blue;top:70px;left:70px;"></div>
</div>
<script type="text/javascript">
var step = 3;
var interval = 20;
var cover = document.getElementById("dvCover");
var currentWidth = 370;
var currentLeft = 70;
setTimeout(function(){reduce();}, interval);
function reduce()
{
if (currentWidth > 0)
{
currentWidth -= step;
currentLeft += step;
cover.style.width = currentWidth + "px";
cover.style.left = currentLeft + "px";
setTimeout(function(){reduce();}, interval);
}
else
{
cover.style.display = "none";
}
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
