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.
|
|
| 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.
|
|
| 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.
|
|
| 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.
|
|
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 |
| 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. |
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. |
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. |
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 |
| 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 |
| xAxisFlag |
Select to display the x-axis. |
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. |
| 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. |
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
|
