Using the Editors


Chapter 13 . Display Widgets

There are several means of displaying data on a screen. You can create:


Labeling Information

Use static labels to display text on your screen that the user cannot interact with or modify. Static labels cannot be changed at runtime—either by the user or by application code. They are read-only widgets and are especially suited for:

Static labels have a limited set of properties associated with them and therefore, you will find that dynamic labels are a better choice for displaying text.

Static labels are automatically assigned to database columns that are imported into a repository. The label is given a name beginning with the letter L and is followed by the name of the text widget that is associated with it. For example, the database column cust_id is imported as a text widget of the same name. The import process creates a corresponding static label with the name Lcust_id.

Defining the Look of a Static Label

You determine the content, size, and appearance of a static label at design time. By default, a static label takes the background color of the container that holds it; usually the background color of the screen is the background color of the label.

How to Define the Content of a Static Label

  1. Select the static label.
  2. Under Identity, type the desired text in the Label property.

    If the widget has no values set in the Height and Width properties under Geometry, the widget's size adjusts to fit its content (Size to Content property under Geometry is set to Yes).

    Note: The widget's size will adjust to accommodate a larger label. However, if you increase the widget's size, either by dragging its resize handles or by specifying a size in the Length property, the widget's size remains unchanged.

How to Resize a Static Label To Fit Its Content

  1. Select the static label.
  2. Under Geometry, clear the Height and Width properties of any values.

As long as the Size to Contents property is set to Yes, trailing blanks are eliminated.

If you reset both Height and Width properties, the Size to Contents property is ignored.

Note: If you change the Length property (either by setting the property value or by resizing the widget itself) or specify a picture to display on the label, the Size to Contents property is automatically reset to No.

How to Define a Static Label's Color

  1. Select the static label.
  2. Under Color, set the FG (foreground) and/or BG (back ground) Color properties as desired.

Creating Output Labels

Use dynamic labels for displaying data or output that can be generated and changed by the application at runtime. The user cannot directly change the contents of dynamic labels. Typically, dynamic labels are useful for:

Defining Output Labels

You can control how the output data appears by setting the Format/Display properties. These include, for example, definitions for date/time format, how numeric output should appear, and what characters should appear if the output is null. For details on how to define display formats, refer to "To Display or Not Display."

When the content of a dynamic label changes, you can also force the widget's size to adjust to fit its new content.

How to Change the Size Dynamically When Content Changes

If you decrease the number of characters in the Label property, the label's length adjusts appropriately to fit the content.

If you reset both Height and Width properties, the Size to Contents property is ignored.

Note: If you change the Length property (either by setting the property value or by resizing the widget itself in the screen editor) or specify a picture to display on the label, the Size to Contents property is automatically reset to No.

In addition, you can display multiple lines of data in an output label by setting the Array Size property.


Using Graphs to Display Data

You can present data on your application screens in graph or chart format by using graph widgets. Graph data can be generated at runtime or obtained from static sources and can be displayed in a variety of formats:

The information on graph widgets is divided into five main sections. The first describes how to create a graph widget of any type and provides detailed information on the topics that apply to more than one graph type.

The four remaining sections are each dedicated to one particular type of graph: pie chart, bar/line graph, XY-plot, and high/low chart. Each of these sections outlines the procedure for creating a graph of the specified type and presents detailed information on the topics unique to that graph type.

How to Create a Graph Widget

  1. Choose CreateGraph or choose the graph icon from the Create toolbar.
  2. On your application screen, click once to create a default-sized widget or drag out the graph to the desired dimension (which you can change later).

    On GUI platforms, a pie chart containing sample data appears in the widget. Once you supply data to the widget, it will replace the sample data initially displayed.

    In character mode Panther, an empty rectangle is displayed. (Graphs are not visible in character mode Panther, although you can set all graph widget properties; the graph will be displayed when the screen is opened in a GUI environment.)

  3. (Optional) Under Identity, assign a name to the graph in the Name property.

    Panther internally assigns the graph widget a field number. Graphs are numbered sequentially from left to right and top to bottom—as Graph #1, etc.

  4. (Optional) Under Identity, assign a label to the graph in the Label property. This label is displayed in character mode to indicate where the graph is located—useful if you are developing a screen in character mode Panther that will eventually be used on a graphical platform.
  5. Under Graph, set the Chart Type property to one of the following: Pie (default), Bar, XY-Plot, or High/Low. The chart displayed in the widget changes to match the type you have specified.

    Note: If data are not visible on the sample chart, adjust the graph widget's foreground and background colors. Refer to "Changing Color Properties" for information.

    Figure 13-1 Samples of chart types. Newly created graphs are displayed with sample data

    The properties unique to graph widgets are listed under the Graph heading in the Properties window. Some graph properties apply to all types, but many are specific only to particular graph types.

    If you later (either in the editor or at runtime) change the type of a graph widget, some of the properties initially specified will not be applicable to the new graph. These properties no longer appear in the Properties window, but they are retained in the widget. If you later change the widget back to the previous type, these properties again appear in the Properties window, their settings the same as before the type was changed.

    Note: If you enter Test mode before populating the graph with data, the widget is displayed as a graph or chart with no data. The graph or chart that initially appears when you create the widget is populated with sample data and serves only as a visual cue. In Test mode, the pie chart appears to consist of just a single segment representing the entire pie chart; other chart types simply display X and Y axes but no data.

