Data Explorer Graph Configuration

For some data explorer zones, it is more effective to display the results in a graphical form such as a pie or line chart. Visualization option parameters enable the graph configuration to be integrated with the data explorer zone that retrieves the data.

The visualization option parameters support three options:

  • Grid - displays the data in a standard data explorer grid
  • Chart - displays the data in the form of a chart
  • Map - provides the ability to invoke a UI Map to display the data

Up to five visualization option parameters may be specified. One of the options must be the standard grid, allowing for a maximum of four graphical options. The zone will display icons corresponding to the visualization types to allow you to switch between the various views. These icons are presented in the same order are they are defined in the parameter list.

Note: If the only display option is a standard grid, it is not necessary to specify the grid as a visualization parameter.

Visualization option parameters are provided on the Info Data Explorer - Single SQL (F1–DE-SINGLE) and Info Data Explorer - Multiple SQLs (F1–DE) zone types.

Visualization Option Parameter Configuration

Mnemonics are used to define the attributes for an option type within the parameter value.

For a grid, the mnemonic is ‘optiontype=GRID’. No other mnemonics are required.

For a map, the mnemonics are ‘optiontype=MAP map=MAP_​CD schemaPath=xpath’, where ‘MAP_​CD’ is the ID of the UI Map and ‘xpath’ is the schema path of the UI Map. In most use cases the schema elements will match the result set from the data explorer, in which case no schemaPath mnemonic is needed. If the UI Map schema has additional elements present, the schemaPath attribute will define the group node that the data explorer information will be copied into.

For a chart, the option type mnemonics is ‘optiontype=CHART’. This is followed by the appropriate chart configuration attributes, which are described in the section below.

Chart Configuration

The following attributes are used to configure a graphical representation of a set of data.

The ‘oraChart:’ attribute defines the type of graph to display and its general configuration. The set of configuration parameters available for this attribute are as follows:

Parameter

Values

Description

type:

pie

stacked

cluster

line

area

combo

Defines the type of chart to display.

Required

showLegend:

true

false

Defines if the chart should have a legend displayed.

Optional (default is true)

legendPosition:

left

right

bottom

top

Defines where the legend should appear.

Optional (default is right)

Setting position to left or right will automatically render it vertically.

Setting position to top or bottom will automatically render it horizontally.

legendBorder:

true

false

Defines if the legend should display with a border around it.

Optional (default is false )

depth:

true

false

A value of true indicates a 3 dimensional depth for the chart.

Optional (default false, which is a 2 dimensional chart)

animate:

true

false

A value of true indicates that the graph should animate when displayed.

Optional (default is true). When using large data sets, consider disabling animation.

dataCursor:

on

off

A value of on enables hovering anywhere in the graph.

Optional (default is off). It is not applicable to pie charts.

orientation:

horizontal

Defines the chart orientation. This only applies to bar, line, area, combo charts.

E.g., oraChart="type:cluster; orientation:horizontal", defines horizontal cluster chart.

Optional (default is vertical).

The oraChartSeries attribute defines the source information for the graph. Most charts support 5 of these attributes, with the following mnemonics:

  • oraChartSeries1
  • oraChartSeries2
  • oraChartSeries3
  • oraChartSeries4
  • oraChartSeries5

Stacked charts support an unlimited number of series by continuing to add attributes oraChartSeries6 and above, but beware of performance implications and memory limits when using an excessively high number of series. All attributes are identical in format and accept the same parameters, as described below.

Note: All the charts require oraChartSeries1. Stacked, Cluster and Line charts may optionally include the additional series attributes (for multiple bars/lines).

If you define multiple series, then data must be provided for all series defined. The data amounts can be 0 (zero) but they have to be present in order for the chart to display correctly.

The set of configuration parameters available for the oraChartSeriesN attribute are:

Parameter

Values

Description

list:

XPath value

Defines the XPath to the list in the XML that contains the data to chart.

Required only for HTML definitions in UI Maps. Data explorer values are derived from the columns for the zone.

amount:

Cn

Pn

XPath value

Defines the element containing the amount to chart. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

Required

xaxis:

Cn

Pn

XPath value

Defines the element containing the x-axis data. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element is specified.

Required for Stacked, Cluster, Line, Area and Combo charts.

xaxisFormat:

date

dateTime

time

localDate

string

Defines the x-axis data format.

If it is date, dateTime or time then the value is presented in the format as defined on the user’s display profile.

In case of localDate or string the data is displayed as is with no special formatting.

Optional (Default is date).

label:

Text value

Defines the label for the amount being charted.

Either this setting or labelPath: must be defined.

labelPath:

Cn

Pn

XPath value

Defines the element that provides the label for the amount being charted. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

Either this setting or label: must be defined.

currency:

A valid Currency code

Defines the currency code for the amount being charted.

Optional.

currencyPath:

Cn

Pn

XPath value

Defines the element that provides the currency code for the amount being charted. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

Optional.

hoverText:

Text value

Defines the hover text for the chart element.

Optional (A default hover text is always available.) Ignored if hoverTextPath: is defined.

The following substitution variables are available.

  • $label This will be replaced with the label text as determined by the label: or labelPath: setting.
  • $amount This will be replaced with the amount text as specified by the amount: setting.
  • $axis This will be replaced with the x-axis text.
  • $% This will be replaced by the percentage "slice" of the pie or bar.
  • $newline This will force a line break.

If the hover text defined contains any of the above values, they will be replaced by the equivalent text prior to being displayed.

Example:

"hoverText:$label$newline$amount"

hoverTextPath:

