Interactive Javascript Bar

I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:

Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?

13.10.2009 15:41:59
You should fill in your profile, so we know what your experience (or lack) is. Thanks
Elizabeth Buckwalter 13.10.2009 16:02:06

HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.

Have fun.

Oh and thanks for asking if it's been done before.

13.10.2009 16:01:36
Thanks Elizabeth, it looks like this is the route I'll have to take if I don't want to massively alter some Flot stuff.
David Savage 13.10.2009 16:49:19
BTW, for anyone looking at this wanting to do the same thing, I found this code to be easier to follow for finding mouse pointer location:…
David Savage 13.10.2009 16:53:42

Flot may be able to do what you need.

Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.

13.10.2009 15:46:23
This would work for me if I didn't need to massively alter it so much, but it is good to look at the source code for what I need to do. Thanks!
David Savage 13.10.2009 16:49:50