Drawing line over picture - Javascript?

Question

I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.

The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.

Is this possible with Javascript, for example?

Answer 1

It is, you need eg a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.

Answer 2

You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.

Take this as an example to develop: http://mpf.vis.ywng.cloudbees.net/

(you can drag the yellow bar, and click the legend; for source code, click fork me on github)