Home/ Questions/Q 8826305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:06:11+00:00

I am having difficulties in completing a task which requires to display lines as

  • 0

I am having difficulties in completing a task which requires to display lines as animations in a web app.

The lines data is stored in a database and consists of x, y and time information. The x and y coordinates specify the position of the drawn points whereas time represents the timestamps (in milliseconds) of the respective points.

For instance,
point 1 (x=10, y=23, t=152)
point 2 (x=21, y=29, t=385)
point 3 (x=15, y=20, t=506)
…
…

So, the task is to display these points in a web app based on the given timestamps.

My problem is first that I do not know what kind of graphical plugin to use and then how to implement it (that is how to use timers, how to do the animation, etc).

I would appreciate any help from you! Please let me know in case you need more information about this task. I would gladly provide it.

Kind regards,
Frida

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I would use Raphaël for something like this. It is easy to use and has support for all major browsers. The animated line drawing can be a little troublesome because you have to generate each step as a seperate path, but it shouldn’t be to hard.

    Here is a very simple example

    var points = [
    { x: 0, y: 0, t: 0 },
    { x: 100, y: 230, t: 1520 },
    { x: 210, y: 290, t: 3850 },
    { x: 150, y: 200, t: 5060 },
];

var paths = [];

// build paths
points.forEach(function (p, idx) {
    if (idx === 0) {
        paths.push('M ' + p.x + ' ' + p.y);
    } else {
        paths.push(paths[idx - 1] + ' L ' + p.x + ' ' + p.y);
    }
});

var paper = Raphael(10, 10, 300, 300);
var line = paper.path(paths[0]);

var next = 1;

function animate() {
    if (paths[next]) {  
        duration = points[next].t - points[next - 1].t        
        line.animate({ path: paths[next] }, duration, 'linear', animate);
        next++;
    }
}
animate();

    And here is a fiddle where you can see it in action: http://jsfiddle.net/toxicsyntax/FLPdr/ ​
    UPDATE

    Here is a complete HTML page that uses the above code. It is still a simplified example, but you should be able to work your way from that.

    <!DOCTYPE html>
<html>
    <head>
        <title>Raphael Play</title>
        <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
        <script type="text/javascript">
            function drawLine(points) {

                var paths = ['M ' + points[0].x + ' ' + points[0].y];

                // build paths
                for (var i = 1; i < points.length; i++) {
                    var p = points[i];
                    paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
                }

                // get drawing surface
                var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  

                // draw line
                var line = paper.path(paths[0]);
                var next = 1;

                function animate() {
                    if (paths[next]) {  
                        duration = points[next].t - points[next - 1].t        
                        line.animate({ path: paths[next] }, duration, 'linear', animate);
                        next++;
                    }
                }
                animate();
            }
        </script>
        <style type="text/css">
            #canvas_container {
                width: 500px;
                border: 1px solid #aaa;
            }
        </style>
    </head>
    <body>
        <div id="canvas_container"></div>
        <script type="text/javascript">
            window.onload = function () {
                // the points here should be generated by your ASP.NET application
                drawLine([
                    // the points here should be generated by your ASP.NET application
                    { x: 0, y: 0, t: 0 },
                    { x: 100, y: 230, t: 1520 },
                    { x: 210, y: 290, t: 3850 },
                    { x: 150, y: 200, t: 5060 },
                ]);
            }
        </script>
    </body>
</html>

    The points are at the end of the HTML page, and in your application you could generate those from your model.

    • 0