# Creating Panel Controls

Chart Control |

The Chart control tool is used to create more advanced two- and three-dimensional Chart illustrations in your graphical application. When defining a Chart, you can select from several different Chart types: Area, Bar, Column, Line, Pie, Ribbon, Scatter, Stack, Donut and Gauge. For examples of each of these Chart types, see Chart Formats.

#### Note:
Use the Image tool to insert images created outside of NOMADS and PxPlus. For more simplistic drawings, use the Shape control tool.

To learn about using Plus Charts, RGraphCharts, and Google Interactive Charts (using the Google Visualization API) as options to replace the internal PxPlus Chart control, see Charting Alternatives in PxPlus.

For information on how you can define simple Charts based on the columns of a List Box, Grid or Query, see NOMADS AutoChart.

To learn how you can use a Query-based AutoChart definition to load a Smart Chart control, see Defining Smart Controls.

To learn about creating images of Charts for display on dashboards, on your website, or as part of your application, see Chart Images Generation.

For information on the utilities to use when working with Chart images, see Chart Image Utilities.

## Drawing a Chart

To draw a Chart object on your panel, select the Chart control tool from the Controls Toolbar. Hold down the left mouse button and drag the mouse to create a rectangle to the desired size. Release the mouse button to create the new object.

For making other adjustments, see Modifying Objects.

To define the specific attributes for the new control, see Chart Properties and Defining a Chart.

## Chart Properties

When creating or editing a Chart control, the Chart Properties dialogue (pictured below using the Folder Style version of the NOMADS Panel Designer) is displayed:

This dialogue is divided into the following tabbed panels for viewing and/or changing Chart properties: Display, Font/Color, Attributes, Logic and User Aids.

