Graph Widget

I'm currently building a graph widget that will become an includable, standalone unit. Just about every aspect of the element is configurable and it automatically sizes all of the elements per the settings. The goal is to support a wide range of plot types, user editing, and animated scrolling horizontally and vertically.

I am keenly aware that this is a more-than-solved problem but it's a good exercise for me and provides these capabilities in exactly the way I want them.

Development history and discussion

The ongoing To Do list for the project follows:

Once the axis elements are reworked the ability to click on the related area should be added, as a way to kick off user modification processes.

Currently they are just calculated on the fly to draw bounding boxes for demonstration purposes.

The axis itself should be drawn based on where it intersects an axis perpendicular to it, by value for that axis and not by pixel.
It’s possible that ticks should be drawn close to the tick labels and on an axis display in the middle of a plot area. Maybe.
In theory, no more than one axis in either direction should be able to be drawn somewhere in the middle of the plot area, away from its labels.
Define outer edges of graph object independent of canvas object.

ALL locations will have to include an extra offset from the origin of the sub-area.
A bounding box should be able to be drawn or not drawn as desired.

Eliminate outer edge buffer definitions.
Add graph legend.

Assume default location of right edge.
Ultimately allow it to be placed arbitrarily.

Allow graph title to be placed arbitrarily.
Support reversal of any axis.
Make use of auto-scaling function that has been written.
Eliminate specification of both inner and outer scale ranges. The need for that has been obviated by the auto-scaling feature.
Allow axes to start on arbitrary, non-tick boundaries as well as end on them.

May not apply to axes with logarithmic scales.

Have tick value labels consider size of descenders for non-numeric labels.

Consider doing this automatically based on content of labels.

Support multi-line axis labels
Support multi-line graph label.
Add switches to further govern the drawing of tick value labels

None
All
First and last only

Add switches to suppress drawing of other aspects of the axis

The axis line itself
The ticks (already done?)
The plot area lines (already done?)
The far edge of the plot area (if another axis has not already been specified for that location.
The near AND far edge lines if the axis is defined so it falls inside the plot area and not at the edge.

Support staggered drawing of x-axis labels only at zero degrees of rotation

Do this automatically if labels too long for space available

Add ability to draw major ticks between labels.

Only for text labels on x-axis?
This would presumably eliminate drawing of minor ticks.

Add ability to draw extra labels at arbitrary locations in plot area.
Add ability to draw plots as x-as-a-function-of-y. This effectively rotates plots 90 degrees clockwise for the ability to scroll vertically and plot things the way economists sometimes do.
Add more plot mechanisms (that leverage already modular plotting mechanism).

Plot from table entries rather than from continuous functions.
Plot from continuous functions that don’t include cyclic color information.
Add lines, scatters, bars, box-and-whisker plots (and outliers), stock plots, plots where symbol size and color provide additional meaning, etc.
Add horizontal and vertical range lines (to illustrate ranges, things like run plots as used in quality analysis, warning limits on scrolling graphs, and asymptotes).
Add ability to handle parametric function plots that aren’t simply y-as-a-function-of-x.
Add plot/symbol legends.

Add animation, scrolling, real-time, and data features.

Add ability to have scrolling graph update interactively as new data is added (real-time scrolling).
Plot series data as non-scrolling animation.
Have graph object modify or extend animation features as new data are received through a receiver function.
Have graph object be able to record data received through a receiver function. Include time stamps with data.
Have object be able to recall and review recorded data and meta-data.
Allow user to select with data stream or streams are to be reviewed and displayed.
Make recall/review functions work across files split by time period or other method.

Make graph objects movable and able to be interactively displayed, hidden, and dismissed.

Graphically within a single canvas. Would need to save information it covers while moving or displaying.
Entire canvas object within a DOM page.

Add user interactivity, especially as ability to select elements by mouse click and use menus and dialogs to effect modifications. Especially may need to allow selection of plot elements in graphing area.

Add UI support for interactive modification of graph element parameters. Probably use tabbed dialogs. Could be in separate window, expanded or slideout region, or popup.
Place more limits on values that can be assigned to various parameters (e.g., angle of rotation of tick value labels only between -90 and +90 degrees).
Include a flag to indicate when any element is modified that may require re-spacing other element or otherwise redrawing the graph. This may not be needed because that logic can be handled in various places.
Add ability to scroll across larger data set (at least horizontally) under user control.
Add ability to zoom in or out on x-axis scale.
Add ability to zoom in or out on y-axis scale.
Add ability to modify values by dragging plotted elements?

Incorporate general enhancements.

Add support for additional fonts and font sizes over 30px.
Add arbitrary text comments and pointers.
Add ability to include user-defined symbols or images (e.g., Steve Martin’s rubber chicken graph).
Add transparency and ability to draw over (arbitrary/user-supplied) background image.
Save graph description as a list of parameterized elements by x- and y-coordinates and other properties to they can be redrawn after arbitrary rotations in two or three dimensions. Requires transform between plot space and display space and separate means of storage for both.
Provide ability to print graphs.
Provide ability to save graphs as images.
Provide ability to save (and read) graph as XML specification.
Make occasional passes through code to improve efficiency and clarity.