4.2. Borders, Margins, and the Plot Area

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”.

Figure 4.1. Border, Margin, Padding, and the Plot Area

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.