1. In design mode, create a new Canvas screen or object.
2. Find the chart on the Toolbox pane and drag a desired object to your screen.

3. Use the Settings pane to apply common settings (sizing, grouping, alignment, etc.) to this object (and others) on your screen.

4. Optionally, use the Name property to rename the object if you plan to reference it in another screen or control, or plan to script this control.
5. Configure the Style property:

1. Style —

   The Style property defines the style sheet applied to an object on a screen. A style sheet consists of a predetermined list of properties and property values configured for a particular control type.

   • Click to reveal a drop-down menu of predetermined styles configured for the selected control.
   • Select a desired style and its properties will be applied to the control.
   • Alternately, you can create a new style based on other property values configured for the control.
   • Or you can select <None> to remove subscription to any style.

   Styles are created in two ways:

   • In the control's Properties pane. Click (Add a new style based on this control) next to the Style property, after you have configured property values in the Properties pane. See Add a new style based on a control for more information.
   • In the Canvas Settings in the Backstage view. The default style for any control is configured in the Backstage view. See Manage style sheets in the Backstage view for more information.

   Tip: You can also change a control's Style on the Controls view of the Screen pane.

6. Configure the Location properties. See To configure location, size, resizing, layer, and visibility properties below.
7. Configure the Script property:

1. Include in script —

   The Include in script check box indicates that the control will appear in the objects collection of the screen (if scripting is enabled). To optimize performance, best practice dictates that you only include the controls you need to manipulate via script. Other controls should be excluded. When you add an event to a control, it will be automatically added to script and the Include in script property (and the In Script check box on the Controls view) will be set to True.

   Tip: You can also change the Include in Script setting on the Controls view of the Screen pane.

8. Configure the general Chart properties. See To configure the chart below.
9. Configure the chart Y-axes and chart Series properties.Each chart series is tied to a y-axis. A chart can support multiple y-axes, and each y-axis can support multiple series.
   1. See To configure a chart y-axis below.
   2. See To configure a chart series below.
10. Configure the X-Axis properties. See To configure a chart x-axis below.
11. Configure the Range configuration properties. See To configure live updates and date ranges below.
12. Configure the CygNet connection properties. See To configure the CygNet connection below.
13. Customize the Legend properties to display. See To configure the chart legend below.
14. Configure the Toolbar properties. See To configure the chart toolbar below.
15. Configure the Zooming and Panning properties. See To configure dragging, panning, and zooming below.
16. Configure the Generic properties:

1. String — The String property specifies a generic string property that can be used when scripting this control. Type a string and reference it in your script as necessary.
2. Yes/No — The Yes/No property specifies a generic Boolean yes/no property that can be used when scripting this control. Click the check box to enable the property and reference it in your script as necessary.

17. Configure other chart properties.
18. Add any script components required for your chart.
19. Save the screen.
20. Run the screen to test your configuration.

1. Find the Location properties and configure the size and location properties for the control:

1. Height —

   The Height property specifies the height of the control (or screen).

   Tip: You can also change the height of a control using the Settings pane (click on the (Settings) to the right of the control in design mode) or on the Controls view of the Screen pane.

2. Horizontal resize mode —

   The Horizontal resize mode property specifies whether and how the control dynamically moves or resizes horizontally when the screen is resized in run mode. Options include:

   • None — No resizing occurs.
   • Shift — The object will shift horizontally.
   • Expand — The object will expand or shrink horizontally the same number of pixels as the screen.
   • Proportional — The object expands or shrinks proportionally to the screen.

   The default value is None.

3. Layer —

   The Layer property specifies the name of the layer to which this object is assigned. Layers can be used to show, hide, and edit multiple controls on one layer without affecting controls on another layer.

   • Type the name of the layer into the Layer field (the name can be a previously created layer or a new layer).
   • All layers are listed on the Layers pane, where you can manage the layers for the screen in design mode and run mode.

   Tip: You can also edit a control's Layer on the Controls view of the Screen pane.

   Note: Layer visibility can be controlled at runtime via the AddLayer, HideLayer, SetLayerVisibility, and ShowLayer methods on the Screen object.

4. Lock —

   The Lock property indicates whether the control is locked to the current position. A locked control cannot be moved via click and drag, or nudged with the arrow keys, or resized.

   Tip: You can also toggle the lock setting of a control using the Settings pane (click on the (Settings) to the right of the control in design mode).

5. Vertical resize mode —

   The Vertical resize mode property specifies whether and how the control dynamically moves or resizes vertically when the screen is resized in run mode. Options include:

   • None — No resizing occurs.
   • Shift — The object will shift vertically.
   • Expand — The object will expand or shrink vertically the same number of pixels as the screen.
   • Proportional — The object expands or shrinks proportionally to the screen.

   The default value is None.

6. Visible —

   The Visible check box indicates whether the control is visible in run mode.

   Tip: You can also change a control's Visible setting on the Controls view of the Screen pane.

7. Width —

   The Width property specifies the width of the control (or screen).

   Tip: You can also change the width of a control using the Settings pane (click on the (Settings) to the right of the control in design mode) or on the Controls view of the Screen pane.

