Formatting Charts

You can access the formatting options from the Style tab, as shown in the following image.

General options display, by default, as shown in the following image.

You can use the General menu to select a different aspect of your chart, for example, Legend, Axis, Series, or Matrix options, as shown in the following image.

Once you select an area of your chart to modify (for example, Axis), you can use the intuitive options and menus to make selections, as shown in the following image.

Note: If you are working with a map, reference lines, or data grids, additional tabs will display, enabling you to make formatting changes to these components. These tabs do not display, by default.

By streamlining formatting options in one place, you can quickly format charts to enhance the display of your data. Whether it be color-coding a series in a chart or changing the font size of your data labels, a customized, formatted chart is just a click away.

How to: Changing the Font Type in Your Chart

You can use the font formatter in WebFOCUS Designer to control how fonts are displayed in your chart. This is a quick way to apply styling, colors, or a specific font type for any text within your chart. The font formatter displays in different areas of the Style tab (for example, Legend, Axis, Series, and Matrix options). Depending on the chart type and what you want to format, you can use these options to enhance the fonts in your charts. The font formatter is shown in the following image.

You can also change the font of a header or footer in your chart. This allows you to control how a chart is labeled or highlighted, which is useful when the chart will be distributed. For headers and footers, you can:

When reviewing text that displays in your chart, you might want to increase the font size of the header text to enhance its visibility. Editing the font types and styles in your chart gives you more control over how information is displayed and presented.

How to: Add Headings and Footings to a Chart

You can use headers and footers to add key information, such as purpose of the chart and the audience. For example, if you have gross profit for different product categories, you can add a header to highlight this information in your chart.

You can add multiple lines of information into the heading and footing areas in a chart. This accommodates thorough explanations and additional information while offering the most readable presentation.

You add a new line in the heading and footing by pressing the Enter key. The number of lines of heading and footing you can add to a chart is only limited by the available real estate on the chart. The chart body will adjust to fit within the available space with the heading/footing lines inserted. You can change the font size or other presentation aspects using the editing toolbar that display. When you are finished editing the heading and footing and edit mode is closed, the chart canvas adjusts to ensure that all lines of the heading or footing are visible, as shown in the following image.

Headers and footers can contain the same type of information. Footers are not enabled, by default, but can be enabled on the Quick Access Toolbar, as shown in the following image.

You can make styling changes to the information in your headers and footers, which allows you to interactively style the text according to your preferences. Using a WYSIWYG canvas, it delivers formatting changes instantly, allowing you to see the results of your selections as you make them. When editing your header or footer, you can find the options at the top of the canvas, as shown in the following image.

You can change the font and font size using the drop-down lists. You can add bold, italic, and underline accents to your text. In addition, you can change the positioning of your text (left, center, and right). You can also customize the color of the text, as well as the background of the header or footer text area. When your formatting is complete, you can close the toolbar and continue working with your chart.

Note: You can double-click the heading or footing to resume modifications at any time.

To access the legend formatting options, click the Style tab. From the quick access list at the top of the tab, select Legend. The Legend formatting options display in the following image.

Use the On, Off, and Auto buttons to control how the Legend appears on your chart. You can optionally select On or Off, depending on whether you want to display the legend in your chart. The legend display setting is set to Auto, by default.

Note: Occasionally, charts are large and require additional real estate. Hiding the legend, or turning it off, enables you to preserve additional room as required by the chart.

Under Labels, you can choose format the font used in your legend. These include Font type, Style, Size, and Color.

Depending on the type of chart you use, adding data to a specific field automatically generates a title for the chart legend. For example, the following image displays a Circle Plot chart that allows you to compare the differences between values by circle size. Since the measure Gross Profit has been added to the Size bucket, the legend title for this chart shows as Gross Profit, which is highlighted in the following image.

Under Titles on the Style tab, you can choose to show or hide the legend title with the Show Titles check box. You can also choose the font style and formatting of the legend title.

Under Other on the Style tab, you can perform tasks such as changing the position, setting the background color, and setting the border line width, size, and color. You also have options to display the legend options in reverse order and set it as collapsible.

How to: Format Axes

Depending on the chart type (for example, bar chart), you can format the axes to customize the display of the information. This includes items such as labels, titles, and font formatting. For example, you can choose to hide the labels in your chart or format the font to add clarity to your chart. You can easily customize the X and Y axis with options that suit your needs.

You can rotate the labels in your axes as well as stagger them. This allows you to shift the display of information, which is particularly useful when your chart is very dense. You can also modify the lines for individual axes, enhancing the frame of the axis on the chart. You can also show ticks, which allows you to view milestones in your data. You can also change the position of an axis, enabling you to dictate where your axis information will display (for example, right). The options for formatting an axis are shown in the following image.

How to: Format a Series