Controlling Graph Text

Text that can appear on a graph falls into the following categories:

How to Specify a Font for the Graph

The font and style for all text in the graph widget is determined by the property settings under the Font heading. Note that the fonts available on some platforms are specific to graph widgets and might differ from those you can choose for the screen and other widget types.

  1. Select the graph widget.
  2. Under Font, specify the font name and style properties for the graph.

    These settings apply to all text in the graph widget. If the Font Name property is set to Default, text on the graph will be in the Simplex font.

To ensure portability of fonts across different platforms, use graph-specific font specifications (prefixed with the word Graph in the font name). On Windows, graph-specific fonts are listed after the system fonts.

For further information on applying font properties to widgets, refer to "Specifying Fonts."

Specifying Sizes for Graph Text

Text size within a graph widget is always specified relative to the graph size. This way, if you change the size of the graph widget, the text size increases or decreases proportionately.

Text size is specified as a value between 0.0 and 100.0, inclusive, representing a percentage of the widget size. It is set independently for the title, subtitle, legend, and labels. Table 13-1 indicates the location of the applicable Text Size property and its default value for each of these text elements.

Table 13-1 Setting Text Size properties for text elements in a graph widget

Text element Location of Text Size property Default

Title

under Graph: a subproperty of Title

5.0

Subtitle

under Graph: a subproperty of Subtitle

4.0

Legend

under Legend (a subheading of Graph): a subproperty of Placement

2.0

Labels (axis, tick mark, and pie segment labels)

under Graph

2.0

Adding a Title to a Graph

You can add a title and/or subtitle to any graph widget. The title, if present, is centered near the top of the widget. The subtitle, if present, is centered beneath the title. The font and style of the title and subtitle text are determined by the settings of the properties under the Font heading.

How to Place a Title on the Graph

  1. Select the graph widget. Under Graph, enter a title in the Title property. A new property, Text Size appears as a subproperty of Title.
  2. Set the Text Size property to a value between 0.0 and 100.0, inclusive. The default text size for the title is 5.0. For more information, refer to "Specifying Sizes for Graph Text."

How to Place a Subtitle on the Graph

  1. Select the graph widget. Under Graph, enter a subtitle in the Subtitle property. A new property, Text Size appears as a subproperty of Subtitle.
  2. Set the Text Size property to a value between 0.0 and 100.0, inclusive. The default text size for the subtitle is 4.0. For more information, refer to "Specifying Sizes for Graph Text."

Adding a Legend to a Graph

A legend is an optional element of a graph widget. If present, it serves as a key to the data displayed on the graph:

How to Add a Legend to the Graph Widget

  1. . Select the graph widget. Under Graph, expand the Legend heading and set the Placement property to one of the following:
  2. (Optional) Enter a title in the Title property.
  3. Set the Text Size property to a value between 0.0 and 100.0, inclusive. The default text size for the legend is 2.0. For more information on specifying text size, refer to "Specifying Sizes for Graph Text."
  4. Set the Border Width property to a value between 0 and 100, inclusive. The default is 0, indicating no border. A border of width 1 is a thin line; higher values represent a wider border. The absolute width of the border scales up and down with the size of the widget.
  5. Enter the text to identify each data series or pie segment in the legend:

How to Specify the Legend Placement by Location

If you set the legend's Placement property to Location, you can place the legend in one of nine preset locations in the graph widget, either within or outside of the data area.

  1. Select the graph widget. Under Graph, expand the Legend heading and set the Placement property to Location. Additional properties appear as subproperties of Placement.

    By default, when Location is specified, the legend is centered vertically on the right side of the graph widget, outside of the data space.

  2. Set the In Data Space property to indicate whether or not the legend should appear within the data space:
  3. Set the X Location and Y Location properties:

How to Specify the Legend Placement by Position

If you set the legend's Placement property to Position, you determine its location precisely by specifying X and Y coordinates and by indicating which part of the legend is anchored to those coordinates.

  1. Select the graph widget. Under Graph, expand the Legend heading and set the Placement property to Position. Additional properties appear as subproperties of Placement.
  2. Set the X Position and Y Position properties to the desired coordinates for the legend. Values for these properties must be integers between 0.0 and 100.0, inclusive.
  3. Set the X Anchor and Y Anchor properties to indicate what point in the legend should be anchored to the X Position and Y Position coordinates you have set.

Specifying Text Size for Graph Labels

How to Specify Text Size for Graph Labels

  1. Select the graph widget.
  2. Under Graph, set the Text Size property to the desired size for all labels on the graph.

    Note: The value must be a number between 0.0 and 100.0, inclusive, representing a percentage of the widget size. The default is 2.0.