8. X —

   The X property specifies the location of the control along the horizontal axis. Use the up, down, left, and right arrow keys to nudge a control by 1 pixel. Arrow moves a control by 1 pixel. Ctrl+Arrow moves a control by 10 pixels. Ctrl+Shift+Arrow moves a control by 100 pixels.

   Tip: You can also change the location of the control using the Settings pane; click on the (Settings) to the right of the control in design mode.

9. Y —

   The Y property specifies the location of the control along the vertical axis. Use the up, down, left, and right arrow keys to nudge a control by 1 pixel. Arrow moves a control by 1 pixel. Ctrl+Arrow moves a control by 10 pixels. Ctrl+Shift+Arrow moves a control by 100 pixels.

   Tip: You can also change the location of the control using the Settings pane; click on the (Settings) to the right of the control in design mode.

10. Z index —

    The Z index property is used to determine the order in which controls are layered on top of each other. Controls with higher values will draw on top of those with lower values. The newest control added to a screen will always have the highest value and will be the top layer. Two or more controls can be on the same index (layer).

    Tip: You can also change the Z index of a control using the Settings pane (click on the (Settings) to the right of the control in design mode) or on the Controls view of the Screen pane.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

1. Find the Chart properties to configure specific chart elements (colors, drop mode, delay, hover mode, series configuration, time slice, and tooltips):

1. Background color — The Background color property specifies the background color of the screen, object, or control. Click to customize the color using the color picker.
2. Background color source —

The Background color source property specifies the color source for the background color of the screen, object, or control. Two options are available:

• Auto — Overrides the background color with a theme-appropriate color (default).

  Note:    Auto is not supported as a color source in TWC screens. If a property specifies Auto for color configuration, the screen will use the <Self> color that is specified in the Canvas file during the publishing process. See Color on TWC Screens.

• <Self> — The color selected in the Background color property will be used.

The default option is Auto.

3. Chart drop mode —

   The Chart drop mode property specifies how the chart should handle the facility from a dropped point. Two options are available:

   • Use dropped facility — Create a series using the full point tag, including the facility tag from the point dropped on the chart (default).
   • Use control facility — Create a series using the UDC from the dropped point but drive the facility tag at the control level.

   The default value is Use dropped facility.

4. Delay loading — The Delay loading property indicates whether to delay data loading for the chart. Use this to stop unwanted messaging to the service, for example, if you don't want the chart to load when the screen first opens. This is necessary when using scripted data sources for a series, to give the script time to set the delegates before data retrieval begins.

5. Hide unreliable points — The Hide unreliable points property indicates whether to hide a point in the chart series based on its unreliable point state. The UNRELIABLE status bit is set when a point is deemed unreliable. When enabled data points marked as unreliable will be hidden in the chart. When disabled, unreliable data points will be shown in the chart.

6. Hover mode —

   The Hover mode property specifies the mode when hovering over a series in the chart. Two options are available:

   • None — No change to the other series in the chart.
   • Fade other series — When hovering over a series, all other series in the chart are faded.

   The default value is None.

   You can use this setting to highlight a particular series in a chart in run mode.

7. Series — Configure chart y-axes and series properties as described below.
8. Show time slice —

   The Show time slice check box indicates whether to display a vertical time slice that will snap to the nearest data point and call out the point value and timestamp for all series in the chart in run mode.

   Chart time slice

9. Show tooltips —

   The Show Tooltips check box indicates whether to display tooltips when hovering over a data point or cell. When you hover over a data point or cell in run mode the tooltip displays the point value and timestamp. Only available when a control is showing points.

   Chart tooltip

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

The y-axis of a series typically displays increments of data according to the data's relevant unit type. The unit type derives from the associated data type's point record in the Point Service (PNT). A chart can support multiple y-axes, and each y-axis can support multiple series.

1. Find the Series property and click to configure a series for your chart.

   The Series Configuration dialog box contains the properties required to configure each series on your chart. Each series is automatically assigned to a y-axis. You can add an unlimited number of y-axes to a chart and an unlimited of series to each y-axis. Although some properties of a series are received from the screen or from another object on the current screen, you can define properties specific to a certain series, in some cases overriding the inherited properties. The number of defined series is listed on the property label. Click to open Series Configuration dialog box.

2. Find the Y-axis properties.

   The Y-axis property group contains properties that configure the attributes of the y-axis, such as title, position, color, tick color, and visibility.

   The properties are the following:

1. Title —

   The Y-axis Title property specifies the text for the y-axis title. The y-axis typically displays increments of data according to the data's relevant unit type. The unit type derives from the associated data type's point record in the Point Service (PNT). The set Title is Values, which cannot be changed.

   Scripting Note

   Prior to v9.5 the script property name for Title was YAxisTitleText, which is now obsolete, although it is retained for backwards compatibility.

   Use Chart.AxisY Name string to manipulate a y-axis in script. For example:

   Copy

   AxisY Name property

   1
   2
   3
   var axis = Objects.Chart1.AxisY.First();
    
   axis.Name = "Custom (Values) Updated ++";

   Note that

