You are here: User interface > User interface rules > Harness and section forms > Harness and section forms - Adding a chart

Harness and Section forms - Adding a Chart

You can add a static or interactive chart to a cell on a harness, section, or flow action form. Follow this process:

  1. Create or identify a data source.
  2. Add the chart control to a harness, section, or flow action.
  3. Configure the chart control.
  4. Test the chart's display and functions.

1. Create or identify a data source

The data source for the chart can be a report definition, a data page, or a clipboard page.

2. Add the chart control

In the harness, section, or flow action in which you want to display the chart, click the down-arrow at the right end of the Advanced control group and select the Chart control. Drag the control. When the pointer changes shape to indicate that you can drop the layout, release the mouse button. If the destination cell is not empty, the chart replaces the current contents of the cell.

3. Configure the chart control

Click the View properties icon on the cell to display the Cell Properties panel.

The panel has a preview image of the chart, and tabs where you configure the chart's display and data source.

The preview reflects the choices you make on the tabs. If you have not yet set a data source for the chart and properties for some of its elements, a static image of a chart displays. Notifications appear above the image to remind you what you need to do. These notifications vary according to the chart type you choose.

The number and names of tabs vary according to the chart type you select:

General tab

The tab has three sections: Chart, Data source, and Identifiers.

Chart

Select the chart type to use from the drop-down menu .

Provide a Title for the chart.

A long title might not display well if the cell in which the chart displays is set to a small width.

Data source

Select a data source for the chart in the required field. The data source can be

Depending on the chart type you have chosen, more fields may appear in this section where you identify the column(s) in the report definition or the property or properties in the data or clipboard page that provide the data for some chart elements:

Identifier

In the Tour ID field you can optionally provide an ID for use in a guided tour.

Other

Return to top

Axis/Wedges/Dial tab

The name of this tab and the fields it displays change depending on the chart type you have chosen. Click the appropriate link to see information about the fields on this tab for a given chart type.

Return to top

Series tab

This tab appears for Column, Bar, Area, and Line charts.

Selected series:

The drop-down menu lists all the currently selected series displayed in the chart. Click Add series to add a series, then select its source in the Based on fields. The source options change depending on the data source and series option you choose in the General tab.

If the chart has more than one series, the Delete series button appears. Select the series to delete in the drop-down menu, then click the button to remove the series from the chart.

Display values as:

The fields displayed depend on the data source selected.

Select one of the available options:

The functions available depend on the series selection you make on the General tab.

Return to top

Presentation tab

Set your global presentation settings on this tab. The chart preview updates to reflect your selections so you can verify the chart appears as you want it to. Some fields appear only for certain chart types.

Chart

Series

Different fields and options appear depending on the series type.

Text

Date/Time

Integer

Other settings

Colors

For many lists of colors you create in the sections described below, you can drag a color higher or lower on the list. A higher color takes precedence over a lower color.

Conditional colors

In this section you can color individual chart elements (such as bars, columns, lines, and pie slices) based on either the numeric value represented by the element or the label associated with the element.

The sections available vary depending on the chart type you choose. They may include:

Add a color to a list by clicking the + icon below the list. Select a comparison (for instance, "Greater than") where appropriate, a value, and a color by clicking the color swatch.

Thresholds

For charts such as bar, column, area, and line that display chart elements on a grid, you can define thresholds (colored lines or regions on the grid). For gauges you can specify lines that radiate from the center of the gauge, or arcs between the values you specify.

The values of arcs for gauges cannot overlap.

Click Add new and, if there is an option, select the threshold type to add. Specify the value or the value range, and provide a label; then click the swatch to select a color from the color picker.

The available conditions vary depending on the section you are working in.

Return to top

4. Test the chart

After you have closed the Cell Properties panel, click the Actions menu button and select Run to preview the chart and confirm that it displays as you want it to.

About Flow Actions

About Harnesses

About Sections

UI Gallery

The UI Gallery landing page contains a working example of this element. To display the gallery, click Designer Studio > User Interface > Gallery > UI elements.