This text size setting applies to:

The font and style of the text are determined by the settings of the properties under the Font heading.

Orienting the Graph Vertically or Horizontally

Bar/line graphs, XY-plots, and high/low charts can be oriented either vertically or horizontally. By default, they are oriented vertically.

When the graph is oriented vertically, the X axis runs horizontally and the Y axes run vertically. When the graph is oriented horizontally, the X axis runs vertically and the Y axes run horizontally.

Figure 13-4 Graphs can be oriented vertically (default) or horizontally (right)

How to Specify the Graph Orientation

  1. Select the graph widget.
  2. Under Graph, set the Orientation property to the desired orientation:

Describing the X and Y Axes of a Graph

Bar/line graphs, XY-plots, and high/low charts have one X axis and one or two Y axes (Y1 and Y2). The X axis is described by the properties under the X Axis and X Tick Marks subheadings of the Graph heading; the Y1 and Y2 axes are described by the properties under the Y1 and Y2 Axis and Tick Marks subheadings, respectively.

The Y1 Axis and Tick Mark headings are present whether or not data is plotted against this axis. Headings for the Y2 axis are displayed if at least one data series is plotted against it. (Refer to "How to Specify the Y Axis for a Data Series" for information.)

The text size for axis labels and tick marks is determined by the setting of the Text Size property under the Graph heading. For information on setting text size, refer to "Specifying Sizes for Graph Text."

How to Specify the Axis Locations

In a Bar/line Graph, XY-Plot, or High/Low Chart, Panther allows you to specify where the axes are positioned on the graph.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Axis heading and set the Location property to one of the following values:

The axis locations defined by each of these settings depends on the orientation selected for the graph. Refer to "Orienting the Graph Vertically or Horizontally" for an explanation of graph orientation.

Table 13-2 shows where each Location setting places the axes when the graph orientation is set to Vertical. Table 13-3 shows where each Location setting places the axes when the graph orientation is set to Horizontal.

Table 13-2 X and Y axes locations in vertical orientation

Location property setting

Edge Opposite Edge Zero None

X Axis

along bottom of data space

along top of data space

aligned to zero-point of Y1 axis (default)

not displayed

Y1 Axis

along left side of data space (default)

along right side of data space

aligned to zero-point of X axis

not displayed

Y2 Axis

along right side of data space (default)

along left side of data space

aligned to zero-point of X axis

not displayed

Table 13-3 X and Y axes locations in horizontal orientation

Location property setting

Edge Opposite Edge Zero None

X Axis

along left side of data space

along right of data space

aligned to zero-point of Y1 axis (default)

not displayed

Y1 Axis

along bottom of data space (default)

along top of data space

aligned to zero-point of X axis

not displayed

Y2 Axis

along top of data space (default)

along bottom of data space

aligned to zero-point of X axis

not displayed

How to Place Labels on the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart, Panther allows you to specify text labels for the axes in the graph widget.

  1. Select the graph widget. Under Graph, expand the applicable Axis heading and enter identifying text for the corresponding axis into the Label property.
  2. Set the Label Location to one of the following:

Placing Tick Marks on the Axes

By default, Panther determines appropriate minimum and maximum values and tick mark increments based on the data to be plotted. You can specify the following tick mark characteristics for each axis:

How to Specify Minimum and Maximum Values for the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget.
  2. Under Graph, expand the applicable Axis heading and enter the desired minimum and maximum values for the axis in the Minimum and Maximum properties, respectively.

By default, Panther determines appropriate minimum and maximum values for each axis based on the data to be plotted.

How to Specify the Type of Scale on the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget.
  2. Under Graph, expand the applicable Axis heading and set the Scale property to one of the following:

How to Specify Tick Mark Increments on the X/Y Axes

By default in a Bar/line Graph, XY-Plot, or High/Low Chart, Panther determines appropriate increments for the major tick marks on each axis, based on the data to be plotted. You can specify different values if desired, as well as place minor tick marks on the axes, at increments of your choosing.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Tick Marks heading and enter the desired increment between major (larger) tick marks in the Major Increment property.

    Note: The increment must be a positive value. The default is a value determined by Panther based on the data plotted against this axis.

  3. Enter the desired increment between minor (smaller) tick marks in the Minor Increment property.

    Note: The increment must be a positive value. The default is no minor tick marks.

How to Specify Tick Mark Style on the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget
  2. Under Graph, expand the applicable Tick Marks heading and set the Style property to one of the following:

How to Specify Tick Mark Width on the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget.
  2. Under Graph, expand the applicable Tick Marks heading and set the Width property to a value between 1 and 100, inclusive.

    Note: The default tick mark width is 1. Higher values represent broader tick marks. The absolute width scales up and down with the size of the widget.

How to Label the Tick Marks on the X/Y Axes

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget.
  2. Under Graph, expand the applicable Tick Marks heading and set the Label Source property to either:

    Note: The Labels set in the Label Source property are only placed on major (larger) tick marks. Minor (smaller) tick marks are not labelled.