2. Position —

   The Y-axis Position property specifies the location of the y-axis on the chart. Options include: Left or Right. The default value is Left.

   Scripting Note

   Prior to v9.5 the script property name for Position was YAxisLabelPosition, which is now obsolete, although it is retained for backwards compatibility.

   Use Chart.AxisY Position to manipulate a y-axis in script. For example:

   Copy

   AxisY Position property

   1
   2
   3
   var axis = Objects.Chart1.AxisY.First();
    
   axis.Position = HorizontalPosition.Right;

   Note that

3. Label color —

   The Y-axis Label color property specifies the color of the y-axis label text. Click to customize the color using the color picker.

   Scripting Note

   Prior to v9.5 the script property name for LabelColor was YAxisLabelColor, which is now obsolete, although it is retained for backwards compatibility.

   Use Chart.AxisY LabelColor string to manipulate a y-axis in script. For example:

   Copy

   AxisY LabelColor property

   1
   2
   3
   var axis = Objects.Chart1.AxisY.First();
    
   axis.LabelColor = System.Windows.Media.Colors.Yellow.ToString();

   Note that

4. Tick color —

   The Y-axis Tick color property specifies the color of the tick lines for the y-axis. Click to customize the color using the color picker.

   Scripting Note

   Prior to v9.5 the script property name for TickColor was YAxisTickColor, which is now obsolete, although it is retained for backwards compatibility.

   Use Chart.AxisY TickColor string to manipulate a y-axis in script. For example:

   Copy

   AxisY TickColor property

   1
   2
   3
   var axis = Objects.Chart1.AxisY.First();
    
   axis.TickColor = System.Windows.Media.Colors.Yellow.ToString();

   Note that

5. Show axis label —

   The Y-axis Show axis label check box indicates whether to display the label text on the y-axis, which is typically the range of units being displayed on the chart.

   Scripting Note

   Prior to v9.5 the script property name for ShowLabels was YAxisShowLabels, which is now obsolete, although it is retained for backwards compatibility.

   Use Chart.AxisY ShowLabels Boolean to manipulate a y-axis in script. For example:

   Copy

   AxisY ShowLabels property

   1
   2
   3
   var axis = Objects.Chart1.AxisY.First();
    
   axis.ShowLabels = true;

   Note that

3. Configure the general Series properties for each series. The Series property group contains properties that configure the primary attributes of the chart series, such as name, UDC, color, SiteService override, facility override, and relative facility resolution. See To configure a series above.
4. Configure other chart properties.
5. Save the screen.
6. Run the screen to test your configuration.

A series is a continuum of y-axis/x-axis points plotted on a graph that represent a CygNet point's behavior over time. You can add multiple series for the same CygNet point. For instance, you might want one series to represent raw data and another series to represent rollup data. You can also override the source of the data at the series level. Each chart series is tied to a y-axis. A chart can support multiple y-axes, and each y-axis can support multiple series.

1. Find the Series property and click to configure a series for your chart.

   The Series Configuration dialog box contains the properties required to configure each series on your chart. Each series is automatically assigned to a y-axis. You can add an unlimited number of y-axes to a chart and an unlimited of series to each y-axis. Although some properties of a series are received from the screen or from another object on the current screen, you can define properties specific to a certain series, in some cases overriding the inherited properties. The number of defined series is listed on the property label. Click to open Series Configuration dialog box.

   The Series properties are organized into four property groups. Click to expand each property group as necessary. Click to collapse each property group as necessary.

   • Series
   • Appearance
   • Rollup
   • Data source

2. Configure the y-axes for your chart. See To configure a y-axis above.
3. Configure the general Series properties for each series. The Series property group contains properties that configure the primary attributes of the chart series, such as name, UDC, color, SiteService override, facility override, and relative facility resolution.

1. Name — The Name property specifies the label for the selected chart series, which is displayed in the upper right corner of the chart.
2. UDC — The UDC property specifies the UDC for which the control is to display data. Click to select a UDC using the Select UDC dialog box.
3. Color —

   The Color property specifies the color of the chart series. Click to customize the color using the color picker.

   Note: The default colors used for a Chart series are drawn from a set palette and are therefore not theme-specific. See themes for more information.

4. Series type —

   The Series type property specifies the style to use for the chart series. Click to select an option from the drop-down menu. Options include:

   • Bar — A bar chart visualizes data as a set of rectangular bars, with the length of each bar representing the value of each data point. Each bar is the color assigned to the series.
     • When adding a series showing custom non-CygNet data in a Bar chart type via script, you must set the color at the point level. This allows for points to be colored differently from each other.
   • Line — A line chart shows information as a series of data points connected by straight lines. This is the default series type for the chart.
   • LineArea — An line area chart is based on the line chart and shows information as a series of data points connected by straight lines, with the area between the X-axis and the line filled with the line color.
   • Spline — A spline chart is a line chart where data points are connected by a smooth curve.
   • SplineArea — A spline area chart is based on the spline chart where data points are connected by a smooth curve, with the area between the X-axis and the line filled with the line color.
   • Step — A step chart is a line chart in which data points are connected by horizontal and vertical lines, looking like a series of steps.
   • StepArea — A step area chart is based on the step chart where data points are connected by horizontal and vertical lines, looking like a series of steps, with the area between the X-axis and the steps filled with the line color.

   Click here to see an example of each type of series.

