Clickable lines and circles with HTML canvas

Question

I'm going to create an application where a graph is displayed at some points that displays people in time and space. Vertical access is location, horizontal access is time, and each person is identified by a line. At any moment when a person was doing something meaningful, there is more than a point on their line. Conceptually, clicking a point brings up data about that particular point, but clicking anywhere on the line leads to the granularity of that person. Hypothetically, when you hover over a line, the line should change color, and when you hover over a point, just the point should change color.

I know that I could do this quite easily with flash, but I was wondering if there is any way to do this these days using only html and javascript. Is it possible? (Compatibility is not a problem, the only machine I aim at is mine.)

Thanks!

Answer 1

You can do this with a canvas, but it may be easier to use SVG.

Since SVG uses the DOM, you get built-in methods for handling events, such as clicking, etc., instead of writing your own processing code, as you need with a canvas.

There are several libraries that simplify working with SVG and are compatible with several browsers, such as the Raphael library and Dojo dojox.gfx.

Answer 2

div s, .. , . .