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 Chart properties. See To configure chart properties below.
9. Configure the Date range configuration properties. See To configure live updates and date ranges below.
10. Configure the CygNet connection properties. See To configure the CygNet connection below.
11. Customize the Legend properties to display. See To configure the chart legend below.
12. Configure the X-Axis and Y-Axis properties. See To configure x-axis and y-axis below.
13. Configure the Toolbar properties to configure a toolbar above or below your chart. The toolbar is hidden by default.

1. 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).
2. Toolbar visible — The Toolbar visible check box indicates whether the toolbar is visible on the chart. The default value is hidden.

14. Configure the Zooming and Panning properties. See To configure dragging, panning, and zooming below.
15. 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.

16. Configure other chart properties.
17. Add any script components required for your chart.
18. Save the screen.
19. 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 layer for this control. Layers are 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.
   • All layers are listed on the Layers pane, where you can show and hide 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, and ShowLayer methods on the Screen object.

4. 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.

5. 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.
6. 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.

7. 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.

8. 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.

9. 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 select a color using the color picker.
2. 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.

3. 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.
4. 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.

5. Series — Configure a chart series as described below.
6. 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.
7. 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.

2. Configure other chart properties.
3. Save the screen.
4. 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.

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

   The Series configuration box contains all the properties required to configure a series on your chart. The number of defined series is listed on the property label. Although some properties of a series are inherited 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.

   • Click to reveal the Series configuration box, which is organized into four property groups: Series, Appearance, Rollup, and Data source.
   • Click Add series to add a new, blank series to a y-axis. Each new series is assigned a dynamically generated color, which can be changed later if desired. Complete the new series configuration to suit your needs using the properties described below. Alternately, you can locate the desired point or facility in the Tag Chooser pane and drag and drop it to your chart.

   • Click to expand each property group. Click to collapse each property group.

   • Click (Delete series) to remove a series from your chart.
2. Configure the general Series properties for your 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 select a color using the color picker.
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) 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.

3. 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.
   • Color — The Color property specifies the color of the point in the chart series. The default value is the series color. Click to select a color using the color picker. The Show points property must be enabled to change the point color.
   • 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.
   • 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 select a color using the color picker. The Show labels property must be enabled to change the background color of the label.
   • 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. Click to select a color using the color picker. The Show labels property must be enabled to change the text color on the label.
   • 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. Click to select a color using the color picker. The Show labels property must be enabled to change the color of the label connector.

4. 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

   CygNet Help: For Rollup Type definitions and information about how history values are used in rollups, see the History Rollups topic in the CygNet Help:

   • 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.

