Fx Bar
Graph
Bar graphs are useful for comparing columns or rows of numeric data
from a tabular data element returned by your data attachment. The Fx bar graph
(class name: obj_fxbar) has many features that standard bar graphs do not, such
as:
- Data
tips that display detailed information about associated column data
- Graph background with alternating row colors
and a configurable grid color
- Multi-position legend that can be resized
interactively
Using Data
Properties
To attach data to your graph, right-click in the Property
Value field of the valueTable
property. It is possible to graph multiple columns or rows of numeric data.
If you include a label column in your data attachment for valueTable,
it can be used to label either the x-axis or the legend, depending on whether
the rowSeriesFlag is selected or deselected.
The
rowSeriesFlag
controls how row and column data populate the graph:
|
If the
rowSeriesFlag
checkbox is selected, one group of bars will be shown for each numeric
column in your data attachment. Within the group for each numeric column,
there will be a bar for each row in that column. Column names will
be used for the x-axis labels. |
|
If the
rowSeriesFlag
checkbox is not selected, one group of bars will be shown for each row
in your data attachment. Within the group for each row, there will be a
bar for each column in that row. Column names will appear in the legend.
|
Using Interaction Properties
Commands
To assign a command to your graph, right-click in the Property
Value field of the command property and select Define Command.
Commands can be set up to
execute when you click on an object or
automatically execute the command when the value of an object reaches a
specified threshold.
See Building
Displays>Define/Execute Command for information on how to set up
commands. Drill Down Displays
To specify a drill
down display, double click on the drillDownTarget property. Any display (.rtv)
file can be targeted as a drill down. Once a drill down target has been set, double-click on the bar in the graph to activate the drill down. Drill down displays can
be activated in the same window that contains the graph or open in a separate
window. This allows you to build a customizable hierarchy of displays.
Tool Tips
Select the mouseOverFlag
to enable tool tips for your bar graph. To display a tool tip, select the graph
and point to a bar with your mouse. The tool tip will contain
information from your data attachment about that bar.
Alert Properties
To set bar colors based on a threshold value, select
the corresponding value alarm or value warning flags.
| Property
Name |
Description |
| valueHighAlarmEnabledFlag |
Select to enable the high
alarm threshold and the following related properties:
| valueHighAlarm |
Set the value of the high alarm
threshold.
|
| valueHighAlarmColor |
When a bar's value is greater
than or equal to the valueHighAlarm property, the color of the bar
will change to the valueHighAlarmColor.
|
| valueHighAlarmLineVisFlag |
Select to display a dotted
line at the high alarm threshold. The color of the line is set to the valueHighAlarmMarkColor.
|
| valueHighAlarmMarkColor |
Set the color of the dotted line
displayed at the high alarm threshold. |
|
| valueHighWarningEnabledFlag |
Select to enable the high
warning threshold and the following related properties:
| valueHighWarning |
Set the value of the high warning
threshold.
|
| valueHighWarningColor |
When a bar's value is greater
than or equal to the valueHighWarning, but less than the valueHighAlarm,
the color of the bar will change to the valueHighWarningColor.
|
| valueHighWarningLineVisFlag |
Select to display a dotted
line at the high warning threshold. The color of the line is set to the
valueHighWarningMarkColor.
|
| valueHighWarningMarkColor |
Set the color of the dotted line
displayed at the high warning threshold. |
|
| valueLowAlarmEnabledFlag |
Select to enable the low
alarm threshold and the following related properties:
| valueLowAlarm |
Set the value of the low alarm
threshold.
|
| valueLowAlarmColor |
When a bar's value is less
than or equal to the valueLowAlarm property, the color of the bar
will change to the valueLowAlarmColor.
|
| valueLowAlarmLineVisFlag |
Select to display a dotted
line at the low alarm threshold. The color of the line is set to the valueLowAlarmMarkColor.
|
| valueLowAlarmMarkColor |
Set the color of the dotted line
displayed at the low alarm threshold. |
|
| valueLowWarningEnabledFlag |
Select to enable the low
warning threshold and the following related properties:
| valueLowWarning |
Set the value of the low warning
threshold.
|
| valueLowWarningColor |
When a bar's value is less
than the valueLowWarning property, but greater than the valueLowAlarm
property, the bar will change to the valueLowWarningColor.
|
| valueLowWarningLineVisFlag |
Select to display a dotted
line at the low warning threshold. The color of the line is set to the
valueLowWarningMarkColor.
|
| valueLowWarningMarkColor |
Set the color of the dotted line
displayed at the low warning threshold. |
|
Background Properties
Specify how the background
is displayed in your bar graph.
| Property
Name |
Description |
| bg3dFlag |
Select to display a 3D edge on the
background rectangle. |
| bgColor |
Select the 
button and choose a color from the palette to set the background color. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| bgGradientFlag |
Select to display a gradient
in the background rectangle. |
Bar Properties
Specify the way the bars
are displayed in your graph.
| Property
Name |
Description |
| barFitFlag |
Select to stretch the bars
to fit the available space in the plot area. If deselected, the minSpacePerBar
property
is used to determine bar width. |
| barImage |
Select an image to display
in the bars. NOTE: If necessary, the image will be stretched to fit the
bar size. |
| barOutlineFlag |
If selected, an outline appears around each bar. |
| barProperties |
Double-click on barProperties
to specify the color and fill pattern to be used to display each bar in
the graph. |
| barShape |
Select a bar shape
from the drop down menu. NOTE: If 3D Rectangle is selected, then use the Layout
property draw3dDepth to set the width of the rectangle. |
| barTransparencyPercent |
Set transparency of the
bars. Enter a value
between 0 and 100. A value of 0, the default, sets the bars to be completely
opaque. A value of 100 will render the bars completely transparent. |
| barValueTextColor |
Select the
button and choose a color from the palette to set text color
inside the bars if barValueVisFlag is selected. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| barValueTextFont |
Select font style of the text inside the bars if
barValueVisFlag is selected. |
| barValueTextSize |
Select size of the text inside the bars if
barValueVisFlag is selected. |
| barValueVisFlag
|
Select to
display a label containing the value for each bar. |
Data
Properties
| Property
Name |
Description |
| rowSeriesFlag |
Controls how row and column data populate the graph.
|
If rowSeriesFlag
is selected, one group of bars will be shown for each numeric
column in your data attachment. Within the group for each numeric column,
there will be a bar for each row in that column. Column names will
be used for the x-axis labels. |
|
If the
rowSeriesFlag
is not selected, one group of bars will be shown for each row in your data
attachment. Within the group for each row, there will be a bar for each column
in that row. Column names will appear in the legend. |
|
| valueDivisor |
Divides bar and y-axis values
by the number entered. |
| valueTable |
Attach your data to the valueTable
property. It is possible to graph multiple columns or rows of numeric data.
If you include a label column in your data attachment for valueTable,
it can be used to label either the x-axis or the legend, depending on whether
the rowSeriesFlag is selected or deselected.
NOTE: By default, the label column is the first
non-numeric text column in your data attachment. |
yValueMax
yValueMin |
Controls the range of y-axis if the yAxisAutoScaleMode is set to
Off.
Select
On for the yAxisAutoScaleMode to calculate the y-axis
range according to data values being plotted. |
Data Format Properties
Specify the data format
for your bar graph.
| Property
Name |
Description |
| yValueFormat |
Formats the numeric value shown on each bar, if
barValueVisFlag is selected. Formats the numeric value that appears in
each tool tip if mouseOverFlag is selected. |
Data Label Properties
| Property
Name |
Description |
| labelColumnName |
Specify the name of a
label column in your data attachment. If a labelColumnName is not
specified, then by default the first non-numeric text column in your data
attachment will be used as the label column. |
| rowLabelVisFlag |
If selected, then data
from the specified labelColumnName are displayed either along the x-axis or in the legend,
depending on whether or not rowSeriesFlag
is selected. |
| rowNameVisFlag |
If your data attachment
does not contain a label column (i.e. a non-numeric text column) select the
rowNameVisFlag
checkbox to use row names along the x-axis or in the legend, depending on
whether or not rowSeriesFlag
is selected. |
Historian Properties
| Property
Name |
Description |
| historyTableName |
Specify
name of table in your history database in which to store tabular data.
See
History Tables>Tabular Data for information. |
|
historyTableRowNameFlag |
If
selected, data from the row name field will be stored in the first column of the
table specified in historyTableName. |
Interaction Properties
Specify how you interact
with the data in your graph. See the
Additional Interactivity section for more information on how to interact with this graph
at runtime.
| Property
Name |
Description |
| command |
Assign a command to
your bar graph. See Building
Displays>Define/Execute Command for information. |
|
commandCloseWindowOnSuccess |
If selected, the
window that initiates a system command will automatically close when the system
command is executed successfully. This
property only applies to system commands.
With data source commands, the window is closed
whether or not the command is executed successfully.
For multiple commands, this property is applied
to each command individually. Therefore if the first command in the multiple
command sequence succeeds, the window will close before the rest of the commands
are executed.
NOTE: The commandCloseWindowOnSuccess
property is not supported in the Display Server. |
|
commandConfirm |
If selected, the
command confirmation dialog is enabled. Use the commandConfirmText
property to write your own text for the confirmation dialog, otherwise text from
the command property will be used. For
multiple commands, if you Confirm the execution then all individual commands
will be executed in sequence with no further confirmation. If the you Cancel the
execution, none of the commands in the sequence will executed. |
|
commandConfirmText |
Enter command
confirmation text directly in the Property Value field or select the
button to open the Edit commandConfirmText dialog. If
commandConfirmText is not specified, then
text from the command property will be used. |
| drillDownTarget |
Name of display (.rtv)
file targeted as a drill down. See Building
Displays>Drill Down Displays for information. |
| mouseOverFlag |
Select the mouseOverFlag to enable
tool tips for your bar graph. To display a tool tip, select the graph and point to
a bar with your mouse. The tool tip will contain information from your data
attachment about that bar. |
| scrollbarMode |
Select Never, As Needed,
or Always to set the behavior
of the x-axis scroll bar in the graph. NOTE: If drawHorizontalFlag
is selected, the x-axis is vertical. Never is the default setting.
If set to Never, some bars may get clipped. Select Always
to display a scroll bar at all times. Set to As Needed to display
the scroll bar when there is not enough space to display all of the bars
in the plot area. Each bar uses at least minSpacePerBar pixels along
the x-axis. |
Label Properties
| Property
Name |
Description |
| label |
Edit label text directly in the Property Value
field or select the
button to open the Edit Label dialog. |
| labelTextAlignX |
Select x-axis position of label text from the
drop down menu. |
| labelTextColor |
Select the
button and choose a color from the palette to set the label text color. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| labelTextFont |
Select font style of label text from the drop
down menu. |
| labelTextSize |
Set the size of the label text in pixels. |
Layout Properties
Specify how the background
is displayed in your bar graph.
| Property
Name |
Description |
| draw3dDepth |
Specify width (in pixels) for the shadow of the
bars or, if the barShape selected is 3D Rectangle, the width of the
rectangle. |
| draw3dFlag |
Select to change the display
of the bars from 2D to 3D. NOTE: This property does not apply if the barShape
selected is 3D Rectangle. |
| drawHorizontalFlag |
Select to have the bars
in your graph displayed horizontally. |
| drawStackedFlag |
Select to stack each bar
group in your graph. |
| horizAxisLabelRotationAngle
|
Set the amount of rotation of labels
on the horizontal axis. Values range from 0 to 90 degrees. A value of 0 causes
the bar graph to automatically pick the optimum angle of rotation. |
| minSpaceBetweenBars |
Set the minimum amount of space (in pixels)
between adjacent bars in the same group. |
| minSpaceBetweenGroups |
Set the minimum amount of space (in pixels)
between the last bar in one group and the first bar in the next group. |
| minSpacePerBar |
Set the minimum width (in pixels) for
each bar. Default is 1.
NOTE: If drawHorizontalFlag
is selected, minSpacePerBar will set the minimum height (in
pixels) for each bar. |
Legend Properties
Specify the way the legend
is displayed in your bar graph.
| Property
Name |
Description |
| legendBgColor |
Select the
button and choose a color from the palette to set the background color
of the legend. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| legendBgGradientFlag |
Select the legendBgGradientFlag
to display a gradient in the legend background. If legendBgColor is
set to Default then gradient will not display. |
| legendPosition |
Specify the position of the legend. |
| legendTextColor |
Select the
button and choose a color from the palette to set the text color
of the legend. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| legendTextFont |
Specify the font style of text of the legend. |
| legendTextSize |
Specify the size of text of the legend. |
| legendVisFlag |
Select to display the legend. |
| legendWidthPercent |
Set default percentage of object designated for
the legend. |
Object Properties
| Property
Name |
Description |
| anchor |
Specify where to
anchor an object in the display. NOTE: If an object has the dock property
set, the anchor property will be ignored.
The anchor property is only applied when the
dimensions of the display are modified, either by editing
Background Properties or resizing the window in
Layout mode
Select None, or one or more the following
options:
| None
|
Object
not anchored. This is the default. |
| Top |
Anchor
top of object at top of display. |
| Left |
Anchor
left side of object at left of display. |
| Bottom |
Anchor
bottom of object at bottom of display. |
| Right |
Anchor
right side of object at right of display. |
When a display is resized, the number of pixels
between an anchored object and the specified location remain constant. If an
object is anchored on opposite sides (i.e. Top and Bottom or
Left and Right), the object will be stretched to fill the available
space. |
| dock |
Specify the docking
location of an object in the display.
Select from the following options:
| None
|
Object
is not docked. This is the default. |
| Top |
Dock
object at top of display. |
| Left |
Dock
object at left of display. |
| Bottom |
Dock
object at bottom of display. |
| Right |
Dock
object at right of display. |
| Fill |
Dock
object in available space remaining in the display after all docked objects
are positioned. |
If the dimensions of the display are modified,
either by editing Background Properties or
resizing the window in Layout mode, the
properties (objX, objY, objWidth and objHeight) of
docked objects will automatically adapt to match the new size of the display.
When multiple objects are docked to the same side
of the display, the first object is docked against the side of the display, the
next object is docked against the edge of the first object, and so on.
When objects are docked to multiple sides of the
display, the order in which objects were added to the display controls docking
position. For example, let's say the first object added to the display is docked
at the Top and the second object is docked at the Left.
Consequently, the first object will fill the entire width of the display and the
second object will fill the left side of the display from the bottom of the
first object to the bottom of the display.
Objects in a display have the dock property set
to Fill, are laid out across a grid in the available space remaining
after all docked objects are positioned. By default, the grid has one row and as
many columns as there are objects in the display. You can modify the grid in the
Background Properties dialog.
Once an object is docked, there are some
limitations on how that object can be modified.
- Docked objects cannot be dragged or
repositioned using objX and objY properties.
- Docked objects cannot be resized using the
objWidth or objHeight properties. To resize you must drag on the
resize handle.
- Docked objects can only be resized toward the
center of the display (e.g. If an object is docked at the Top, only its
height can be increased by dragging down toward the center of the display).
- Docked objects set to Fill cannot be
resized at all.
- Docked objects cannot be moved using Align.
Non-docked objects can be aligned against a docked object, but a docked object
will not move to align against another object.
- Docked objects are ignored by Distribute.
|
| objHeight |
Set height of the object in pixels. |
| objName |
Name given to facilitate object management via
the Object List dialog. Select Tools>Object List. |
| objWidth |
Set width of the object in pixels. |
| objX |
Plot x-axis position of object. |
| objY |
Plot y-axis position of object. |
| visFlag |
Control visibility of the object. |
Plot Area Properties
| Property
Name |
Description |
| gridAltBgColor |
Select the
button and choose a color from the palette to set one of the alternating row colors
in the grid
background. The color you specify for gridBgColor will be the other
alternating row color. Default is transparent. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| gridBgColor |
Select the
button and choose a color from the palette to set the color of the grid
background. Default is transparent. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
| gridBgImage |
Select an image to display
in the grid background of your graph. NOTE: If necessary, the image will
be stretched to fit the grid. |
| gridColor |
Select the
button and choose a color from the palette to set the color of the grid
lines. Default is white. NOTE: Color properties
are treated differently on Fx graphs than on other objects, see the Fx
Graph Colors section for more information. |
Transition Properties
| Property
Name |
Description |
| barEntranceDuration |
Specify the length of time (in milliseconds)
that the transition animation will take to display incoming data. NOTE: Duration is a significant value in the overall effect
of the animation. The correct duration value depends upon the barEntranceType
selected and the number of bars and series displayed. |
| barEntranceTrigger |
Choose whether to display the bar entrance
transition on each data update or only once when graph is initially displayed. Default is Once. |
| barEntranceType |
Select the type of bar entrance transition from
the drop down menu: Interpolate, Slide Left,
Slide Right, Slide Up, Slide Down, Wipe Left, Wipe Right,
Wipe Up, Wipe Down, Zoom Chart and
Zoom Series. |
| barExitDuration |
Specify the length of time (in milliseconds)
that the transition animation will take to hide data prior to new data being
displayed. NOTE: Duration is a significant value in the overall effect of
the animation. The correct duration value depends upon the barExitType
selected and the number of bars and series displayed. |
| barExitTrigger |
Choose whether to display the bar exit
transition
on each data update or only once when graph is initially displayed. Default is Once. |
| barExitType |
Select the type of bar exit transition from the
drop down menu: Slide Left,
Slide Right, Slide Up, Slide Down, Wipe Left, Wipe Right,
Wipe Up, Wipe Down, Zoom Chart and
Zoom Series. |
X-Axis Properties
Specify how the x-axis is
displayed in your bar graph.
| Property
Name |
Description |
| xAxisColor |
Select the 
button and choose from the palette to set the color of the x-axis. Color properties
are treated differently on Fx bar graph than on other objects, see the Fx
Graph Colors section below for more information. |
| xAxisFlag |
Select to display the x-axis. |
| xAxisThickness |
Specify (in pixels) the thickness of the x-axis.
Default is 8. |
Y-Axis Properties
Specify how the y-axis is
displayed in your bar graph.
| Property
Name |
Description |
| yAxisAutoScaleMode |
The yValueMin and
yValueMax properties
control the range of y-axis if the yAxisAutoScaleMode is set to
Off.
Select
On for the yAxisAutoScaleMode to calculate the y-axis
range according to data values being plotted. To calculate the y-axis range
including
yValueMin and yValueMax, select
On - Include
Min/Max. |
| yAxisColor |
Select the
button and choose from the palette to set the color of the y-axis. Color properties
are treated differently on Fx bar graph than on other objects, see the Fx
Graph Colors section below for more information. |
| yAxisFlag |
Select to display the y-axis. |
| yAxisFormat |
Select or enter the numeric
format of values displayed on the y-axis.
To enter a format, use syntax
from the Java DecimalFormat class. |
| yAxisMajorDivisions |
Specify the number of major
divisions on the y-axis. |
| yAxisMinorDivisions |
Specify the number of minor
divisions on the y-axis. |
| yAxisThickness |
Specify (in pixels) the thickness of the y-axis.
Default is 8. |
Fx Graph Colors
Color properties are treated differently
on Fx graphs than on other objects. In the Display Builder, the Fx graphs color
chooser dialog has five tabs:
| |
Standard Colors |
Traditional palette of 252 indexed colors |
| |
Custom Colors |
To define custom colors, select
Tools>Options and click on the Custom Colors tab. |
| |
Swatches |
Standard Java color palette |
| |
HSB |
Color selection by hue, saturation, and
brightness |
| |
RGB |
Color selection by red, green, and blue
intensity |
The color chooser also has a button for selecting a
properties Default color, which is described separately for each color property
above.
Internally, all color properties on Fx graphs are stored as a 24-bit integer RGB
value in the range of zero (black) to 16,777,215 (white). Therefore if a color
property on an Fx graph is attached to data, you must provide an integer value in that
range (not a color index between 0 and 252 as with other objects). A value of -1
indicates the default property color.
Note that the Default color and colors selected from the
Swatches, HSB, and RGB
tabs are only supported on Fx graphs. If a color is selected from one of those
tabs and then copied and pasted to a color property on any other object, white
will be used instead.
Thin Client Deployment - Additional
Interactivity
The
following additional interactivity
is supported in a Thin Client deployment:
Data Tips
- Text boxes with data info popup when the
mouse is over a data point.
Legend
- Position above, below,
right, or left of trace area
- Resize interactively
|
