Animated line graph in Javascript?

Asked 5/6, 2009 at 0:48 Answered 24/9, 2015 at 9:33

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?

Uropygium answered 5/6, 2009 at 0:48 Comment(0)

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>

Aseity answered 5/6, 2009 at 1:43 Comment(1)

Uhmm...Why didn't I think of that +1 – Trypanosomiasis 5/6, 2009 at 1:51

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>

Heeley answered 5/6, 2009 at 0:55 Comment(4)

Very simple, yet impressive +1 – Trypanosomiasis 5/6, 2009 at 1:51

That's an awesome idea. Trouble is, the overlaid div would obscure the lines on the graph. But hey, it's a lot better than nothing! – Uropygium 5/6, 2009 at 2:4

@Jonathan: Depending on the complexity of your graphs background, you might be able to put a matching background on the overlay div. – Heeley 5/6, 2009 at 2:22

@Heeley Potter, yeah I thought of doing that, but it wouldn't work because ranges can be quite variable. But I'm thinking I'll just do away with the lines, and only show the plot above a white background. May look nicer anyway. – Uropygium 5/6, 2009 at 2:38

I have written a library that focuses heavily on animation of graphs. Notice the animation during resizes. Hope this helps you and everyone else!

LYNE.JS

https://github.com/bluejamesbond/Lyne.js/tree/master

GIF SAMPLE

enter image description here

LIVE SAMPLES

http://bluejamesbond.github.io/Lyne.js/

Gasper answered 24/1, 2014 at 1:20 Comment(0)

You could modify flot. I've made changes to the flot code before. It's fairly well-written. There's a google group if you get stuck.

Or you could just learn how to use Canvas, which is what flot uses.

Naquin answered 5/6, 2009 at 0:50 Comment(0)

I wanted to add horizontal line animations to my flot charts too, unfortunately there is no plugin to do this.

please feel free to use the plugin I created to do that : http://www.codicode.com/art/jquery_flot_animator.aspx

Brundisium answered 15/10, 2013 at 2:26 Comment(0)

You may use d3js. Learning d3 will take some time, but it's power ie enormous and unparalleled.

https://www.quora.com/How-do-I-learn-D3-js

http://big-elephants.com/2014-06/unrolling-line-charts-d3js/

A few examples of d3 visualizations:

Official d3 Website

Something I've built for an NGO

Desalvo answered 24/9, 2015 at 7:52 Comment(0)

I have put across a series of Graphs and Chart Libraries that would serve your purpose as well as help you create the chart or visualization that you would please. Have a look at this article http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

Larimer answered 24/9, 2015 at 9:33 Comment(0)

Recommended topics

Hot tags