How to Show Tick Marks as Grid Lines

Note: If desired, you can expand the tick marks on any or all axes into grid lines.

In a Bar/line Graph, XY-Plot, or High/Low Chart:

  1. Select the graph widget.
  2. Under Graph, expand the applicable Tick Marks heading and set the Grid Style property to one of the following:

Creating a 3-Dimensional Effect

How to Display a Graph in 3D

  1. Select the graph widget. Under Graph, set the 3D property to Yes. Several new properties appear as subproperties of 3D. Refer to Table 13-4 for a listing of these properties.
  2. Set the 3D subproperties to specify the desired perspective for displaying the graph.

    Table 13-4 3D properties for graph widgets

    Property* Applicable Chart Types Description

    Horiz Rotation

    Bar
    XY-Plot
    High/Low

    Horizontal rotation (about the vertical axis). Value must be a number of degrees between 0 and 90, inclusive. Default is approximately 20 degrees.

    Vert Rotation

    all

    Vertical rotation (about the horizontal axis). Value must be a number of degrees between 0 and 90, inclusive. Default is 20 degrees for bar/line graphs, XY-plots, and high/low plots and 30 degrees for pie charts.

    At 0 degrees, the viewer is looking straight into the graph, as if it were simply shown in two dimensions. At 90 degrees, the viewer is looking directly at the top (for bar/line graphs, XY-plots, and high/low plots) or lower edge (for pie charts) of the graph.

    Depth

    all

    Depth of each object in the graph. Value must be a number between 0.0 and 100.0, inclusive representing a percentage of the widget size. Default depth is 10.0 percent.

    *All properties in this table are subproperties of 3D, under the Graph heading.

For more information on how the 3D property settings affect the appearance of a particular chart type, refer to the following:

Defining the Data Series

A data series represents not only the source for one set of data values, but also the plot style, Y axis specification, and labelling information for the data in the series.

For all chart types, there is at least one "Data Series" subheading of the Graph properties heading; under each data series, the data or its source is specified in one or more "Value Source" properties. Table 13-5 shows the names of these headings and properties for each chart type, along with the number of data sources permitted for each.

Table 13-5 Data source properties for graph widgets

Chart type Data series heading Value source property Number of data sets permitted

Pie

Data Series

Value Source

One data series with a single value source.

Bar

Data Series #n

Value Source

Up to 12 data series, each with a single value source.

XY-Plot

Data Series #n

X Value Source

Y Value Source

Up to 12 data series, each with two value sources: X and Y.

High/ Low

High Data Series Low Data Series Close Data Series Open Data Series Data Series #n

Value Source

Up to 12 data series, each with a single value source. The first four are plotted as high, low, close, and open data, respectively; any additional data series are treated as if plotted on a bar/line graph.

When you first expand the Data Series heading, only the Value Source property appears. Once you specify the value source, additional properties are displayed. The specific properties you can set for a data series depend on the chart type.

In the Properties window, one additional data series heading is always provided beyond the last one that contains a value source (up to the maximum number of data series permitted for the specified chart type). Thus, there is always a place to add the next data set. For example, if three data series have been entered for a bar/line graph, the heading Data Series #4 is also present in the Properties window.

How to Specify Data Values

The method for specifying the data value source is the same for all chart types. The names of the properties differ, however, and the number of sources permitted depends on the type.

Data supplied in the value sources must be numeric. If the values have a numeric format that includes non-numeric characters such as a currency symbol, these are stripped out. In pie charts and bar/line graphs, where the value can be displayed with the plot, only the numeric portion appears.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series heading and set the Value Source property to either:

How to Specify the Plot Style for a Data Series

For each data series in a bar/line graph or XY-plot and for data series 5 and up in a high/low chart, you can specify the format for displaying the data. You can use different formats within the same graph.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series heading and set the Style property.

    If the Style property is not displayed, be sure to set the Value Source property first.

    Note: If the chart type is Bar (all data series) or High/Low (data series 5 and above), the style must be one of:

If the chart type is XY-Plot, the style must be one of:

How to Specify the Line Style for a Data Series

  1. Select the graph widget. Under Graph, expand the applicable Data Series subheading and set the Style property to Line, Curve, or Trend. Line Style is displayed as a subproperty of Style.
  2. Set Line Style to one of: Solid (default), Dashed, Dotted, Long Dash, Dash Dot, or None.

How to Specify the Line Width for a Data Series

  1. Select the graph widget. Under Graph, expand the applicable Data Series subheading and set the Style property to Line, Curve, or Trend. Line Width is displayed as a subproperty of Style.
  2. Set Line Width to a value between 1 and 100, inclusive. The default line width is 1. The higher the value, the broader the line.

