Question

I am developing a circular chart that will have lines that move around it (like a clock, but not necessarily that regular). The lines will actually be representative of vectors, so they will have an angle and a magnitude. I am doing this with images (unless somebody has a better idea) and I am changing the size of the image to represent the magnitude and I am using CSS transformations to change the angle. My problem is that I don’t ever seem to know how to position the image so that it looks like the line is coming from the center of the circle. Right now I am using CSS top and left properties to position the image. Does anybody have any ideas for developing an algorithm to keep the image “centered” or have an idea for a better way to do this? I would use HTML and the canvas tag, but I have to support IE8.

Answer 1

Does anybody have any ideas for
developing an algorithm to keep the
image “centered” or have an idea for a
better way to do this? I would use
HTML and the canvas tag, but I have to
support IE8.

You should use Raphaël:

http://raphaeljs.com/

Raphaël currently supports Firefox
3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Random demo that has circles: http://raphaeljs.com/polar-clock.html

A similar question asking “how to make a chart” where Raphaël gets votes: What method would be best to build this complex graph

---

To answer another part of your question:

I am using CSS transformations to change the angle.
Right now I am using CSS top and left
properties to position the image.

Have you looked at transform-origin?