5. Override chart's SiteService — Select the Override chart's SiteService check box to specify a different SiteService for this chart series. Once checked a SiteService field is revealed where you can override the SiteService configured for the chart. The chart's SiteService is specified in the CygNet Connection property group.
   • SiteService — The SiteService property specifies the SiteService for which the control (or screen or screen element) is to display data. Click to select a service using the Select Service dialog box.
6. Override chart's facility —

   Select the Override chart's facility check box to specify a different facility for this chart series. Once checked a facility field is revealed where you can override the facility configured for the chart. The chart's facility is specified in the CygNet Connection property group.

   If Override chart's facility is selected the Resolve to a relative facility option is removed.

   • Facility — The Facility property specifies the facility for which the control (or screen) is to display data. Click to select a facility using the Select Facility dialog box.
7. Resolve to a relative facility — The Resolve to a relative facility check box redirects the source of the facility to a relative facility, overriding the configured source facility. Once selected a list of configured Relative links is displayed. See Using Relative Facilities in Canvas for more information about configuring and scripting relative facility links.
   • Relative link — The Relative link property specifies a list of all available relative facility paths. Click to reveal a drop-down menu of all available relative facility definitions (relative links). Select a link from the list. If an order-in-type attribute is specified for the selected link, the Order in type field will display.
   • Order in type — The Order in type property specifies the attribute value used to represent the order in type (facility ordinal) if the relative facility definition is configured for one. It is possible to have multiple relative facility definition sets with the same definition name. In this case, if the specified Relative link is configured for ordinalization, then you need to configure the attribute value in the box.

4. Configure the desired point Appearance properties for your series. The Appearance property group contains properties that configure the appearance of points on the chart series, such as enabling points, color, point size, enabling labels, and label colors. Click to expand the property group.

1. Show points — The Show points check box indicates whether to display the points on the chart series. Once enabled, several other properties (color, size, and label attributes) become configurable.
   1. Color — The Color property specifies the color of the point in the chart series. The Show points property must be enabled to change the point color. Click to customize the color using the color picker.
   2. Size — The Size property specifies the size of the point displayed on the chart series. The default value is 5. The Show points property must be enabled to change the point size.
2. Show labels — You can optionally display labels for data points in the series and customize the label text, background, and connector colors. The labels will dynamically adjust their layout to avoid overlapping one another in run mode. The Show labels check box indicates whether to display a label corresponding to each data point in the chart series when in run mode. The labels will dynamically reorient their position when you resize or reshape a screen.
   1. Label background color — The Label background color property specifies the background color of the label associated with the point in the chart series. Click to customize the color using the color picker.
   2. Label text color — The Label text color property specifies the color of the text on the label associated with the point in the chart series. The text color is sometimes known as the foreground color. The Show labels property must be enabled to change the text color on the label. Click to customize the color using the color picker.
   3. Label connector color — The Label connector color property specifies the color of the label border and the connector line linking the label to the point in the chart series. The Show labels property must be enabled to change the color of the label connector. Click to customize the color using the color picker.

5. Configure the desired Rollup properties for your series. The Rollup property group contains properties that determine how data is rolled up in the chart series, such as type, units, period, and offset. Click to expand the property group.

1. Type —

   By default, a rollup derives its values from raw data stored in the Value History Service (VHS). The Rollup type drop-down menu enables you to rollup data for the selected point. Using the Rollup type option might be preferable to using the data thinning option because rollup calculations performed by the VHS can provide improved performance and reduced network traffic relative to data thinning. Rollup type options are as follows:

   • None (default)
   • Calculated weighted average
   • Calculated mean
   • Calculated minimum
   • Calculated maximum
   • Calculated delta
   • Calculated last
   • Thin median
   • Thin minimum / maximum
   • Thin last

   Additional Resources

   For more information about Rollup Type definitions and about how history values are used in rollups, see History > History Data > History Rollups.

2. Unit —

   The Rollup unit property options define the time units by which a specified Rollup type takes place. The Rollup Unit options are as follows:

   • None (default)
   • Minutes
   • Hours
   • Days
   • Seconds

   For instance, if you select Minutes, rollups occur on a minute basis. The interval is further defined by the Rollup Period setting, which defines how many (in this case) minutes long a rollup period is.

3. Period — The Rollup period property works in conjunction with the Rollup unit to define the interval by which a specified Rollup type takes place. For example, if you selected Minutes from the Rollup unit drop-down menu, then typed 3 in the Rollup period field, rollups for the control would occur every three minutes. Enter only whole numbers.
4. Top of Subunit — The Rollup top of subunit property enables you to specify the time offset by which a rollup is evaluated with greater precision. Subunit refers to the next smaller unit of time from the time unit defined in the Rollup unit property. So, if Rollup unit is set to hours, the implied rollup subunit would be set to minutes. The numeric value is the number of subunits added to starting time of each cell or series. Using the example of hours and minutes, if the starting time of an item would otherwise have been 09:00 AM, if subunits is set to 15, the starting time of that item would be 09:15 AM.