How to Specify the Point Marker Format for a Data Series

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series subheading, and set the Point Marker property to the desired format.

    Note: If the Point Marker property is not displayed, be sure to set the Value Source property first.

    The point marker format for the data series can be any one of: None (default), Dot, +, *, O, X, Square, Diamond, Triangle, Circle, Filled Square, Filled Diamond, Filled Triangle, or Filled Circle.

    Point markers are displayed if the Style property for the data series is Line, Curve, Point, or Trend.

How to Specify the Y Axis for a Data Series

If the chart type is Bar, XY-Plot, or High/Low, you can specify the Y axis (Y1 or Y2) against which the data in this series is to be plotted.

By default, the Y1 axis appears on the left and the Y2 axis on the right when the graph is oriented vertically. When the graph is oriented horizontally, the Y1 axis runs along the bottom and the Y2 axis along the top. For more information on positioning the Y axes, refer to "How to Specify the Axis Locations."

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series subheading and set the Y Axis property to the desired axis (Y1 or Y2) for this data set.

    Note: If the Y Axis property is not displayed, be sure to set the Value Source property first.

How to Specify the Color for a Data Series

If the chart type is Bar, XY-Plot, or High/Low, you can specify a Panther basic color for each data set's plot. For information on Panther basic colors, refer to "Using Panther Basic Colors."

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series subheading and set the Color property to the desired Panther basic color.

    The data in this series will be plotted in the specified color.

    Note: If the Color property is not displayed, be sure to set the Value Source property first.

By default, each data series is plotted in a different color: data series #1 in black, #2 in blue, #3 in green, #4 in cyan, and so forth, through the list of Panther basic colors.

How to Enter Legend Text for a Data Series

If the chart type is Bar, XY-Plot, or High/Low, you can supply a text string for each data series to identify it in the legend for the graph.

If you do not enter legend text for the series, it will not be listed in the graph's legend. If the graph does not have a legend, any legend text entered here is ignored; it is retained, however, and is used if a legend is later added to the graph.

For information on creating and displaying a legend in a graph widget, refer to "Adding a Legend to a Graph."

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series subheading and enter identifying text for the data set into the Legend property.

    The text you enter in this property is used to identify the data series in the legend for the graph.

    Note: If the Legend property is not displayed, be sure to set the Value Source property first.

Converting Data between Chart Types

If you change the chart type (either while in the editor or at runtime) of the widget after data value sources have been specified, Panther retains the information, even if it is not all applicable to the new chart type.

For example, if a bar graph with three data series is changed to a pie chart, only the first data series is used. If this widget is later changed to a high/low plot, all three data series are used; they become the High, Low, and Close Data Series, respectively. If converted back to a bar chart or line graph, the values once again become Data Series #1, 2, and 3.

When an XY-plot is converted to another chart type, the Y value source becomes the value source for the corresponding data series. The X value source is ignored, but it remains intact and is again used if the graph is later converted back to an XY-plot.

When any other chart type is converted to an XY-plot, the value source from the original chart becomes the Y value source on the XY-plot.


Pie Charts

A pie chart expresses values from a single data source as proportional segments of a circle. Graph properties for a pie chart allow you to customize its format and to specify the data source.

Figure 13-8 Pie chart drawn in 3D. Value Location property is set to In; Percent Location is Out; Label Location is Out.

How to Create a Pie Chart

The following steps summarize the process for creating a pie chart:

  1. Create a graph widget. Refer to "How to Create a Graph Widget" for detailed instructions.
  2. Under Graph, set the Chart Type property to Pie.
  3. (Optional) Add a title and subtitle to the graph. Refer to "Adding a Title to a Graph" for instructions.
  4. Set the 3D property (for the graph widget, not the screen) to one of the following: Yes or No (default). Refer to "How to Display a Pie Chart in 3D"for detailed instructions.
  5. Provide data for the pie chart. Refer to "How to Specify the Data Source for a Pie Chart" for instructions.
  6. Set properties under the Pie heading to specify the pie chart layout. Refer to "Describing the Chart Layout" for instructions.
  7. Set properties under the Pie Segments heading to specify the format and labelling of pie segments. Refer to "Describing Segment Characteristics" for instructions.
  8. (Optional) Add a legend to the chart. Refer to "Adding a Legend to a Graph" for instructions.

How to Display a Pie Chart in 3D

By default, a pie chart is displayed in two dimensions, as a flat circle. You can, however, specify that you want the chart to appear in three dimensions.

  1. Select the graph widget. Under Graph, set the 3D property to Yes. Two additional properties, Vert Rotation and Depth, are displayed.
  2. Set the Vert Rotation property to the desired rotation about the horizontal axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the pie chart, as if it were simply shown in two dimensions. As the degree of rotation increases, the top of the chart rotates away from the viewer so that at 90 degrees, the chart appears to be lying on a horizontal plane, and only the lower edge is visible.

    The default value for Vert Rotation is 30 degrees.

  3. Set the Depth property to the desired depth for the chart, expressed as a proportion of the overall size of the widget. This value must be a number between 0.0 and 100.0, inclusive. The default depth is 10.0 percent.