Cn

Pn

XPath value

Defines the element that provides the hover text for the chart element. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

The hover text in the element can utilize all the substitution functionality described above in the hoverText: description.

Optional.

type:

bar

line

area

This attribute is used for the combo chart type only. It defines how each series on the combo chart should be presented.

The following example defines a combo chart where one series is rendered as bars and another one as area.

oraChart="type:combo;" 
oraChartSeries1="xaxis:C3; 
label:C2; amount:C1;type:bar" 
oraChartSeries2="xaxis:C3; 
label:C2; amount:C1;type:area"

navOpt:

A valid Navigation Option code.

Defines a navigation option to be activated when the chart element is clicked.

Optional.

navOptPath:

Cn

Pn

XPath value

Defines the element that provides the navigation option to be activated when the chart element is clicked. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

Optional

Note that both navOpt: and navOptPath: may be configured. The navOptPath: navigation option is processed first. If a value is found it is used, otherwise the value in the navOpt: setting is used. This means that the chart definition can include a default navigation option and a navigation option present in the data will override it.

key:

Cn

Pn

XPath value

Defines the element that contains the key field data to be used in a navigation option. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

This is required if either navOpt: or navOptPath: is defined.

Note: Only one key field can be configured for a navigation option.

script:

A BPA script name

Defines a BPA script to be activated when the chart element is clicked.

Optional

When a script is executed, all the elements from the chart data will be made available to the script as temporary variables.

scriptPath:

Cn

Pn

XPath value

Defines the element that provides the BPA script to be activated when the chart element is clicked. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

Optional

Note that both script: and scriptPath: can be configured. The scriptPath: script option is processed first. If a value is found it is used, otherwise the value in the script: setting is used. This means the chart definition can include a default script and a script present in the data will override it.

color:

HTML Color code / RGB value

Optional (default colors applied)

Defines the color for the series. The format is a valid HTML color code, e.g. green or blue. All valid color names are defined in this link: http://www.w3schools.com/htmL/html_​colornames.asp.

Alternatively an RGB format may be used. (00FF00 is green and 0000FF is blue)

Note: Refer to Color Contrast for information about the use of the HTML color 'red' and its impact on accessibility.

colorPath:

Cn

Pn

XPath value

Defines the element containing a color for the series. For data explorers, this will be a SQL or post-processing column identifier. For HTML definitions, the XPath of the element must be specified.

The valid formats as described in the color: setting apply.

Optional (default colors applied)

pieColors:

HTML color code / RGB values

Defines the colors for the pie series. Any number of HTML color codes or RGB color values can be specified, separated by spaces. Examples: 

pieColors: green blue
pieColors: 00FF00 0000FF

Optional (default colors are applied if the series exceeds the values specified)

The oraChartBroadcast: attribute provides the ability to broadcast a value from a chart to the portal context. An unlimited number of fields can be broadcast, configured as name/value pairs; for example: oraChartBroadcast="FIELD_​NAME1:C1;FIELD_​NAME2:C2;" where FIELD_​NAMEn is the name of the portal context field to be broadcast and Cn (or Pn) is the element that contains the data value to be broadcast. Broadcast is triggered by clicking on a corresponding section of the chart.

For HTML definitions in UI Maps, the syntax is oraChartBroadcast="FIELD_​NAME1:xpath1;FIELD_​NAME2:xpath2;" where ‘xpathn’ is the element in the list schema that contains the data value to be broadcast.

Zone Configuration Examples

Zone with a simple pie chart

In this example, the zone SQL summarizes To Do entries by Role. The column definitions are:

  • C1 - role description

  • C2 - count of To Do entries by role

  • C3 - role ID

Visualization Option 1

This option shows To Do entries by Role as a pie chart. The role ID will be broadcast to the portal when the corresponding section of the pie chart is clicked.

optiontype=CHART
oraChart="type:pie;"
oraChartSeries1="labelPath:C1; amount:C2;hoverText:$label$newline$amount;"
oraChartBroadcast="ROLE_ID:C3"

Zone with two chart types

In this example, the zone SQL summarizes To Do entries by Priority and also calculates separate counts by To Do status within priority. The column definitions are:

  • C1 - priority description

  • C2 - count of To Do entries by priority

  • C3 - priority flag value

  • C4 - count of Open To Dos by priority

  • C5 - count of Being Worked On To Dos by priority

  • C6 - Label for the Open To Dos bar in the cluster chart

  • C7 - Label for the Being Worked On To Dos bar in the cluster chart

Visualization Option 1

This option shows To Do entries by Priority as a pie chart. The priority value will be broadcast to the portal when the corresponding section of the pie chart is clicked.

optiontype=CHART
oraChart="type:pie; legendBorder:true;"
oraChartSeries1="labelPath:C1; amount:C2;hoverText:$label$newline$amount;"
oraChartBroadcast="TD_PRIORITY_FLG:C3"

Visualization Option 2

This option shows To Do entries by Priority as a cluster chart with two data series, one for Open To Dos and another for Being Worked On To Dos . The corresponding priority value will be broadcast to the portal when clicking either the Open or Being Worked on bar of the cluster chart.

optiontype=CHART oraChart="type:cluster;  showLegend:true;" 
oraChartSeries1="xaxis:C1; xaxisFormat:string; labelPath:C6; amount:C4;hoverText:$label$newline$amount;"
oraChartSeries2="xaxis:C1; xaxisFormat:string; labelPath:C7; amount:C5;hoverText:$label$newline$amount;"
oraChartBroadcast="TD_PRIORITY_FLG:C3"