You can add a static or interactive chart to a cell on a harness, section, or flow action form. Follow this process:
- Create or identify a data source.
- Add the chart control to a harness, section, or flow action.
- Configure the chart control.
- 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
- A data page. If you select this option, in the Data page field select the data page to use. If the data page requires parameters, you can provide them. Click the icon to the right of the field to create a new data page.
- A clipboard page. If you select this option, in the Clipboard page field select the clipboard page to use. Click the icon to the right of the field to create a new clipboard page.
- A report definition. If you select this option, in the Applies to field that appears, select the applies to class that contains the report definition you want to use. Click the icon to the right of the field to define a new applies to class. In the Report definition field, select the report definition to use. Click the icon to the right of the field to create a new report definition.
If the selected report definition uses parameters such as a customerID or operatorID to retrieve the data it displays, a table of parameters appears. For each parameter provide a value, either by selecting from the list of available values or entering a static value.
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:
- Series - For Column, Bar, Line, and Area charts. If you select Single, specify the property to provide the X-axis data. If you select Multiple, also identify the property to provide the Y-axis data.
- Pie - Identify the property that provides the data for the pie wedges in the Wedges data field.
Identifier
In the Tour ID field you can optionally provide an ID for use in a guided tour.
Other
- Load behavior- Select when the chart loads:
- At screen load (the default)
- After screen renders.
- Visibility- Set the chart to display:
- Always.
- Based on the value generated by an expression. A field appears where you can select an existing expression. Click the icon to the right of the field to create a new expression.
- based on a When condition. A field appear where you can select the When. Click the icon to the right of the field to create a new When.
If you do not select Always, a further field appears. Check the Reserve space when hidden check box to have a blank area the size of the chart appear in the hosting harness, section, or flow action when the chart does not display.
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.
- Column: The tab label is Axis.
- Bar: The tab label is Axis.
- Pie: The tab label is Wedges.
- Area: the tab label is Axis.
- Line: The tab label is Axis.
- Gauge: The tab label is Dial.
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 you select Column, select the report definition to use in the Column field that appears.
- If you select Property, select the data page or clipboard page property to use in the Property field that appears.
- If you select Constant(which appears only if you select single series), provide the name of the constant to use in the Constant field that appears.
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:
- Counts – The number of instances for items in the series
- Other functions – Select the numeric value and the function to apply to it.
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
- Label format - Select None, Text, Email, Phone, or URL.
- Auto prepend - Provide a value to attach at the start of each label.
- Auto append - Provide a value to attach at the end of each label.
Date/Time
- Label format - Select None, Date/Time, or Date.
- Date format - Select the format for the dates.
Integer
- Label format - Select None or Number.
- Decimal - Specify the number of decimal places.
- Numeric Symbol - Select None, Currency, Constant (and provide the constant), or Reference (and specify the source).
- Separators - Specify the symbols to separate millions, hundreds, and thousands; and the decimal indicator.
Other settings
- For bar and column charts, you can adjust the spacing field, which is set by default to use 20% of the chart width or height. To have bars or columns touching each other, set this field to 0%; to display very narrow bars or columns, set this field to its maximum, 80%.
- For pie charts you can specify
- whether wedge values display as a number or as a percentage.
- Whether to include wedge names and values.
- Whether wedge label placement is outside the wedge or as a callout.
- For gauges, you can select to show tick marks along the dial. If you select Show ticks, in the fields that appear:
- Tick location - Choose "Inside" to have the ticks appear on the inside curve of the gauge. Choose "Outside" to have them appear on the outside curve.
- Minor ticks - Set the number of ticks between major ticks.
- Major ticks - Set the number of major ticks on the gauge. The system divides the maximum value of the gauge by the number of major ticks to set their interval.
- Show needle value - For gauges, Check the check box to have the current needle value display.
- Data tooltip - Check the check box to have a tooltip appear when the user hovers the mouse pointer over an element of the chart. The tooltip displays the data value for that chart element.
- If it appears, check the Display blank values as 0 check box to have the chart display a blank value as 0, and include them as zero when making calculations such as averages.
- For area and line charts, check the Interpolate check box to have the chart estimate values between the data points provided by the data report, to provide a smooth display.
- For line charts, set the Line weight from the options provided.
- Show values - This option does not appear for gauges. Select in this field how you want the chart to display numeric values of a series:
- Never.
- Always. In the Value font size field that appears, set the size of the values in pixels.
- Depending on a When condition. If you select this option, a field appears where you can specify the When to use. In the Value font size field that appears, set the size of the values in pixels.
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:
- Column, Row, Line, Area, or Wedge values - Change the color of a chart element based on the value.
- Column or Row labels, or Wedge names- Change the color of chart elements based on the label. Note that colors based on values take precedence over colors based on labels.
- Gauge colors - Specify the upper and lower values for a color range. Ranges cannot overlap.
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.
The UI Gallery landing page contains a working example of this element. To display the gallery, click Designer Studio > User Interface > Gallery > UI elements.