How to Specify the Data Source for a Pie Chart

Data for the pie chart must come from a single source, which can be either an array on any screen in the application or constant data entered directly into the Properties window.

  1. Select the graph widget.
  2. Under Graph, expand the Data Series heading and set the Value Source property to either the name of an array containing the data or to a list of data values.

For detailed information on formatting the value source array name or value list, refer to "How to Specify Data Values."

Describing the Chart Layout

By default, a pie chart is centered in the widget and has a diameter 30% of the widget size. The segment order is counterclockwise, beginning on the right. You can change the pie chart layout via the properties under the Pie subheading.

How to Specify the Size of the Pie Chart

  1. Select the graph widget.
  2. Under Graph, expand the Pie heading and set the Diameter property to the desired diameter of the pie chart, expressed as a percentage of the overall size of the graph widget.

    Note: This value must be a number between 0.0 and 200.0, inclusive.

At 100.0, the edge of the pie chart just touches the boundary of the widget. At 200.0, the edges of the chart are not visible. The default diameter is 30.0 percent.

How to Specify the Position of the Pie Chart

  1. Select the graph widget.
  2. Under Graph, expand the Pie heading and set the X Position and Y Position properties to the desired coordinates for the center of the pie chart.

    Note: Values for these properties must be values between 0.0 and 100.0, inclusive.

The default position for a pie chart is centered (X Position and Y Position both set to 50).

How to Specify Segment Order and Position

  1. Select the graph widget.
  2. Under Graph, set the following Pie properties:

Describing Segment Characteristics

Panther provides a variety of ways you can identify the segments in a pie chart. Any or all of the following can be displayed:

You can also control the appearance of each individual segment: normal, exploded, or hidden.

How to Identify the Segments of a Pie Chart

  1. Select the graph widget. Under Graph, expand the Pie Segments heading.
  2. In the Value Location property, specify where you want the numeric value of the segments to appear. (These are the values specified Under Data Series, in the Value Source property.) Value Location must be one of the following:
  3. In the Percent Location property, specify where you want the segment percentages to appear. Percent Location must be one of the following:
  4. In the Label Source property, indicate where the segment label text is stored. The Label Source can be either:
  5. Set the Label Location property to indicate where you want the labels to appear. Label Location must be one of the following:
  6. Under Graph, set the Text Size property to the desired size for the text that appears in or beside the pie chart segments. The value must be a number between 0.0 and 100.0, inclusive, representing a proportion of the widget size. The default is 2.0.

    Note: If the Label Location property under Pie Segments is set to Legend, the labels are displayed in the text size set for the legend.

How to Specify the Style for Each Pie Chart Segment

  1. Select the graph widget.
  2. Under Graph, expand the Pie Segments heading and set the Style Source property to either:

Bar/Line Graphs

A bar/line graph allows you to display data from up to 12 sources in a variety of bar and line formats. Graph properties for a bar/line graph allow you to customize its format and to specify the data value sources.

How to Create a Bar/Line Graph

The following steps summarize the process for creating a bar/line graph:

  1. Create a graph widget. Refer to "How to Create a Graph Widget" for detailed instructions.
  2. Under Graph, set the Chart Type property to Bar. An additional property, Bar Type, is displayed.
  3. Set the Bar Type property to one of the following: Absolute (default), Stack, Step, 100, Overlap. Refer to "How to Format the Bar Type" for an explanation of bar graph formats.
  4. (Optional) Add a title and subtitle to the graph. Refer to "Adding a Title to a Graph" for instructions.
  5. (Optional) Add a legend to the graph. Refer to "Adding a Legend to a Graph" for instructions.
  6. Set the Orientation property to one of the following: Vertical (default) or Horizontal.
  7. Describe the X and Y axes. Refer to "Describing the X and Y Axes of a Graph" for detailed instructions on describing and labelling axes and tick marks.
  8. Set the 3D property (for the graph widget, not the screen) to one of the following: Yes or No (default). Refer to "How to Display a Bar/Line Graph in 3D" for detailed instructions.
  9. Under each Data Series heading, set the Value Source property. Refer to "How to Specify Value Sources for a Bar/Line Graph" for detailed instructions.

    Once you have set the Value Source property, you can specify additional characteristics of the data series:

How to Format the Bar Type

Use the Bar Type property, under Graph, to define how each slice through the data is formatted.

A slice is the nth value of each data series in the widget, all of which are plotted at the nth tick mark on the X axis. For example, the third value in each data series is plotted at the third tick mark.

Values in a slice can be formatted in a variety of ways, such as side-by-side, stacked (as if they were added together), or overlapped.

How to Specify the Bar Type of a Bar/Line Graph

  1. Select the graph widget. Under Graph, set the Chart Type property to Bar. An additional property, Bar Type, is displayed.
  2. Set the Bar Type property to one of the following:

How to Display a Bar/Line Graph in 3D