6. Configure the Data source for your series. The Data source property group contains properties that determine from where the series' data is sourced. Click to expand the property group.

1. Data source —

   The Data source property specifies the source of the data used in a selected series. The options are as follows:

   • CygNet — The series will display native CygNet data. This is the default value.
   • Script — The series will display non-CygNet data from a custom script. For example, you might display data with a generic SQL query from an external database. See Scripting a Chart Series for more information and examples.

7. Click (Remove series) to delete any series from the chart.
8. Configure other chart properties.
9. Save the screen.
10. Run the screen to test your configuration.

Each x- axis uses its own property set. The x-axis always displays increments of time units. The time units and increments displayed on the x-axis are user defined. The y-axis of a series typically displays increments of data according to the data's relevant unit type. The unit type derives from the associated data type's point record in the Point Service (PNT).

1. Find the X-axis properties, which consist of the following:

1. Show x-axis label — The Show x-axis label check box indicates whether to display the label text on the x-axis, which is typically the unit of time being displayed in the chart.
2. X-axis label color — The X-axis label color property specifies the color of the x-axis label text. Click to customize the color using the color picker.
3. X-axis label position — The X-axis label position property specifies the location of the label text on the x-axis. Options include: Top or Bottom. The default value is Bottom.
4. X-axis tick color — The X-axis tick color property specifies the color of the tick lines for the x-axis. Click to customize the color using the color picker.
5. X-axis title — The X-axis title property specifies the text for the x-axis title. The x-axis typically shows the time frame being displayed on the chart. The default value is Time.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

The Date range configuration property is used to configure the range of dates to be trended in the chart or sparkline, whether to enable live data updates, the live update rate, the starting time for a trend, whether to use relative or absolute dates, and the actual date range. Click to open the Configure Time Range dialog box, where you can configure these properties. You can change the date and time range settings for any chart in run mode via an icon on the chart toolbar.

1. Find the Date range configuration properties and configure the desired dates for your series. Click to open the Configure Time Range dialog box, where you can configure these properties. You can change the date and time range settings for any chart in run mode via an icon on the chart toolbar.

1. Enable live updates — The Enable live updates check box indicates whether this chart or sparkline will request new data at a specified interval allowing the chart to trend data at a real-time pace. When live updates are enabled and the next poll occurs, the series line will update to reflect the slope change, if any. The interval at which the trend moves forward is defined in the Update rate. If disabled, a trend is populated once with data from the Value History Service (VHS). You can disable live updates /enable live updates for any chart in run mode via an icon on the chart toolbar. See Live Update Changed for related event.
2. Update rate — The Update rate property specifies the number of milliseconds to wait before an auto-updated trend refreshes. The default rate is 200 milliseconds.
3. Earliest (span) — The Earliest (span) property specifies the starting date for a trend; that is, the amount of time in the past from when to start the trend. Enter a number in the text box and select a time period from the drop-down menu. For example, 8 Hours ago or 2 Days ago.
4. Earliest (units) — The Earliest (unit) property specifies the unit of time in the past from when to start the trend. After entering a number in the text box, select a time period from the drop-down menu. The options include: Seconds, Minutes, Hours, Days, and Years. For example, 60 Seconds ago or 2 Hours ago. The default value is Hours.
5. Use relative date — The Use relative date check box indicates whether to use relative dates and time for the chart. Use the Begin/Start and End properties to specify the relative date ranges to use in the chart.If Use relative date is unchecked all dates and time will be absolute. Use the Begin/Start and End properties to specify the absolute date ranges to use in the chart.
6. Start (relative date) — The Begin relative date or Relative start date or Start property specifies a wildcard string defining the amount of time by which to adjust the start date and time. The space-separated elements in this string must be of the form: "x-#", "x+#", or "x=#" where # is an integer and x is one of the following unit specifiers: y — Year, m — Month, d — Day, H — Hour, M — Minute, S — Second, and # is an integer. T wildcard is also supported and must be in the form: T, T+#, T-#, where T represent today at midnight, T-1 is yesterday at midnight, and T+1 is tomorrow at midnight, etc. Any integer can be used. For example, H-8 represents data from the 8 hours before the current hour, d+3 represents data 3 days after the current day, and d+2 H+1 M+30 represents data 2 days, 1 hour and 30 minutes after the current date and time. d-4 H=6 sets the relative start date and time to four days ago (d-4) at 6:00 a.m. (H=6). See Date and Time Wildcards for more information about adjusting relative time.
7. End (relative date) — The End relative date or Relative end date or End property specifies a wildcard string defining the amount of time by which to adjust end date and time. The space-separated elements in this string must be of the form: "x-#", "x+#", or "x=#" where # is an integer and x is one of the following unit specifiers: y — Year, m — Month, d — Day, H — Hour, M — Minute, S — Second, and # is an integer. T wildcard is also supported and must be in the form: T, T+#, T-#, where T represent today at midnight, T-1 is yesterday at midnight, and T+1 is tomorrow at midnight, etc. Any integer can be used. For example, H-8 represents data from the 8 hours before the current hour, d+3 represents data 3 days after the current day, and d+2 H+1 M+30 represents data 2 days, 1 hour and 30 minutes after the current date and time. d-4 H=6 sets the relative end date and time to four days ago (d-4) at 6:00 a.m. (H=6). See Date and Time Wildcards for more information about adjusting relative time.
8. Start (absolute date)— The Begin date or Start or Start date property specifies the start date and time for a control (or screen or chart or column) for an absolute date and time view window. The format is MM/DD/YYYY hh:mm:ss AM/PM. The default value is the system date and time at which the control was first added to the screen. Click to change the date using the date picker.
9. End (absolute date)— The End date or End property specifies the end date and time for a control (or screen or chart or column) for an absolute date and time view window. The format is MM/DD/YYYY hh:mm:ss AM/PM. The default value is the system date and time at which the control was first added to the screen. Click to change the date using the date picker.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

