Grid Parameters

All NetCharts, except for NFDialChartApp, 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, bgImageType),...;
lineColor Specifies the color of the grid lines
bgColor Specifies the color for the grid's background
borderColor Specifies a border color for the grid
bgImage Specifies an image file for the grid's background
bgImageFormat Specifies how an image is displayed
  CENTER - Center the image within the image area
  SIZE - Sizes the image to fit so that it uses the entire image area
  TILE - Repeats the image from left to right and top to bottom 
CENTER - Center the image within the image area. 
SIZE - Sizes the image to fit so that it uses the entire image area. 
TILE - Repeats the image from left to right and top to bottom.



GridLine    = (lineType1, lineStyle1, lineWidth1),...;
lineType Indicates where to draw the lines
  BOTH - draw both horizontal and vertical lines (default)
  VERTICAL - draw vertical lines only
  HORIZONTAL - draw horizontal lines only
  NONE - draw no grid lines
lineStyle Specifies the line style using the below options:
  SOLID - solid lines (default)
  DOTTED - dotted lines
  DASHED - dashed lines
  DOTDASH - dot-dash lines
  BAR - alternating bars instead of lines
lineWidth Specifies the width of the line in pixels 
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);

Grid 1

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");

Grid 2

 

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.

The last attribute can be used to specify how the image is used to fill the background region. If set to TILE (the default), the image will be replicated as much as necessary to fill the region. If set to SIZE, the image will be resized to fit the region.

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);

Grid 3

 

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

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

Grid 4

 

Note
Because the BAR style is defined, the grid is displayed as an alternating pattern of bars. 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);

Grid 5

 

Notice that 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 spaced at various intervals.

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");

Grid 6

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");

Grid 7

 

Note
The background image is only displayed on the back part of the grid (the only rectangular region). Also, the single gridlines 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. This results in a 2D grid at all times.

 

GridAnimationStyle

	GridAnimationStyle = FADE | NONE;

Defines how grid backgrounds initially appear in a chart. This parameter is only valid in SVG and SVGweb output formats.

   example: GridAnimationStyle = FADE;

FADE

The grids fade in.

NONE

The grids are immediately visible.