I'm interested in doing some drawing using JavaScript. I'll get straight to an example:
The green horizontal line would be static, and all the vertical lines would be clickable. An example of a clicked line would be the red one.
I've seen many API's, but they all allow more complexity than I need, making it more complicated than necessary.
Any suggestion for a good API? Make it oneself?
If there are javascript API's out there that offer what you want but are too complex, dig into one that has everything you need and pull out the stuff you don't need. If the api itself is too complex, use the code to understand how to draw lines and make a simpler one for yourself.
This site seems to have a very simple implementation.
You could use CSS and html to make up the lines initially. Then transfer some of this into the JS. To me from what you have described it doesn't look that difficult to do from scratch.
There's probably something else you haven't mentioned though!
Rendering: I would use the canvas element to draw your lines; you would also need to store the coordinates of your lines in a Javascript object of some sort. Drawing arbitrary (simple) figures such as your lines is really simple with canvas.
Click interaction: Attach a single click event listener to the canvas; when the callback fires, check the coordinates of the point clicked and see if the point clicked falls within the boundaries of any of your lines. If it does, then do whatever you wanted to do for that line.
http://stackoverflow.com/questions/1532739/addeventlistener-in-canvas-tag