5. 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 the examples provided below.

   Scripting a Chart Series

   The following example guides you though creating a scripted chart series, adding delegates to show random data and auto update the series, and some important notes.

   1. Configure a chart, add a series, and for the Data source property select Script as the source.
   2. Switch to the Script View and enable scripting for this screen.
   3. In the script for the screen, add a GetCustomSeriesData method below the //add custom methods here comment in the public class ScreenClass class. See the following example. This example also includes a GetCustomSeriesAutoUpdateData method to handle an auto updating series. Also see the comments showing the ability to handle multiple scripted series.

   private bool GetCustomSeriesData(Series series) { var date = Objects.Chart1.DateStart; Random rand = new Random();   //if there are multiple scripted series, use the series name to distinguish between them if(series.Name == "Custom 1") { //simple loop to populate series with random value while (date <= Objects.Chart1.DateEnd) { //create random number double value = rand.NextDouble() * 100;   //add to series //if the series is a bar type, the color needs to be supplied in AddData series.AddData(date, value);   //increment the date date += TimeSpan.FromSeconds(60); } }   if(series.Name == "Custom 2") { //simple loop to populate series with random value while (date <= Objects.Chart1.DateEnd) { //create random number double value = rand.NextDouble() + 1000;   //add to series //if the series is a bar type, the color needs to be supplied in AddData series.AddData(date, value);   //increment the date date += TimeSpan.FromSeconds(60); } } return true; }   public bool GetCustomSeriesAutoUpdateData(Series series, DateTime start, DateTime end) { //start - the datetime at the beginning of the update interval //end - the datetime at the end of the update interval   //insert custom series auto update code here   return true; }

   4. The above method has a parameter with a data type of 'Series', which is included in the Canvas.Shared.Models namespace. So, at the top of the script you need to add a statement to indicate this:

   using Canvas.Shared.Models;

   5. Next you need to add the delegates, which are used, for example, to reference the custom scripted data or instruct the series to auto update.
   6. Go to the Events tab and enable the Initialize event on the screen. This is where you hook the delegates:

   private void Screen_Initialize(object sender, EventArgs args) {   //hook up a GetCustomSeriesData delegate on the chart for the scripted series Objects.Chart1.GetCustomSeriesData = GetCustomSeriesData;   //hook up a GetCustomSeriesAutoUpdateData delegate on the chart for the scripted series Objects.Chart1.GetCustomSeriesAutoUpdateData = GetCustomSeriesAutoUpdateData;   //after the delegates are connected, the chart data needs to be refreshed Objects.Chart1.RefreshChart(true);   }

   Other Script Notes

   • The AddData method on a series object is used to add a value at the supplied time. AddData has three parameters:
   • DateTime — Type of "DateTime"
   • Value — Type of "Double"
   • Color — Type of "String". This is an optional parameter. See the next note about bar charts and color.

   Here is an example of adding a point to the chart.

   AddData(DateTime.Now, 150)

   • When adding a Bar Series type, you must set the color at the point level. This allows for points to be colored differently from each other. Color is an optional parameter on the AddData method; but it must be supplied for a bar chart.

   AddData(DateTime.Now, 150, "Blue")

   • When adding a scripted data source, set the Delay loading property to True to give the script time to set the delegates before data retrieval begins. The chart needs to be refreshed after the delegates are connected. See example above.

6. Click (Remove series) to delete any series from the chart.
7. Configure other chart properties.
8. Save the screen.
9. 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/enable live updates for any chart in run mode via an icon on the chart toolbar.
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 inherited 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. 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 tag 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%.

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 inherited 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. A SiteService selector is displayed:
    • SiteService — The SiteService property specifies the SiteService for which the control (or screen) is to display data. Click to select a service using the Select Service dialog box.
• Screen — Select Screen to inherit the SiteService from the screen for this control. 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 inherited 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.
2. Legend format — The Legend format property specifies the format for the text used in the chart legend. Build a dynamic text string, based on real-time CVS point properties, point configuration properties, and facility properties, using text tokens to represent a CygNet point attribute. Click to configure text and property strings using the CygNet Property String dialog box. The default format is %SiteService%:%PointIdLong%. For example, CYGDEMO.UIS: <FACILITY_UDC>.If you leave this property empty, the chart will use the series Name value in the legend.
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.
5. Show legend — The Show legend check box indicates whether to display the legend on the chart.

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

Each 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 select a 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 select a 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. Find the Y-axis items properties, which consist of the following:

1. Show y-axis label — The Show y-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.
2. Y-axis label color — The Y-axis label color property specifies the color of the y-axis label text. Click to select a color using the color picker.
3. Y-axis label position — The Y-axis label position property specifies the location of the label text on the y-axis. Options include: Left or Right. The default value is Left.
4. Y-axis tick color — The Y-axis tick color property specifies the color of the tick lines for the y-axis. Click to select a color using the color picker.
5. Y-axis 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 default value is Values.

3. Configure other chart properties.
4. Save the screen.
5. 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 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.

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

   The Zoom mode property allows users to zoom 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 Zoom enabled you start dragging on the plot area, a 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.

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

The Tag Chooser displays a hierarchical tree of CygNet facilities and points, allowing the creation and implementation of templated screens in Canvas. It can be used as the primary navigational control on your screens to drive other controls by passing in facilities and point values. The tag chooser supports both facility and point resolution. Point resolution is optional at the facility level and can be turned off or on simply by selecting the Show points check box at design time. Facilities are designated with a dark yellow diamond () and points are designated with a blue circle () in the tag chooser hierarchy.

Hierarchy Type

The tag chooser offers two hierarchy types: by Facility service attributes, or by Group service nodes:

• Facility service configuration — This tag chooser hierarchy is organized by the global attributes configured in your CygNet Facility service. You can further limit the tag chooser by any CygNet filter attribute set up for your system.
• Group service configuration — This tag chooser hierarchy is organized by the nodes configured in your CygNet Group service. You can further filter the tag chooser by a facility type. This must be a valid facility type in your system.

You can select any point or facility in the tag chooser pane and drag and drop it onto your control in both design and run mode.

1. Find the tag chooser in your application window (click (Display tag chooser) to display the Tag Chooser pane).
2. Configure the tag chooser to display the data you wish to view.
3. Find and click on the desired point or facility in the tag chooser and drag it to the text tool. As you drag the item will show a red no symbol until you reach the target area, where the symbol will change to a blue plus sign , indicating that the item can be dropped onto the control.
4. Return to the CygNet connection properties and make any necessary adjustments to the CygNet configuration.
5. Configure other control properties as necessary.
6. Save the screen.
7. Run the screen to test your configuration.
8. Note that you can also drag and drop a point or facility to a control on a screen in preview mode.