By default, a bar/line graph is displayed in two dimensions, as a flat plot. You can, however, specify that you want the graph to appear in three dimensions.

  1. Select the graph widget. Under Graph, set the 3D property to Yes. Three additional properties, Horiz Rotation, Vert Rotation, and Depth are displayed.
  2. Set the Horiz Rotation property to the desired rotation about the vertical axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the right side rotates toward the viewer so that at 90 degrees, the viewer is looking directly into the right side of the graph. At this setting, bars are visible only if they are taller than any of the bars that are "closer" to the viewer.

    The default value for Horiz Rotation of a bar/line graph is a special value that approximates a 20 degree view angle, but the horizontal axis remains parallel to the bottom edge of the widget. At any other setting, the horizontal axis is angled to match the three-dimensional perspective. To return to the default setting if you have previously entered a number into this property, simply enter a blank space.

  3. Set the Vert Rotation property to the desired rotation about the horizontal axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the top of the chart rotates toward the viewer so that at 90 degrees, the graph appears to be lying on a horizontal plane, with only the top edge visible.

    The default value for Vert Rotation of a bar/line graph is 20 degrees.

  4. Set the Depth property to the desired depth for the graph, expressed as a proportion of the overall size of the widget. This value must be a number between 0.0 and 100.0, inclusive. The default depth is 10.0 percent.

    Figure 13-11 Bar/line graph with Bar Type property set to Absolute; 3D set to Yes; tick mark Grid Style for both X and Y1 axes set to Dashed.

How to Specify Value Sources for a Bar/Line Graph

Each data series in a bar/line graph takes a single value source. The first value in each data series is plotted at the first tick mark on the X axis, the second at the second tick mark, and so forth.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series heading and set the Value Source property to either the name of an array containing the data or to a list of data values.

For detailed information on formatting the value source array name or value list, refer to "How to Specify Data Values."

Once you have specified the value source for a data series, additional properties are displayed.

How to Display the Values for a Data Series

For each data series on a bar/line graph, you can specify whether or not to display the value of each point or bar.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series heading, and set the Value Location property to one of the following:

XY-Plots

An XY-plot allows you to display data from up to 12 X and Y data source pairs. Graph properties for an XY-plot allow you to customize its format and to specify the data sources.

How to Create an XY-Plot

The following steps summarize the process for creating an XY-plot:

  1. Create a graph widget. Refer to "How to Create a Graph Widget" for detailed instructions.
  2. Under Graph, set the Chart Type property to XY-Plot.
  3. (Optional) Add a title and subtitle to the graph. Refer to "Adding a Title to a Graph" for instructions.
  4. (Optional) Add a legend to the graph. Refer to "Adding a Legend to a Graph" for instructions.
  5. Set the Orientation property to one of the following: Vertical (default) or Horizontal.
  6. Describe the X and Y axes. Refer to"Describing the X and Y Axes of a Graph" for detailed instructions.
  7. Set the 3D property (for the graph widget, not the screen) to one of the following: Yes or No (default). Refer to "How to Display an XY-Plot in 3D" for detailed instructions.
  8. Under each Data Series heading, set the Y Value Source property. Refer to "How to Specify the X and Y Value Sources" for detailed instructions.

    Once you have set the Y Value Source property, you can specify additional characteristics of the data series:

How to Display an XY-Plot in 3D

By default, an XY-plot is displayed in two dimensions, as a flat plot. You can, however, specify that you want it to appear in three dimensions.

When an XY-plot is displayed in 3D, only the axes acquire depth; the plot lines do not. All elements, plot lines as well as axes, however, are rotated together so that the lines appear in the correct position relative to the axes.

  1. Select the graph widget. Under Graph, set the 3D property to Yes. Three additional properties, Horiz Rotation, Vert Rotation, and Depth are displayed.
  2. Set the Horiz Rotation property to the desired rotation about the vertical axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the right side rotates toward the viewer so that at 90 degrees, the viewer is looking directly into the right side of the graph. At this setting, bars are visible only if they are taller than any of the bars that are "closer" to the viewer.

    The default value for Horiz Rotation of an XY-plot is a special value that approximates a 20 degree view angle, but the horizontal axis remains parallel to the bottom edge of the widget. At any other setting, the horizontal axis is angled to match the three-dimensional perspective. To return to the default setting if you have previously entered a number into this property, simply enter a blank space.

  3. Set the Vert Rotation property to the desired rotation about the horizontal axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the top of the chart rotates toward the viewer so that at 90 degrees, the graph appears to be lying on a horizontal plane, with only the top edge visible.

    The default value for Vert Rotation of an XY-plot is 20 degrees.

  4. Set the Depth property to the desired depth for the axes, expressed as a proportion of the overall size of the widget. This value must be a number between 0.0 and 100.0, inclusive. The default depth is 10.0 percent.

    On an XY-plot, only the axes acquire depth; the plotted lines do not.

How to Specify the X and Y Value Sources

