Formatting Data Grid Charts


A data grid is a type of chart that displays a tabular representation of your data, similar in structure to a tabular report. A data grid allows you to review data in a row and column format, similar to a printed report. Data grids are easy to create, and provide features such as a tooltip for each cell of the grid. WebFOCUS Designer provides numerous options to style and format a data grid.

Values in a data grid can be sorted, and data grids can be shared or saved for use on a page. A data grid is shown in the following image.

You can format a data grid using the options on the Format tab. The Format tab contains two sets of options, General and Datagrid options, which you can access using the quick access menu, as shown in the following image.


The General section provides a set of options that are common to all chart types. These options are divided into three sections: Theme, Frame and background, and Other.

The Theme section provides a menu that allows you to select a StyleSheet to automatically format the data grid. You can select from a list of themes available with WebFOCUS, or click Custom to select a StyleSheet from the legacy templates or your repository.

The Frame and background section includes the following options:

  • Background. Allows you to select a color for the background area behind the data grid.
  • Frame. Allows you to select a color for the chart frame. This option allows you to change the data cell fill color in the data grid.
  • Frame Border. The Frame Border settings are not applied to data grids. To style the borders in the data grid, use the Border style settings under Headers and values in Datagrid options.

The Other section includes the following options:

  • Fit to container. This option does not apply to data grids. It is used for bar, line, area, and scatter plot chart types.
  • Hide null groups. When selected, if any rows or columns in the grid do not contain any data, they are hidden at run time.
  • Show null as zeroes. When selected, cells for which no data is returned show a value of zero (0). When not selected, cells with no data appear blank, which is the default.

You can also select styling options that are specific to data grids. These are listed when Datagrid options is selected from the quick access menu on the Format tab. You can also access these options by right-clicking an area of the data grid and clicking Style.

The Datagrid options are divided into three sections: Headers and values, Background and padding, and Other.

The Headers and values section allows you to define the styling properties of the item selected from the Headers and values menu. You can set these properties for the row headers, column headers, cell values, and column totals. The Headers and values section contains the following options for each area of the data grid.

  • Format. Allows you to select the font, text formatting, font size and units, and text color.
  • Alignment. Allows you to set the text alignment to the left, center, or right side of the cells.
  • Border style. Allows you select the line style (for example, solid, dashed, or dotted), thickness, and color of the cell borders.

The Background and padding section allows you to style the cells in the data grid by adding bands and increasing the cell padding. Options in this section include the following:

  • Row color. Allows you to add bands to the data grid to make the rows easier to distinguish. Select the Alternate row color check box to add alternating bands to the data grid and select a color from the Color picker to style them.
  • Vertical padding. Allows you to set the vertical padding, in pixels, between the text and borders of each cell.
  • Horizontal padding. Allows you to set the horizontal padding, in pixels, between the text and borders of each cell.

The Other section allows you to add column totals to the data grid and freeze column and row headers. The options in this section are as follows:

  • Show column total. When selected, adds a column total row to the data grid. This row can be styled by selecting Totals in the Headers and values section. Show column total is not selected, by default.
  • Freeze column headers. When the data grid uses a vertical scroll bar, selecting Freeze column headers keeps the column headers in place while scrolling so that you can see which column each cell belongs to. When not selected, the column headers are not frozen when scrolling. Column headers are frozen, by default.
  • Freeze row headers. When the data grid uses a horizontal scroll bar, selecting Freeze row headers keeps the row headers in place while scrolling so that you can see which row each cell belongs to. When not selected, the row headers are not frozen when scrolling. Row headers are frozen by default.
  • Fit to container width. When this check box is selected, the grid spans the entire width of its container. When this check box is not selected, the grid width is only as wide as is needed to show each column header fully.

Procedure: How to Format a Data Grid

You use the options on the Format tab to customize a data grid. These options allow you to style the data grid to match your preferences while maintaining the simplicity and clarity of the data grid chart format.

  1. Open WebFOCUS Designer. On the WebFOCUS start page, click the plus menu and then click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.

    WebFOCUS Designer opens in a new browser tab.

  2. Select a workspace and a data source available from that workspace.

    Once you select a data source, WebFOCUS Designer loads with options to create a single content item.

  3. From the Content picker, select the data grid chart type .
  4. Add fields to the data grid.
    1. In the Resources panel, with Fields selected from the sidebar, in the Dimensions area, expand Product and drag Product,Category to the Row field container.
    2. In the Measures area, expand Sales and drag Cost of Goods and Revenue to the Measure field container.
    3. In the Dimensions area, expand Customer and drag Customer,Business,Region to the Column field container.

    A basic data grid has been created, showing Cost of Goods and Revenue sorted by Product Category across Customer Business Region.

  5. Add a header to the grid.
    1. Double-click the Chart Heading text.

      The text is highlighted and Rich Text Editor displays.

    2. Type Regional Sales into the chart heading area and click the X on the styling toolbar.

      The chart header is changed to Regional Sales.

  6. Open the Format tab.
  7. Change the background color of the cells to seafoam green.
    1. In the Frame and background section of the Format tab, click the color sample under Frame.

      The color picker opens.

    2. Click More to access the color wheel. Select seafoam green by clicking on the wheel in a location between cyan and green, and then using the brightness slider to select a light seafoam green color. Alternatively, type a hex code value into the text box. For example, #adebcc.
    3. Click OK.

      The data cells in the data grid now have a seafoam green fill.

  8. Access additional styling options for the data grid. Open the quick access menu and select Datagrid options.
  9. Make the across column headers bold.
    1. From the Headers and values drop-down menu, select Column headers.
    2. Click the Bold button to make the text bold.
  10. Add pink bands to the grid.
    1. Expand the Background and padding section.
    2. Select the Alternate row color check box.

      The rows now alternate between the seafoam green background and the default gray bands.

    3. Click the color sample under the Alternate row color check box.

      The color picker opens.

    4. Select the pink color from the palette.

      Now the data grid shows alternating seafoam green and pink rows.

  11. Add column totals to the grid.
    1. Expand the Other section.
    2. Select the Show column total check box.

      The column total row appears on the data grid.

  12. Style the column row total by changing the text and border color to purple.
    1. From the Headers and values drop-down menu, select Totals.
    2. In the Format subsection, click the color sample to change the text color for the column totals.
    3. Click More to access the color wheel, then select a shade of purple.
    4. Click OK.

      The column totals now show in purple text.

    5. Add a purple border to the columns total row.

      In the Border style subsection, click the color sample to open the color picker. From the Custom Colors palette, select the same purple color that you used for the text. This color was automatically saved and added to the Custom Colors palette.

    6. Click OK.

      The text and border for the column totals now use the same shade of purple.

    An example of what the resulting grid may look like is shown in the following image.