My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:

• Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
• Points can be color coded
• Mouse-over boxes show more detail about the points
• Support for zooming and panning, scaling the background appropriately

Less importantly:

• Support for drawing vectors off the points

Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.

I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.

More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.