Here is a diagram of all the measurements needed to place items in the graphing area. Given the width and height of the canvas element in pixels you can see how every element is placed building in from the outer edges on all sides. The graph object in its current form requires the user to specify the location and extent of each axis, but when everything is done those locations will be calculated automatically.
- leftOuterBuffer: pixels between outer left edge and elements
- rightOuterBuffer: pixels between outer right edge and elements
- topOuterBuffer: pixels between outer top edge and elements
- bottomOuterBuffer: pixels between outer bottom edge and elements
- graphLabelHeight: pixel height of graph label not including descenders, including row above and below
- graphLabelDrop: pixel height of graph label descenders
- graphLabelBuffer: pixels between graph label and graph area
- xaxisLabelWidth: pixel width of the x-axis label, used for line wrapping (space between lines given by xaxisSecondLineOffset)
- xaxisLabelHeight: pixel height of x-axis label not including descenders, including row above and below
- xaxisLabelDrop: pixel height of x-axis label descenders
- xaxisTickValueBuffer: pixels between x-axis label and tick value text
- xaxisHeightPixels: pixel height of longest x-axis label
- xaxisWidthPixels: pixel width of longest x-axis label
- xaxisTickOffsetDown: vertical pixels between end of x-axis major tick and origin of tick label text block
- xaxisTickOffsetLeft: horizontal pixels between end of x-axis major tick and origin of tick label text block
- xmajorTickLength: pixel length of x-axis major tick lines
- xminorTickLength: pixel length of x-axis minor tick lines
- xaxisLeftPixels: overflow pixels to the left of the leftmost tick on the x-axis
- xaxisRightPixels: overflow pixels to the right of the leftmost tick on the x-axis
- yaxisLabelWidth: pixel width of the y-axis label, used for line wrapping (space between lines given by yaxisSecondLineOffset)
- yaxisLabelHeight: pixel height of y-axis label not including descenders, including row above and below
- yaxisLabelDrop: pixel height of y-axis label descenders
- yaxisTickValueBuffer: pixels between y-axis label and tick value text
- yaxisHeightPixels: pixel height of longest y-axis label
- yaxisWidthPixels: pixel width of longest y-axis label
- yaxisTickOffsetDown: vertical pixels between end of y-axis major tick and origin of tick label text block
- yaxisTickOffsetLeft: horizontal pixels between end of y-axis major tick and origin of tick label text block
- ymajorTickLength: pixel length of y-axis major tick lines
- yminorTickLength: pixel length of y-axis minor tick lines
- yaxisTopPixels: overflow pixels above the topmost tick on the y-axis
- yaxisRightPixels: overflow pixels below the lowermost tick on the y-axis
Writing everything out like this shows that some of the names could be made more consistent, which item is going on the to-do list. Tomorrow I’ll go into more details about how the tick labels are placed relative to the tick marks, particularly when they are rotated.