A series, which is a set of data, represents the set of values for one field in the request (for example, a measure). These numbers are plotted in a chart. You can format the series in your chart, which includes font formatting, display options for labels, and other options, including the ability to hide overlapping labels. Using the Series options, you can select a specific series in a chart to which to apply changes, or you can select All Series, which applies changes to all series in the chart.

Having the ability to format by series gives you control over your content and allows you to customize display options at the series level. For example, you might want to color code a chart based on a range of values. You can also specify options for the data labels of the series. These are enabled by default, but can be turned on or off. You also have the standard suite of font options, as shown in the following image.

When working with series in a chart, you can also set an option to control the display of content in your chart. The default is Auto. This gives you the ability to specify how your data will be presented (for example, by Value or Percentage), which is particularly useful in cases where you want to save real estate when using data labels in your chart. You can click the drop down to access a full list of content options, as shown in the following image.

You can use the following terms to decide the best way to display your content.

• Auto. The chart engine decides what data label information to show. This is usually the value.
• Label. Shows the series label of the riser, marker, or slice (same as legend label)
• Value. Shows the value of the riser, marker, or slice, using the numeric format of the field. For example, if the field defined in the master file is US Currency with two decimal places of precision, then that is what the dataLabel will be ($123.45).
• Percentage. Shows the percentage of the riser/slice based on the group to which it belongs.
• Value,Percentage. Shows the value of the riser, marker, or slice, with numeric formatting and the percentage of the riser/slice based on the group to which it belongs.
• Label,Value. Shows the series label of the riser, marker, or slice (same as legend label) and the value of the riser, marker, or slice, with numeric formatting.
• Label,Percentage. Shows the series label of the riser, marker, or slice (same as legend label) and the percentage of the riser/slice based on the group to which it belongs.
• Label,Value,Percentage. Shows the series label of the riser, marker, or slice (same as legend label), as well as the value of the riser, marker, or slice, with numeric formatting. It also shows the percentage of the riser/slice based on the group to which it belongs.

You can also Wrap Data labels, which allows you to truncate available chart space or show your data on multiple lines. The following examples show how the wrapping option works.

Example of WrapDataLabel=True:

"France

$123.4

23.4%"

Example of WrapDataLabel=False:

"France, $123.4, 23.4%"

Specifically, the data label options allow you to determine what is shown when Show label is ON. For example, Label,Value,Percentage. If the option is set to Auto, the chart engine decides what it thinks is the best content to show. Typically, this is the value of the riser or slice. For example, on a basic pie chart, the Auto setting produces the following result.

You have additional content choices. For example, you can choose Label, which corresponds to the series label that is shown in the legend. When you select the Label option, you also have the option of turning the legend off, so as not to duplicate the information that is displaying in your chart. The Label option is shown in the following image.

You can also choose Percent, which shows the percentage of the whole for each riser or slice. This is very useful for a pie or stacked bar chart, as these are the charts that are best used to visualize the concept of percentage-related content, as shown in the following image.

You can also display the Value, which is the riser/slice value. This is often the same thing you will get if you choose Auto.

There are also options for you to combine three choices, such as Value, Label, and Percent. This allows you to display all three items, as shown in the following image.

By default, these items display on a single line. They are separated by a comma. If you want to display them in a word-wrapped format, click Wrap Data Labels to display the content on three separate, unique lines, as shown in the following image.

How to: Format a Matrix Chart

If you are working with a chart type that supports a matrix format (for example, Matrix Marker), WebFOCUS Designer provides a selection of formatting options that you can use to customize and enhance the styling of your chart. A matrix format is a grid that contains values based on the intersecting data points, which is useful for reviewing changes and trends over time. Available formatting options for matrix charts include Headers and labels, and Lines, as shown in the following image.

You can customize the row and column headers and their corresponding values in a matrix chart. Specifically, you can change the font type, font size, and color. You can also change the emphasis of the font using bold or italic styling. You can also change the alignment of row values text.

When working with lines in your matrix chart, you can change the line style (for example, solid or dotted) and the thickness. These formatting options allow you to make visible enhancements that will improve the appearance and presentation of your matrix charts.

How to: Format Data Grids

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 Style tab . The Style 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 Style tab. These 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 scrollbar, 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 scrollbar, selecting Freeze row headers keeps the row headers in place while scrolling so that you can see which row each cell belongs to. When deselected, 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.

How to: Adding a Theme to a Chart

A theme is used to determine the coloring and hues that display in the charts you configure using WebFOCUS Designer. For example, the default border color and chart colors are determined by the theme.

The default theme is called Warm, but you can select a different theme as required. For example, you may want to apply a corporate standard theme to your chart. You can add and change themes to suit your requirements (for example, branding).

Available themes that are called by WebFOCUS Designer are located in the Global Resources domain, as shown in the following image.

Note: This folder structure is present when adding a theme to your chart.

Supported formats for themes include .sty and .css. The theme used in a chart uses the .sty file type, while a .css file is used as a theme for a page. You can develop your own theme using a text editor such as Notepad and then upload it for use in WebFOCUS Designer.