The source of your CygNet data can be explicitly configured for the control or it can be received from the screen or another control.

1. Expand the CygNet property group to reveal the CygNet connection property — The CygNet connection property is used to configure the facility and SiteService associated with this control or screen. Two selection modes are available: a) by Facility tag or b) by SiteService / Facility. This split configuration allows for the inheritance of these properties from other controls, or the specific configuration of the SiteService or the facility, while dynamically changing the other. This use case may be rare; therefore, the Facility tag option is the default. Click to reveal a drop-down area where you can configure the Selection mode, source SiteService, and source Facility. Each option is described below.

1. Selection mode —

   The Selection mode property is used to determine how the control will receive CygNet information from other controls or from itself. Two options are available; click the desired radio button:

   • Facility tag — The Facility tag selector consists of a Source chooser and Resolve to a relative facility check box. If the Source is <Self> a Facility tag selector and relative facility options are also displayed. Facility tag is the default option.
   • SiteService / Facility — The SiteService / Facility selector consists of Source and SiteService and facility choosers.

   Sending and receiving facility tags

   Some controls on the same screen allow for the sending of facility information from one control to another.

   1. On the sending control configure the Facility sender mode property to send facility tag information to another control on the same screen.
   2. On the receiving control configure the Selection mode property (in either CygNet connection or Point configuration section) to Facility tag and select the Facility Source to the sending control.
   3. On the receiving control configure a display tag that associates to a facility property, e.g., %FacilityTag%.

   Example

   Add a control to a screen (e.g., a Tag Chooser or Grid) and configure it as a facility sender to send a facility to the screen. Add another control to the screen (e.g., a Text Tool or Donut) and configure it to receive the facility from the screen. In this scenario the Tag Chooser or Grid will send a facility to the screen and the screen will then send the facility to a Text Tool or the Donut.

2. SiteService — The SiteService property is where you specify the source of the SiteService for the control (or screen) to use. The source for the SiteService can be explicitly configured for this control or it can be received from another control on the same screen, or from the screen, or from another screen. Click to reveal the SiteService selector. Options include:
• Source — Options include <Self> or Screen (default):
  • <Self> — Select <Self> to explicitly configure the SiteService for this control or screen element. A SiteService selector is displayed:
    • SiteService — The SiteService property specifies the SiteService for which the control (or screen or screen element) is to display data. Click to select a service using the Select Service dialog box.
• Screen — Select Screen to receive the SiteService from the screen for this control or screen element. By default, the sender is the Screen control if no other senders have been configured.

3. Facility — The Facility tag or Facility property is where you specify the source of the facility for the control (or screen) to use. The source for the facility can be explicitly configured for this control or it can be received from another control on the same screen, or from the screen, or from another screen. Click to reveal the Facility tag or Facility selector. Options include: Click to reveal the Facility selector. Options include:
• Source — Options include <Self>, Screen (default), or a list of Sender controls.
• <Self> — Select <Self> to explicitly configure the facility for this control. A Facility tag or Facility selector is displayed, depending on the Selection mode:
  • Facility — The Facility property specifies the facility for which the control (or screen) is to display data. Click to select a facility using the Select Facility dialog box.
  • Facility Tag — The Facility tag property specifies the full facility tag identifier for which the control (or screen) is to display data. Click to select a facility using the Select Facility Tag dialog box.
• Screen — Select Screen to inherit the facility from the screen for this control. By default, the sender is the Screen control if no other senders have been configured. Once Screen is selected Inherited from Screen will display for the Facility property.
• Sender — A list of sender controls that have been configured with a facility will be displayed. Select the name of the control that will send its facility to this control. By default, the sender is the Screen control if no other senders have been configured. Once a sender control has been specified its name will display in the Source field.
• Resolve to a relative facility — The Resolve to a relative facility check box redirects the source of the facility to a relative facility, overriding the configured source facility. Once selected a list of configured Relative links is displayed. See Using Relative Facilities in Canvas for more information about configuring and scripting relative facility links.
  • Relative link — The Relative link property specifies a list of all available relative facility paths. Click to reveal a drop-down menu of all available relative facility definitions (relative links). Select a link from the list. If an order-in-type attribute is specified for the selected link, the Order in type field will display.
  • Order in type — The Order in type property specifies the attribute value used to represent the order in type (facility ordinal) if the relative facility definition is configured for one. It is possible to have multiple relative facility definition sets with the same definition name. In this case, if the specified Relative link is configured for ordinalization, then you need to configure the attribute value in the box.