Each point on an XY-plot is identified by two coordinates—the X value and the Y value. Thus, each data series in an XY-plot has two value sources. The first entry in the Y value source is plotted against the first entry in the X value source, the second Y value against the second X value, and so forth, until all value pairs have been exhausted. Only value pairs are plotted; excess X or Y values are ignored.

  1. Select the graph widget. Under Graph, expand the applicable Data Series heading and set the Y Value Source property to either the name of an array containing the data or to a list of data values.

    For detailed information on formatting the value source array name or value list, refer to "How to Specify Data Values."

    After you have entered the Y Value Source, additional properties for the data series are displayed.

  2. Set the X Value Source property to either the name of an array containing the data or to a list of data values.

    Alternatively, you can omit the X Value Source.

    If no X Value Source is given for a data series, Panther plots the Y values against the X values for the previous data series. If the first data series in an XY-plot has no X values, Panther assumes integer X values of 1, 2, 3, etc.


High/Low Charts

In a high/low chart, the first four data series are labelled High, Low, Close, and Open. Corresponding values from these data series are plotted together on a single marker that resembles an I-beam. This type of chart is typically used to track the values of stocks, bonds, or commodities.

High/low charts can also accommodate up to eight additional data series, which are labelled numerically, beginning with Data Series #5, and are formatted in the same manner as data on a bar/line graph.

Graph properties for a high/low chart allow you to customize it and specify the data sources.

Figure 13-12 A high/low chart. One related data series is also plotted on this graph; its Style property, under the Data Series #5 heading, is set to Line. The Y1 axis Scale property is set to Common Log, and the Y1 axis Label Location is Along Side. The legend is located in the data space.

How to Create a High/Low Chart

The following steps summarize the process for creating a high/low chart:

  1. Create a graph widget. Refer to "How to Create a Graph Widget" for detailed instructions.
  2. Under Graph, set the Chart Type property to High/Low.
  3. (Optional) Add a title and subtitle to the graph. Refer to "Adding a Title to a Graph" for instructions.
  4. (Optional) Add a legend to the graph. Refer to "Adding a Legend to a Graph" for instructions.
  5. Set the Orientation property to one of the following: Vertical (default) or Horizontal.
  6. Describe the X and Y axes. Refer to "Describing the X and Y Axes of a Graph" for detailed instructions on describing and labelling axes and tick marks.
  7. Set the 3D property (for the graph widget, not the screen) to one of the following: Yes or No (default). Refer to "How to Display a High/Low Chart in 3D"for detailed instructions.
  8. Under each Data Series heading, set the Value Source property. Refer to "How to Specify Value Sources for a High/Low Chart" for detailed instructions.

    Once you have set the Value Source property, you can specify additional characteristics for the data series. For the high, low, close, and open data series, you can specify the following:

How to Display a High/Low Chart in 3D

By default, a high/low chart is displayed in two dimensions, as a flat plot. You can, however, specify that you want it to appear in three dimensions.

When a high/low chart is displayed in 3D, the high/low bars do not acquire depth. The axes, as well as the bars, lines, and/or areas from additional data series, however, do take on a three-dimensional appearance.

  1. Select the graph widget. Under Graph, set the 3D property to Yes. Three additional properties, Horiz Rotation, Vert Rotation, and Depth are displayed.
  2. Set the Horiz Rotation property to the desired rotation about the vertical axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the right side rotates toward the viewer so that at 90 degrees, the viewer is looking directly into the right side of the graph. At this setting, bars are visible only if they are taller than any of the bars that are "closer" to the viewer.

    The default value for Horiz Rotation of a high/low chart is a special value that approximates a 20 degree view angle, but the horizontal axis remains parallel to the bottom edge of the widget. At any other setting, the horizontal axis is angled to match the three-dimensional perspective. To return to the default setting if you have previously entered a number into this property, simply enter a blank space.

  3. Set the Vert Rotation property to the desired rotation about the horizontal axis. This value must be a number of degrees between 0 and 90, inclusive.

    At 0 degrees, the viewer is looking straight into the graph. As the degree of rotation increases, the top of the chart rotates toward the viewer so that at 90 degrees, the graph appears to be lying on a horizontal plane, with only the top edge visible.

    The default value for Vert Rotation of a bar/line graph is 20 degrees.

  4. Set the Depth property to the desired depth for the graph, expressed as a proportion of the overall size of the widget. This value must be a number between 0.0 and 100.0, inclusive. The default depth is 10.0 percent.

    The high/low bars do not acquire depth, but all other plot elements, including the axes, do.

How to Specify Value Sources for a High/Low Chart

Each data series in a high/low chart takes a single value source. The first value in each data series is plotted at the first tick mark on the X axis, the second at the second tick mark, and so forth. Corresponding points from the High, Low, Close, and Open data series are plotted together on a single marker. Values from additional data series are formatted as if they were on a bar/line graph.

  1. Select the graph widget.
  2. Under Graph, expand the applicable Data Series heading and set the Value Source property to either the name of an array containing the data or to a list of data values.

For detailed information on formatting the value source array name or value list, refer to "How to Specify Data Values."