Adding a chart

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

On the Design tab, from the Data display list, drag Chart to the work area. 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
Axis/Wedges/Dial
Series tab (not shown for pie and gauge charts)
Presentation

General tab

The tab has three sections: Chart, Data source, and Other/Identifier.

Chart

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

Provide a Title for the chart.

Note: 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.

Other/Identifier

In the Other area, you specify visibility and loading behavior:

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.
Load behavior – Select when the chart loads:
- At screen load (the default)
- After screen renders.
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.

In the Identifier area, you can set the Tour ID field to provide an ID for use in a guided tour.

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: Chart control - Axis tab for a column chart.
Bar: Chart control - Axis tab for a bar chart.
Pie: Chart control - Wedges tab for a pie chart.
Area: Chart control - Axis tab for an area chart.
Line: Chart control - Axis tab for a line chart.
Gauge: Chart control - Needle tab for a gauge chart.

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 information in the Based on area. The source options change depending on the data source and series option you choose on 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.

Presentation

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

Title format – To change the title format, clear the entry in this field and then select the format you want from the options offered.
Chart format – To change the chart format, clear the entry in this field and then select the format you want from the options offered.
Chart size – Select Auto to have the chart resize to the available space. Select Custom and complete the Width and Height fields that appear to specify a size in pixels, or a percentage of display space, for the chart.
Show legend – This option does not appear for gauges. Select the check box to display a box explaining what the chart elements, such as bars, columns, lines, and pie slices, represent. You can have the legend show at the bottom or at the right of the chart, and horizontally or vertically.
Note: If you select right, the legend displays vertically.
Enable hover highlighting – Charts and legends have default hover behavior that highlights current data series. To disable the hover highlighting, clear the check box
Show border – Select the check box to have a border appear around the chart.

Tooltip

Enable – A tooltip containing specific chart values appears when the user hovers over a region on the chart. Clear the check box to disable tooltips.
Enable shadow – A drop shadow displays for the tooltip. Clear the check box to prevent the shadow from appearing.
Background – The fill color of the tooltip box is transparent by default. Select a color or enter a CSS hexadecimal value to change the fill color. Then, use the Opacity slider to change the color intensity. More intense colors make black text more difficult to read.
Border – The tooltip has a black rectangular border by default. Select a color or enter a CSS hexadecimal value to change the border color, if necessary. Then, use the Opacity slider to change the color intensity. Change the Border width and Border radius, if necessary.
Font – The tooltip text is black. Select a different color or enter the CSS hexadecimal value to change the font color, if necessary.
Name - value separator – A comma separates the values displayed in the tooltip. To change the separator that appears, enter the symbol or text to use.

Grid

Define the style, thickness, color, and number of the gridlines. This section is not available for Gauge charts.

Width – To change the width of the gridlines, enter the width in pixels.
Line style – To change the line style, select the style from the list.
Color – Grid lines are black by default. Select a color or enter a CSS hexadecimal value to change the color of the grid lines. Then, use the Opacity slider to change the color intensity.
Number of lines – The number of gridlines that appear on the chart. Change the number of gridlines that appear by default. If the area is not wide enough to display all the lines, then the number of lines are adjusted to best fit the area. To force the lines to display regardless of best fit, then clear the Adjust lines check box.

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, select the check box to have the current needle value display.
Data tooltip – Select 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

In this section, you can enable theme coloring and apply conditional colors.

Enabling theme coloring – Use the colors defined in the skin.
Applying conditional colors – Apply conditional colors to 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.
Note: 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.
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.

Note: 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.

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, in Dev Studio, click Configure > User Interface > Gallery > UI elements.