webChart-ChartWidget

Located in the webChart palette, this bajaux HTML5-based WebWidget component allows you to add a Chart widget to a Px page or Hx page, or to a Dashboard pane. The widget allows you to create, modify, and render dynamic, interactive web-based charts in Workbench or in a late version HTML5-capable browser.

Enhancements in Niagara 4.2

Niagara 4.2 provides the capability to render data from Proxy Points and Virtual Points added to a web chart from a Supervisor. For details, see About adding data from a supervisor.

Another supported feature is adding multiple bindings to a web chart in a Px graphic. Using PxEditor you can configure the Wb View Binding property to resolve an OrdList.

About the Chart view

The Chart view (shown below) is the default view for History records in Workbench and in the HTML5 Hx profile, and a secondary view on schedules, as well as Enum, Numeric, and Boolean points.

NOTE: Legacy charts, those created in earlier releases, are available as secondary History Chart views on History records.

Figure 1. Chart view description

Settings icon — click to access chart Settings dialog

Command bar — click icons to launch chart commands

Cursor position indicator

Data Value popup — displays when cursor is on a point

Y-Axis label — default orientation of Y-axis for primary data

X-Axis label — default orientation of X-axis. Once you have defined a specific Time Range for the chart, you can click this label to reopen the Time Range dialog to modify the range.

Data that can be rendered in a chart includes historical data, live historical data, live data, as well as schedules.

Although chart type is configurable via the Settings > Series tab dialog, the default chart type is determined by the type of data being presented. For example:

Component type	Default chart type
Numeric histories and points	Render as lines with interpolation, display as a line chart.
Numeric schedules	Render as discrete lines with no interpolation, display as a line chart.
Boolean and Enum points	Render as shaded areas referred to as “swim lanes,” displayed as a shaded chart. Opacity of the swim lanes fill is based on the ordinal of the Enum.
Boolean and Enum schedules	Render as shaded areas referred to as “swim lanes,” displayed as a shaded chart. Opacity of the swim lanes fill is based on the ordinal of the Enum.

Different types of data (Numeric and Boolean or Enum) can be combined on the same chart. In that situation, the swim lanes representing Boolean and Enum data display with a dimmed opacity to allow you to more clearly view the lines representing the numeric data. Also, you can modify the default chart type of one or more components in a chart. For example, you can set a boolean writable point to display bars while the data for another component plots a line.

The interactive Chart view allows you to make modifications while a chart is rendering. For example, while viewing a chart you can add one or more points, history records, schedules, or even containers of data such as a points folder or a hierarchy component.

When adding data to a chart, the Y-axis automatically adjusts the units and can accommodate different units of measure by displaying multiple Y-axes. On a chart containing data with three or more different units of measure, such as that shown below, the display still shows dual Y-axes. You can switch the units displayed on the secondary Y-axis by clicking on the dimmed axis label. For example, on the left-side Y-axis in the figure below, the dimmed % symbol indicates an alternate Y-axis with percent as the unit of measure. Clicking that % symbol switches the Y-axis units from displaying degrees to percent.

You can alternately hide or show specific data or even completely remove data from a chart via the right-click menu. Additionally, chart settings permit you to customize the appearance of a chart via selectable data colors and chart type per component, axis orientation, data source zooming, as well as permitting you to turn on or off the chart grid, background color, data popups, and status colors.

Figure 2. Multiple Y-axes accommodate data with different units of measure

Web charts utilize standard Niagara status colors to indicate current status. As shown in the chart below where the Status Coloring command is invoked, a red dot indicating Alarm status marks each plot in the Ramp line while an orange dot indicating Fault status marks each plot in the FaultHistory line. Also, status colors shown in the Fixed Data Popup dialog confirm the status of charted data.

Figure 3. Line chart displaying status colors

Shade and Bar charts also display status colors. When enabled, if there is a non-ok status a color band at the top of the shaded area or bar indicates the status.

Configurable properties for the Chart widget

Figure 4. Chart widget properties

Property	Value	Description
defaultOption	file:^charts/defaultOptions.chart	Provides ord for the defaultOption widget. You can browse to select another widget.
hideHeaderWidth	number	All headers are visible when you set the value 800 pixel and above.
Visible	true (default), false	Enables/disables display of the widget.
Enabled (general)	`true` or `false`	Activates (`true`) and deactivates (`false`) use of the object (network, device, point, component, table, schedule, descriptor, etc.). Activates (`true`) and deactivates (`false`) use of the object (network, device, point, component, table, schedule, descriptor, etc.).
Layout	Default values: X=0.00, Y=0.00, Width=000.00, Height=000.00 Fill=on, off (default)	Provides X and Y positioning coordinates for the widget as well as, Width, Height, and Fill. X and Y units can be specified as `Absolute` or `Percent`. While Width and Height dimensions can be specified as `Absolute`, `Percent`, or `Preferred units`. The Fill check box turns fill on and off.
Js	view:webChart:ChartWidget (default)	Provides an ORD for the Javascript widget. You can browse to select another widget.
layer	drop-down	null
legendVisibility	drop-down	Provides legendVisibility as per set value. (for example `Responsive`, `Show`, `Hide`)
preferredSize	Default values: Width=000.00, Height=000.00	preferredSize can use to set the values of height and width of widgetbar.
title	text	You can add the title.
titlevisibility	drop-down	Provides titleVisibility as per set value. (for example `Responsive`, `Show`, `Hide`)
wbViewBinding	Binding null —>WebWidget (default)	Provides an ORD for abound label. You can browse to select the ORD. This property also provides selectable options for `Degrade Behavior` (`None`, `Disable`, and `Hide`).