Interactive Javascript Bar

Question

Hi all,

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:

http://www.usrecordings.com/test-lab/bullet-graph.htm

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?

Answer 1

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.

Answer 2

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.