Multigraph draws each graph into a div
in the HTML page. There
are several things that you can control about the way multigraph lays out the graph in that
div
. In particular, multigraph can optionally draw a rectangular
border around the edge of the div
, possibly with some space
inside of and/or outside of that border. You can also control the part of the
div
where data is drawn, and where axes, titles, and other elements
of the graph are drawn.
All these things can be described in terms of a series of (mostly invisible) nested
rectangles inside the graph's div
which are shown in Figure 4.1, “Border, Margin, Padding, and the Plot Area”.
The outermost rectangle in this figure --- the one shown in solid gray --- corresponds to the
div
itself. Inside that rectangle, inset by an amount called the "margin"
from all four sides, is a black frame called the "border". Inside the border is another
rectangle called the "padding box", inset from the border by an amount called the "padding" amount
(shown in blue in the figure)
on all four sides. The values of these inset amounts, as well as the thickness of the border,
and optionally the overall size of the
div
, are all specified with the
window
element in the mugl file. It accepts the following
attributes, all of which are optional:
width
The width, in pixels, of the graph. Multigraph assigns this width to the
div
element in the HTML page containing the graph. A
width specified in the Multigraph.Graph constructor call takes precedence over
this value, and in that case, this attribute value may be omitted.
is
height
The height, in pixels, of the graph. Multigraph assigns this height to the
div
element in the HTML page containing the graph. A
height specified in the Multigraph.Graph constructor call takes precedence over
this value, and in that case, this attribute value may be omitted.
margin
A number of pixels of blank space to allow between the window and the border, on all 4 sides. If this attribute is omitted, it defaults to 2.
border
The width, in pixels, of a border to draw around the graph. If this attribute is omitted, it defaults to 2.
padding
A number of pixels of blank space to allow inside the border; everything else (other than the border) that multigraph draws will be clipped to an imaginary rectangle that is inset by this number of pixels from all 4 sides of the border. If this attribute is omitted, it defaults to 5.
There can be at most one window
element in a mugl
file. If it
is absent, all of the above attributes assume their default values.
Note that in Figure 4.1, “Border, Margin, Padding, and the Plot Area”, the margin, border, and padding are shown in different colors (the margin is gray, the border black, and the padding is blue), and are all much larger than they normally would be. In a real multigraph graph, the margin and padding are white, the border is black, and they are all much smaller. You can explicitly set any of them to 0 if you want to eliminate it altogether.
Inside the padding box is another rectangle called the "plot area"; it is inset from the padding box by four (possibly) different amounts along each edge, called the "plot area margins". The plot area is the region where multigraph plots data --- all data plots are clipped to this rectangle. The plot area is shown in green in the figure above, but in a real graph it is invisible.
In general, multigraph uses two rectangles for clipping: the padding box and
the plot area. The padding box (which includes the plot area) serves as
the clipping region for the whole drawing --- with the exception of the
border, everything that multigraph draws, including axes, labels, and titles,
is clipped to the padding area. In other words, the padding area defines the
region of the div
in which multigraph does its drawing.
The plot area is the subset of the padding box where the data itself is plotted.
The plotarea
element
in the mugl file defines the plot area.
It accepts the following attributes, which represent offsets relative
to the padding area:
marginbottom
Offset from the bottom side. Default: 30.
marginleft
Offset from the left side. Default: 30.
margintop
Offset from the top side. Default: 10.
marginright
Offset from the right side. Default: 30.
The plotarea
element also accepts the following attributes which
control an optional border to be drawn around it:
border
The width, in pixels, of a border to be drawn around the plotarea. The default is 0, which means that no border is drawn.
bordercolor
The color to use for the plotarea border. The default is "0xeeeeee", which is very light gray, and matches the default value for axis grid lines.
There can be at most one plotarea
element in a mugl file. If it
is absent, all attributes assume their default values.