Name | Unique name of the Chart object (NOMADS provides a default). Naming conventions for variables apply. Click the Browse Library button to copy parameters from an existing object (via the Library Browse dialogue). #### Note: When a new control name is entered, it will be checked against the Reserved Words list to determine if it is restricted for use as a NOMADS control name. If it is found, a warning message will display. (User Reserved Words Maintenance was added in PxPlus 2020.)
Smart Load | Select this button to set up a Smart control that will self-load based on a query definition. See Smart Controls. (The Smart Load button was added in PxPlus 2019.)
Display
Properties |
Chart Type | Determines the type of Chart to be created. Click the drop-down arrow for a list of selections: Area, Bar, Column, Line, Pie, Ribbon, Scatter, Stack, Donut and Gauge.
3D Effect | Visual mode for Chart.
Chart Brand | Select the brand of Chart to display (see Charting Alternatives in PxPlus):
Default | Chart brand specified in %NOMADS'Chart$. If %NOMADS'Chart$ is not set, the default will be "plus" charts. See Plus Charts. (Support to default to Plus Charts when %NOMADS'Chart$ is not set was added in PxPlus 2024 Update 1.)
Plus | Image-based (NOMADS) or HTML-base (iNomads) Charts from PVX Plus
RGraph | HTML-based Charts from RGraph
Google | Uses the Google Visualization API (requires Internet access)
Native | Internal PVX Plus Chart control
Title 1 | Primary Chart title (Fixed value, string Expression or Message Library Reference).
Title 2 | Secondary Chart title (Fixed value, string Expression or Message Library Reference).
Footer | Footer title for the Chart (Fixed value, string Expression or Message Library Reference).
Bitmap Path | Bitmap for the Chart background (Fixed value or string Expression). Specify embedded (e.g. !Stop) or external file (e.g. C:\windows\clouds.bmp). For available images, see Recognized File Types.
(The Chart Brand option was added in PxPlus 2019.)
Position |
Column | Starting column for top left corner of the control - numeric expression. Format mask is #0.00. Valid entries are 0 to 620.
Line | Starting line for top left corner of the control - numeric expression. Format mask is #0.00. Valid entries are 0 to 255.
(Support for increased Column and Line maximums was added in PxPlus 2021.)
Size |
Width | Width of control in number of columns - numeric expression. Format mask is #0.00. Valid entries are 0 to 620.
Height | Height of control in number of lines - numeric expression. Format mask is #0.00. Valid entries are 0 to 255.
(Support for increased Width and Height maximums was added in PxPlus 2021.)
Attributes |
Initially Hidden | Control is not displayed but is accessible programmatically.
Initially Disabled | Control region is grayed out and is not accessible to the user for input. The control is accessible programmatically.
Borderless | Control is drawn with no border or frame.
Bitmap Position | Controls the position and appearance of the bitmap. Select from pre-set selections or enter coordinates (syntax: X:Y:columns:lines); e.g. 1:2:10:20.
Column Separator | Delimiter character. Click the drop-down arrow for a list of selections.
User Tag Field | For controls, data/tag field that can be used to pass information on such things as formatting, error messages or validation rules. Field contents are placed in a variable using the control name with a .TAG$ extension.
Font/Color
Font Specification |
Font Size | Click the drop-down arrow for a list of selections.
Color |
For each of the following Color options, click the Query button to access Color Selections. Valid formats for color selections include predefined system colors (e.g. Light Red), Custom (RGB codes), HTML Hex Color Codes, User Defined colors (e.g. Color17) and string Expressions. (The Color Selections Query button and dialog were added in PxPlus 2020.)
Foreground | Click the Query button to access color selections.
Background | Click the Query button to access color selections.
Back Face | Affects the appearance of the Chart's back face surface. Click the Query button to access color selections.
Bottom Face | Affects the appearance of the Chart's bottom face surface. Click the Query button to access color selections.
Left Face | Affects the appearance of the Chart's left face surface. Click the Query button to access color selections.
#### Note: The Chart Colors property in Themes Maintenance and Visual Classes Maintenance can be used to select the colors to apply when plotting the different data sets of a Chart. (The Chart Colors property in Themes Maintenance and Visual Classes Maintenance was added in PxPlus 2020.)
Attributes | Optional attributes (Bold, Italics, etc.).
Visual Class | Assign a visual class to the control. Click the Visual Class Maintenance button to launch the Visual Classes Maintenance utility for creating or editing visual classes. To assign visual classes to controls at the library level, see Visual Class Assignment. #### Note: Visual class names that begin with an "*" (asterisk) are pre-defined visual classes used by PVX Plus and may be subject to change without notice. (The Visual Class Maintenance button was added in PxPlus 2019.)
iNomads Class | Assign an iNomads class to the control. The iNomads class contains class attribute references used when defining the control in the HTML code generated in iNomads. An iNomads class reference must start with an alpha character (A-Z or a-z), followed by any combination of A-Z, a-z, 0-9, underscore or dash. Multiple references may be entered, separated by a space. For a list of pre-defined iNomads classes, see iNomads Classes. (The iNomads Class property was added to Charts in PxPlus 2019.)
Attributes
Margins |
Left | Number of columns offset from the left border of the Chart window. Valid format can be a Fixed value (number between 0 - 127) or a numeric Expression.
Right | Number of columns offset from the right border of the Chart window. Valid format can be a Fixed value (number between 0 - 255) or a numeric Expression.
Top | Number of lines offset from the top border of the Chart window. Valid format can be a Fixed value (number between 0 - 127) or a numeric Expression.
Bottom | Number of lines offset from the bottom border of the Chart window. Valid format can be a Fixed value (number between 0 - 255) or a numeric Expression.
Proportions |
Depth/Width | Sets percentage of Chart depth to width for altering proportions of three-dimensional Charts. Valid formats can be a Fixed value (number between 0 - 99999) or a numeric Expression.
Height/Width | Sets percentage of Chart height to width for altering proportions of two-dimensional Charts. Valid formats can be a Fixed value (number between 0 - 99999) or a numeric Expression.
To Margins | Sets the Chart to the variable-proportion mode, which means that the Chart should be proportioned to the current height-to-width ratio of the window that contains the Chart.
Range |
Minimum | Minimum Chart value.
Maximum | Maximum Chart value.
Axis Location and Axis Title |
X | Axis location (Back or Bottom). Axis title (Fixed value, string Expression or Message Library Reference).
Y | Axis location (Back or Left). Axis title (Fixed value, string Expression or Message Library Reference).
Z | Axis location (Bottom or Left). Axis title (Fixed value, string Expression or Message Library Reference).
Ignore Change Flag | Select this check box when you do not want the NOMADS CHANGE_FLG variable to be updated when the control value is changed. (The Ignore Change Flag property was added in PxPlus 2017.)
Logic
Default Program | Displays the name of the Default Program used in the Panel Header definition. (The Default Program was added for display in PxPlus 2019.)
Post Create | Logic to be processed after the control is drawn. Click the drop-down arrow for a list of selections. See Events Logic. Click the Program Logic button beside the Perform or Call action to launch the default program editor, which is typically the *IT - Integrated Toolkit. To make Ed+ the default program editor, change the setting for the %NOMADS'Program_Editor property to Ed+. (The ability to set Ed+ as the default program editor was added in PxPlus 2023.)
When Data Set is Selected from Chart | Logic to be executed when focus leaves the control or the state of the control has changed. Click the drop-down arrow for a list of selections. See Events Logic. Click the Program Logic button beside the Perform or Call action to launch the default program editor, which is typically the *IT - Integrated Toolkit. To make Ed+ the default program editor, change the setting for the %NOMADS'Program_Editor property to Ed+. (The ability to set Ed+ as the default program editor was added in PxPlus 2023.)
User Aids
Help Reference | Help text to be invoked at run time by pressing Shift - F1 while focus is on a control.
Type | Select from External or Internal help types:
External | (Default) Standard Windows help system consisting of a help File Name (.html, .hlp, .doc, etc.) and an optional Keyword or Reference number (Fixed value or string Expression).
Internal | Application supplied message text (Fixed value, string Expression or Message Library Reference).
File Name | Name of the help file.
Keyword | Indicates that the text in the adjacent field is the index entry for the topic in the indicated help file.
Reference | Indicates that the adjacent field contains the reference number for a specific topic in the context sensitive help.
Popup | Select this check box to display the help topic as a popup rather than as an independent window.
Test | Tests the current help settings.
Floating Tip | Mouse pointer message for control (Fixed value, string Expression or Message Library Reference). You can customize the floating tip by adding a tip title, descriptive tip text and a hyperlink. These features enhance the visual display and functionality of the tip by providing users with much needed information at their fingertips. You can define either a Standard tip or an HTML tip that provides a simplified HTML Editor for customizing the tip text. To do this, click the button to the right of the Floating Tip multi-line input to invoke the Define Info Tip dialogue. See Defining an Info Tip. #### Note: The Floating Tip drop box and multi-line input cannot be changed once an HTML tip has been defined. NOMADS Wiki Help The floating tip text can be used when displaying the Wiki Help. Info tips, however, are not supported and will be ignored. (Support for customizing Floating Tips was added in PxPlus 2016.) (Support for the use of Floating Tip text in the Wiki Help was added in PxPlus 2023.)
Security | Security restrictions. See Restricting Access for information on Object Security Definition.
Groups | Assign the control to a group. See Group Assignment.
Popup Menu | Associate a floating menu that will appear when you right-click the mouse over a control or a blank area on a panel. Valid formats are a NOMADS popup object or a user-supplied program (Fixed value or string Expression).
Presets | Invokes the Presets dialogue. See Presets Definition.
Notes | Add notes/comments for the control. Maximum 1024 characters. These notes also display in the Wiki Help documentation for the panel. See NOMADS Wiki Help. (The Notes button was added in PxPlus 2023.)

## Defining a Chart

Set the Chart Type and Effect properties to change the shape and dimensional appearance. This information is used in the CHART directive's FMT= option during creation of the object. Since a Chart is a visual aid with limited user interaction, the only logic assignments possible are Post Create and When Data Set is Selected from Chart.

Once created, the Chart can be updated in your program code using CHART LOAD or CHART WRITE directives or by using the control object property 'Value$ to read/write data in the Chart in conjunction with the data set and data point.

## Presets Definition

To aid in the development of Chart applications, the NOMADS toolkit supports preset definition records. These presets allow the designer to build a table of properties that can be assigned to specific data sets and data points. The value set for the Data Set and Data Point correspond to the different Chart elements. Through the presets, the user can change the text color, font, label location, as well as control the auto-scaling mode for a particular Chart label.

The presets are assigned to the Chart after it has been created and prior to the execution of the Post Create logic.

Click the Presets button to invoke the Presets dialogue:

At run time, the following will occur when the above presets are applied to the Chart:

1. Auto-scaling is turned Off for the primary Chart title.
2. The text color for the primary Chart title is set to "RGB:0 128 225".
3. The font for the primary Chart title is set to "Algerian,1,I".
4. The text color for the secondary Chart title is set to "light cyan".
5. The font for the secondary Chart title is set to "Comic Sans MS,1".
6. Auto-scaling is turned Off for the secondary Chart title.

The Presets dialogue allows you to define a maximum of 999 preset records, consisting of data set, data point, property and value.

This dialogue consists of the following:

Data Set | Value to be placed in the 'CurrentSet property (numeric). Valid entries: 0, 1, -1, -2 or -3.
Data Point | Value to be placed in the 'CurrentPoint property (numeric). Valid entries: 0, 1, -1, -2 or -3.
Property | Click the drop-down arrow for a list of CHART control object properties: 'AutoScale, 'Font$, 'LabelLocation$ and 'TextColor$.
Exp | Check box to indicate that the contents of the Value/Expression column is an expression. The default (Off) indicates literal/fixed.
Value/Expression | Value that will be assigned to the property. If the value is not marked as an expression, click the drop-down arrow to access defaults for the selected property (if applicable). The cell type for this column is determined by the selected property.
Delete Row(s) | Deletes preset records.
Move Up Move Down | Changes the order of existing preset records.

## See Also

CHART Properties
CHART Directive
Charting Alternatives in PxPlus
NOMADS AutoChart
Smart Controls
Chart Images Generation
Chart Image Utilities