2. Configure other control properties as necessary.
3. Save the screen.
4. Run the screen to test your configuration.

1. Find the Legend properties and configure whether to show the legend, its location, and its format:

1. Legend date format — The Legend date format property specifies the format for the dates used in the chart legend. Use this property to override the Default date format, which is configured in the Application settings page of the Backstage view. The default date format is YYYY/MM/DD HH:MM:SS.fff, which corresponds to 2024/01/01 10:20:30.0001.
2. Legend format —

   The Legend format property specifies the format for the text used in the chart legend. The text can display a static text string, such as a label, legend, tooltip, or a dynamic text string based on point or facility attributes. Dynamic text is built using tokens, which can represent real-time CVS point properties, point configuration properties, and facility properties. In run mode, the tokens are replaced with the attribute's value. Click to configure the static text and/or property tokens using the CygNet Property String dialog box. The default format is %SiteService%:%PointIdLong%. For example, CYGDEMO.UIS: <FACILITY_UDC>.

   Note: If you leave this property empty, the chart will use the series Name value as the legend.

   Thin Web Client

   This is the only chart legend property supported by TWC. If configured (to use a dynamic text string), or left empty (to use the series Name), the other legend properties will apply their default values: Legend date format: YYYY/MM/DD HH:MM:SS.fff; Legend location: bottom; Legend value format: #,##0.00; and Show legend: Yes.

3. Legend location — The Legend location property specifies where the chart legend should appear, if it is shown. Options include: Left, Top, Right, or Bottom. The default value is Bottom.
4. Legend value format — The Legend value format property specifies the format for the legend's point value using any of the valid .NET standard or custom numeric format strings. The value format applies to a point's value, primary value, and alternate value properties. The default value format is #,##0.00, which corresponds to 123,456,789.12. Formats use # and 0, with a period (.) as the decimal separator and comma (,) as the thousands separator. Add additional zeros to show more decimal places.
5. Show legend — The Show legend check box indicates whether to display the legend on the chart. The default option is to show the legend.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

A toolbar can be added to display above or below your chart in run mode. The toolbar is hidden by default. The Disable live updates / Enable live updates toggle buttons will always display in run mode; several other buttons will display by default, although they can be disabled as necessary.

1. Find the Toolbar properties, which consist of the following:

