Add new options xRangePad and yRangePad
authorKlaus Weidner <klausw@google.com>
Sat, 9 Feb 2013 01:01:10 +0000 (17:01 -0800)
committerKlaus Weidner <klausw@google.com>
Sat, 9 Feb 2013 01:01:10 +0000 (17:01 -0800)
commitfa460473ef9397759466361ff32de56a4f8fa956
treed490fea790f38810e73ca8c29ea9d174c92dcede
parent4707563ce91e069b58ed6c1be38c8e4ace4a2150
Add new options xRangePad and yRangePad

These options provide a fixed margin (in pixels) around the
user-specified or autoselected axis range to ensure all data points are
fully visible. If these are not set by the user, behavior reverts to
backward compatible mode.

This helps avoid the issue of data points drawn at the graph edges not
being properly visible.  For example, in a 100-pixel high plot area, a Y
coordinate of zero on a graph with yrange [0, ...] will be scaled to
domY=100 which is outside the 0..99 visible area.

If I'm understanding it right, the original padding algorithm works
as follows:

  Add 10% padding for automatic Y ranges, but not for user-supplied
  ranges, and move a close-to-zero edge to zero except if avoidMinZero
  is set. If logscale is set, add a variable amount of padding at the
  top but none at the bottom.

This is not very intuitive, and lines drawn at the edge of a
user-supplied range will still be invisible.

The new algorithm consistently ensures that there are at least
{x,y}RangePad pixels available for drawing outside of the data range,
both for user-specified and autoselected ranges.

Setting a small xRangePad combines nicely with drawAxesAtZero,
it will provide tick marks next to the legend due to the grid extending
slightly past the axis.

See the included gallery demo 'Edge Padding'. The default setting
corresponds to legacy behavior. Recommended settings:
  includeZero: true,
  drawAxesAtZero: true,
  xRangePad: 4,
  yRangePad: 10
auto_tests/tests/pathological_cases.js
auto_tests/tests/range_tests.js
dygraph-layout.js
dygraph-options-reference.js
dygraph.js
gallery/edge-padding.js [new file with mode: 0644]
gallery/gallery.css
gallery/index.html