Grid Parameters

All NetCharts applets, except for NFDiagramApp and NFPiechartApp, support the display of one or more grids behind the data. The grid layouts and styles can be independently specified, and can be associated with any of the axes being displayed.

Grid definitions are specified using the following parameters:

Grid        = (lineColor1, bgColor1, borderColor1, bgImage1),...;

GridLine    = (lineType1, lineStyle1, lineWidth1),...;

GridAxis    = (XAxis1, YAxis1),...;

Grid3DDepth = depth;

Simple Grid Definitions

If the Grid parameter is defined, then at least one grid will be displayed, using the given colors. All of the Grid parameter attributes are optional. If they are not specified or they are set to "null", then that specific aspect of the grid will not be displayed.

For example, the following Grid parameter definition displays a simple green grid on a white background.

Grid = (green, white);

In that case, no border color or background image was specified. In the following example, a background image is specified.

Grid = (green, white, black, "netcharts.gif");

Note, if the image contains "transparent" colors (as this image does) then the specified background will be visible "underneath" the image. That is, the background color is drawn, then the image, then the grid lines.

Grid line styles can be specified using the GridLine parameter. Each tuple given defines the line properties for the corresponding grid defined in the Grid parameter. (We discuss multiple grids below.)

The lineType attribute supports the following values:

BOTH	   - draw both horizontal and vertical lines (default)
VERTICAL   - draw vertical lines only
HORIZONTAL - draw horizontal lines only
NONE       - draw no grid lines

The lineStyle attribute supports the following values:

SOLID      - solid grid lines (default)
DOTTED     - dotted grid lines
DASHED     - dashed grid lines
DOTDASH    - dot-dash grid lines
BAR        - alternating bars instead of lines

Finally, the lineWidth attribute allows the specification of the line thickness in pixels, with 1 as the default value.

For example, the following GridLine definition causes a horizontal dotted grid to be displayed.

Grid     = (green, white);
GridLine = (HORIZONTAL, DOTTED, 3);

While the following GridLine definition, results in horizontal bars being displayed instead of lines.

Grid     = (green, white);
GridLine = (HORIZONTAL, BAR);

Note, since the BAR style is defined, the grid is displayed as an alternating pattern of bars (much like that ole computer paper we all grew up with!!!) In this case, the lineColor is used to display every other bar and the background color or image is seen as the other bar. That is, if a background image were used, then it would be seen as the "second" bar. By specifying the lineColor and bgColor attributes, any alternating bar combination can be achieved.

Multiple Grids

Since all of the Grid parameters are defined as vectors, you can specify more than one grid for the same chart. This allows arbitrary combinations of styles and spacing to achieve a wide array of chart grids.

For example, the following grid definitions specify a horizontal black dotted grid that is drawn in front of a vertical green bar grid.

Grid     = (green, white),
           (black, null);

GridLine = (VERTICAL, BAR),
	   (HORIZONTAL, DOTTED, 2);

Notice how the "null" background color is assigned to the second grid, so that it will not overwrite the first grid. Remember, all NetCharts vector parameters use the attribute values from the previous "tuple" as the default for the current tuple. If we didn't specify a "null" background color, then "white" would have been used as the default and the second grid would completely overwrite the first.

Grid Spacing

All of the examples up until now have made use of the bottom and left axes to determine the spacing of the grid lines. The GridAxis parameter allows you to specify arbitrary combinations of axes for each grid being displayed. This allows you to easily display grids with different types of lines at different spacings.

For example, the following Grid parameter definitions specify a grid that contains thick green lines associated with the left axis, and thin, dotted black lines associated with the right axis.

Grid       = (green, white),
             (black, null);

GridLine   = (HORIZONTAL, SOLID, 2),
             (HORIZONTAL, DOTTED, 1);

GridAxis   = (BOTTOM, LEFT),
             (BOTTOM, RIGHT);

RightScale = (0, 100, 5);
RightTics  = ("OFF");

In this case, we defined the desired "sub-grid" spacing using the RightScale parameter, which is referenced by the RIGHT attribute in the GridAxis parameter. Note how we also turn "OFF" the right tic labels, so that they don't clutter the chart.

3D Grids

In any chart that can display bar data sets, the Bar3DDepth parameter defines the depth of each bar in pixels, as well as the depth of the underlying grids. If that parameter is set to 0, then 2D bars and grids are displayed. If that parameter is not defined, then a default depth will be chosen.

In all cases, the grids defined in the Grid parameters automatically adjust to the current depth setting. For example, in the following Bar Chart, a 3D grid is displayed, based on the following Grid parameter definitions.

Grid = (green, white, black, "netcharts.gif");

Note, the background image is only displayed on the "back" part of the grid (which is the only rectangular region). Also, the single grid lines are associated with the bottom and left axes by default, not the top and right, which are also displayed.

If you want to display 3D bars, but you don't want to display a 3D grid behind those bars, then you can set the Grid3DDepth parameter to 0, which results in a 2D grid at all times. See Annotated Chart for an example of a 2D grid, with a 3D set of bars.

Beauty Is Subjective

Finally, we make use of all of the grid features to create a very unusual display. (Yes, we let you make really ugly charts if that's what you want!!!)

Grid     = (green, white, black, "../images/netcharts.gif"),
           (red, null, null, null),
           (blue),
           (orange);

GridLine = (VERTICAL, BAR),
           (VERTICAL, DOTTED, 2),
           (HORIZONTAL, SOLID, 2),
           (BOTH, DASHED, 2);

GridAxis = (BOTTOM, LEFT),
           (TOP, LEFT),
           (TOP, LEFT),
           (BOTTOM, RIGHT);