1. Toolbar items —

   The ToolBar items configuration box contains the properties required to configure the buttons that will appear on the chart's toolbar in run mode. Buttons include several functional Toolbar buttons (live update, date range configuration, save, open, print, export, and reset zoom) and any number of customizable Quick range buttons, which are used to view predefined ranges of time only visible for the current runtime session. The number of defined toolbar items is listed on the property label. All buttons are displayed by default if the toolbar is set to visible.

   Canvas Native view Sample chart toolbar buttons in run mode. The buttons appear in the following order: Live update toggle pair, Date range, Quick range buttons, Save, Open, Print, Export as image, Export to CVS, and Reset.   CygNet TWC web view Sample chart toolbar buttons in run mode. The buttons appear in the following order: Live update toggle pair, Date range, Print, Export as image, Export to CVS, and Quick range buttons. The Save, Open, and Reset buttons are .

   See Using a Chart in Run Mode for a description of the chart toolbar icons.

   1. Toolbar buttons —

      The Toolbar buttons property group contains properties used to show or hide the buttons that will appear on the chart's toolbar in run mode. Click the check box next to the items you want to show in run mode. The first set of check boxes indicate the buttons that are supported only in the Canvas Native view only. The Native and Web supported check boxes indicate the buttons that are supported in screens created for both the Canvas Native view and the CygNet TWC web view. Click to expand each property group as necessary. Click to collapse each property group as necessary.

      Chart toolbar buttons configuration

      • Show save and open buttons — The Show save and open buttons check box indicates whether to display a (Save the chart's configuration to a file) button and a (Open a previously saved chart) button on the chart's toolbar in run mode. The default setting for this button is enabled. See To save a chart's configuration as a default chart and To open a previously saved default chart and Default Chart for more information.
      • Show reset zoom button — The Show reset zoom button check box indicates whether to display a (Reset to unzoomed state) button on the chart's toolbar in run mode. This button allows you to return the chart to its original state after dragging, panning, or zooming. The default setting for this button is enabled. See To drag, pan, and zoom for more information.
   2. Canvas Native view and CygNet TWC web view supported buttons —
      • Show live update button — The Show live update button check box indicates whether to display the (Disable live updates / Enable live updates) toggle buttons on the chart's toolbar in run mode. These buttons allow you to stop and start live updates for the chart. The default setting for this button is enabled. See To configure live updates for the current chart for more information.
      • Show date range button — The Show date range button check box indicates whether to display a (Configure date range) button on the chart's toolbar in run mode. This button allows you to change the date and time range to be trended in the chart, whether to enable live data updates, the live update rate, the starting time for a trend, whether to use relative or absolute dates, and the actual date range. The default setting for this button is enabled. See To configure the date and time range for the current chart for more information.
      • Show print button — The Show print button check box indicates whether to display a (Print current view) button on the chart's toolbar in run mode. The default setting for this button is enabled. See To print a chart for more information.
      • Show export buttons — The Show export buttons check box indicates whether to display a (Export as image) button and a (Export data to CSV) button on the chart's toolbar in run mode. The default setting for this button is enabled. See To export a chart for more information.
   3. Quick range buttons —

      The Quick range buttons property group contains properties used to configure the quick range buttons that will appear on the chart's toolbar in run mode. There is no limit to the number of quick range buttons you can configure. Click to expand each property group as necessary. Click to collapse each property group as necessary. In the Quick range buttons section, do the following: Click Show quick range buttons to display the buttons in run mode. Click Add button to add a quick range button to the toolbar. Configure the Label, Size, Units, and Tooltip for each button. The properties are described below. Or click (Delete quick range button) to remove a button from the chart's toolbar as necessary.

      Chart quick range buttons configuration

      The quick range properties are the following:

      • Show quick range buttons — The Show quick range buttons check box indicates whether to display any configured quick range buttons, which are used to view predefined windows of time on the chart. Each button will reset the time range presented in the chart based on the button's configuration. For example, for a button configured for 8 hours, when clicked the chart’s time range will be set so that it begins eight hours from now with the left edge of the chart representing now. For a chart configured to be in live update mode, the chart will update to show this eight-hour window. The quick range only persists for the current runtime session. The default setting for this button is enabled, although buttons must be configured to display on the chart. See To quickly view different time ranges for the current chart for more information.
      • Units — The Units property specifies the time unit for the range associated with the quick range button. The options include: Seconds, Minutes, Hours, Days, and Years. The default value is Seconds.
      • Size — The Size property specifies the length in units of time for the range associated with the quick range button. The size is relative to the unit type specified in the Units property. For example, 60 seconds = 1 minute, 48 hours = 2 days, 30 days = 1 month, etc.
      • Label — The Label property specifies the identifier displayed on the quick range button.
      • Tooltip — The Tooltip property specifies the tooltip to be displayed under the quick range button.

2. Toolbar location —

   The Toolbar location property specifies the location of the toolbar. Options include Top or Bottom. The default location is above the chart (Top).

   Note: The Toolbar location property is . The default location in the TWC view is at the top of the chart.

3. Toolbar visible — The Toolbar visible check box indicates whether the toolbar is visible on the chart. The default value is hidden.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.

The Zooming and Panning properties allow you to enable zooming and panning behavior in run mode. See To drag, pan and zoom in run mode for more information about using this behavior in run mode.

1. Find the Zooming and panning properties and configure the desired zoom and pan behavior for your chart.

1. Click next to Drag mode to set the dragging behavior.

   The Drag mode property determines the drag action for the chart in run mode. Setting it to Pan will start panning, instead of zooming when you drag the mouse over the plot area. To forbid any drag actions you can set the Drag mode to None. Options include:

   • None — Turn off all dragging actions. Neither panning nor zooming is enabled.
   • Pan — Enable panning only, zooming is disabled.
   • Zoom — Enable zooming only, panning is disabled.

   The default value is None.

2. Click next to Pan mode to set the panning behavior.

   The Pan mode property allows users to pan in the chart plot area when there is a dense area of data points that cannot be seen clearly at the normal chart scale. With Pan enabled you can reduce or expand the area you want to examine using the scroll bars, and then drag the chart within the pan region horizontally, vertically, or in both directions. Options include:

   • None — Panning with the mouse is disabled.
   • Horizontal — Panning with the mouse is enabled only on the horizontal axis.
   • Vertical — Panning with the mouse is enabled only on the vertical axis.
   • Both — Panning with the mouse is enabled both on the horizontal and vertical axes. You can use this value to remove any restrictions, thus the chart can be panned on both the horizontal and vertical axes.

   The default value is None.

   See Pan Offset Changed for related event.

3. Click next to Zoom mode to set the zooming behavior.

   The Zoom mode property allows users to zoom in to the chart plot area when there is a dense area of data points that cannot be seen clearly at the normal chart scale. With Zoom enabled you start dragging on the plot area, a gray zoom rectangle will be created and when the mouse is released the visible area will fit into the rectangle. Options include:

   • None — Zooming with the mouse is disabled.
   • Horizontal — Zooming with the mouse is enabled only on the horizontal axis.
   • Vertical —Zooming with the mouse is enabled only on the vertical axis.
   • Both — Zooming with the mouse is enabled both on the horizontal and vertical axes. You can use this value to remove any restrictions, thus the chart can be zoomed in both the horizontal and vertical axes.

   The default value is None.

   See Zoom Changed for related event.

2. Configure other chart properties.
3. Save the screen.
4. Run the screen to test your configuration.