Tip: You can use the code from an existing theme as a model when creating a new theme.

Note: Charts and reports created for use on pages that have colors applied to the component containers can use a transparent background to allow the defined background color of the page container to show through. The Midnight theme, provided as one of the Global Resources options, is an example of a page theme that contains darker background colors. When used in content such as a chart or report, the Midnight theme uses white text to create contrast with this darker background.

In the current release of WebFOCUS Designer, the chart and report canvases display a white background only. This means that if, in order to display on a dark colored page, the font color in the selected theme is defined as white and uses a transparent background then the text will not be visible on the white canvas. To view the white text, build your chart or report on the canvas and add it to a page container with a dark background.

How to: Adding Color to Your Chart Change the Color Scale in a Chart

By adding color to your chart components, you can change the way information is perceived and plays a large role in the effectiveness of your chart.

Color adds contrast to your charts, giving you an advantage in presenting unique, well-balanced content. You can use color to highlight a specific aspect or outcome on your chart. WebFOCUS Designer provides a color picker to add color and style your chart.

You can access the color picker in two primary ways: on the Style tab and at the top of the canvas when formatting headers and footers. Using these options, you can style with color and make other color-based decisions. You can indicate color values and ranges to highlight data. You can color a chart component (for example, a header or axis), text, or even add colored lines to accentuate the background grid of your data. You can also change the theme, which changes the color palette and background of your chart.

The following image shows an example of color options that display on the Style tab (with the palette exposed), which you will also see in other areas where color formatting is supported:

The following image shows the options that display at the top of the canvas (with the palette exposed) when working with headers and footers.

Note: When specifying a theme, you can use the default or specify another one. The colors stored for the theme are part of the underlying .css or .sty file, which contains the color schemes.

In WebFOCUS Designer, the color picker supports a colorspace and a palette-based approach, as shown in the following image.

You can access the color picker from any of the sections on the Style tab. You can also access the color picker when working with headers and footers. When you access the color picker, the color picker displays the Palette tab, by default. From this tab, you can select from up to 20 pre-defined color options. You can also select the No Fill option, which displays the selected content as transparent. This is particularly useful in cases where you might want to prevent (or hide) the display of information.

The More tab allows you to choose a custom color by interacting with a hue wheel and the color value field, as shown in the following image.

You can specify an exact color code (hexadecimal or HTML) by entering it in the color value field located at the top of this tab, and also specify transparency by using the transparency slider.

Note: When a custom color is selected and you click OK, the color is automatically added to the Custom Colors section in the Palette tab.

You can also set a color range for a measure in your chart. This allows you to specify hues or ranges of color for use in your chart. In cases where Theme is not selected, the color specification overrides what is available in the theme. The color that you select dictates the legend, which in turn displays the various chart components, based on the colors and measurements specified.

To change the color scale options, right-click a measure in the Color bucket and select Set color ranges, as shown in the following image.

This invokes a new dialog box, Set Color Ranges, where you can select a color range for your chart, as shown in the following image.

When you make a selection, you can override the color schemes that are available from the theme of your chart. Theme is selected, by default. You can select a different color range, such as Green or Red/Orange, from the list of options, which gives you more control over how color is used in your chart to create contrasts between various aspects. For example, if your chart displays different temperature values using a measure in the Color bucket, you may wish to use the Red/White/Blue option to intuitively show higher temperature values in red and lower ones in blue

If you change the color range to something other than Theme, it is written as inline styling in the .fex file. Inline styling always overrides what is in the StyleSheet because it is listed after it in the .fex file. In this case, the last setting indicates which styling takes precedence. When the color range is set back to Theme, the inline styling is removed so the behavior returns to the theme's settings.

This behavior does not affect your ability to change themes on the Style tab. However, if you change the theme with an inline setting in place, the settings of the Theme will still be overridden by the inline settings and the color scale in the legend will not be affected. The current procedure only respects the current theme's settings if the color range setting is set to Theme.

In the Set Color Ranges dialog box, you can also select Continuous or Discrete to determine how the color scale is generated. When Continuous is selected, the color scale is a gradient, and each color in the color scale represents a different value. When Discrete is selected, the color scale is divided into segments. Each color in the color scale represents a range of values.

The following image shows a matrix marker chart that uses the Red/Yellow/Green color scale with the Continuous option selected.

The Continuous option creates a more granular color scale, allowing you to see slight differences between similarly colored chart components.

The following image shows the same chart, with the Discrete option selected.

The Discrete option creates identifiable groups based on sections of the color scale.

When using the Theme color scale option, the default color scale type and number of segments in discrete mode are dependent on the values of the colorScale property in the theme that you are using. For example, if 5 colors are listed for the colorScale property in StyleSheet being used as your theme, then 5 colors display in the color scale when the discrete option is used.