Skip to end of metadata
Go to start of metadata

This feature is new in Ignition version 8.1.0
Click here to check out the other new features

General

Component Palette Icon:



IULocgo


Power Chart - Overview

Description

The Power Chart collects and displays data based on the pens that have been configured on the chart. Users can add or remove pens from the chart, which in turn changes the underlying data. It is fully customizable in its appearance, from labels, colors, line widths, legend, scroll bars, text styles, and more. 

Note: The Power Chart utilizes functionality provided by the Tag Historian module, and requires a Tag Historian license to function.

The Power Chart has a responsive design and a mobile-optimized display that is different than the standard display. It has a mobile breakpoint so it fits better on mobile devices.  The mobile breakpoint is 750px, and is configurable on the 'config' property, responsiveDesignWidth, which is described in the Property Table on this page. The chart can change how it's rendered when viewed on smaller devices. The image below shows how the Power Chart renders on a smaller device.


Component Anatomy

Aside from the trending area, the component features several additional areas that provide additional functionality. The diagram below identifies these areas on a standard device.

Browse Tags

The Browse Tags panel allows you to browse for any available historical data, and add it to the chart. It is similar to the Designer's Tag Browser, but this tree reports any records that are accessible from the Tag Historian system, including tables provided by the DB Table Historian Provider. There are two ways to add Tags to the chart's display:

  • Select any nodes (entries with the Tag icon), and click Add Selected Tags , which will add a pen to the chart that represents the node that was selected.
  • Drag selected nodes onto the chart. You can select multiple items by using Ctrl-click. You'll see a prompt indicating how many Tags are selected, i.e., 4 Tags.)

If there's more than one plot in the chart configuration, you will be prompted to choose which plot to add the pen to.

Pen Table

This table shows each pen that's currently on the component, offers some aggregates based on the chart's current range, and provides some quick actions such as hiding the pen and changing it's color.  

Chart Settings

This panel allows users to add new objects to the chart, such as new axes and plots.

User Interaction

The top of the component features many interactive toggles and elements. Many of the properties available in the Property Editor are also available through a user interface in the runtime.

Interaction
Description
Browse Tags

Toggles the Tag Browser panel. 
Date Range Selector

Allows you to set the range on the chart. There are two modes:

  • Realtime: Shows the most recent chart data based on the given timeframe. Useful in cases where you want to display records from now to some amount of time in the past. 


  • Historical: Allows you to pick at start datetime and end datetime using a popup calendar.



When the chart is in Historical mode, an additional time axis appears. On this access you can narrow down what the chart is showing you to specific points of interest by clicking and dragging the mouse along the axis.


Pan and Zoom

In this mode you can drag or swipe to pan forward and backward in time. On desktop device, clicking and dragging will pan across the chart. The mouse wheel will zoom. On mobile/touchscreen device, tapping and dragging will pan. The "pinch" and "spread" gestures will zoom. 

Zoom reset

To reset the zoom to default, click the zoom reset icon.
X Trace

Tap to place a vertical line, which shows an interpolated value for each pen on the plot. To clear the X Trace values, select Clear X Trace from the More Menu. 

Range Brush

Allows you to select a range of data on the chart. While a brush is active, the Pen Control Table will show aggregate summaries for the pens over the selected range. Multiple brushes will create multiple aggregation summaries. 

Individual selections can be removed by clicking the trashcan icon in the Pen Control Table, or by selecting Clear Range Brushes on the More Menu. 

Annotate

Click near a trend, line, or data point and you'll have the opportunity to add an annotation. The annotation is stored with the Tag Historian system, on the sqlth_annotations table. Annotations can edited by clicking the Edit  icon and deleted by clicking the Delete icon, which appear when hovering over the annotation. 

Full Screen

Puts the chart into full screen mode.

Settings

Opens the Chart settings panel, allowing users to modify various aspects of the chart from the session. There are four tabs: Axes, Pens, Plots, and Columns.

TabDescription
Axes

You can add or delete Axes here, or click the Edit icon to edit an existing axis.  The options are the same on the Add Axis and Edit Axes screens.

 Click here to see the Edit Axes options. 

Pens  

You can add or delete pens here or click the Edit icon to edit an existing pen. The options are the same on the Add Pen and Edit Pen screens.

 Click here to see an image of the Edit Pens options

Plots

You can add or delete plots here or click the Edit icon to edit an existing plot. The options are the same on the Add Plot and Edit Plot screens.

 Click here to see an image of the Edit Plots options

Columns

The Columns Chart Settings tab has options for datapoints to display on the Pen Control Panel and datapoints to display on the Range Brush Table.

 Click here to see an image of the Columns options

More Menu

Provides additional contextual options, depending on the current state of the chart. The button to open the More Menu only appears if there is at least one pen on the chart. The following options are available:

OptionDescription
ExportTakes the datapoints visible on the various plots, and exports them to a CSV. 
PrintOpens print dialog box so user can print the chart.
Clear X TracesClears all X Traces on the chart. Only appears when there are X Traces on the chart. 
Clear Range BrushesClears all range brushes on the chart. Only appears when there are brush selections on the chart. 
Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
config

Configuration for the data feeding the chart. 

 Click here for the config properties
NameDescriptionProperty Type
tagBrowserStartPath

A path to a nested Tag History provider structure from which browsing will start. The path is expected to contain key-value pairs separated by ":/" characters. Example:

histprov:Sample_SQLite_Database:/drv:My_Gateway:My_Tag_Provider:/tag:My_Folder/Another_Folder
  • histprov - The name of the Tag Historian Provider
  • drv - The historian driver, which is typically a combination of a gateway name and tag provider name separated by a colon. Example: gateway:tagProvider 
  • tag - A path to a node that has children. Typically should lead to either a folder or the root node of a UDT instance. If omitted, then the path will lead to the root of the drv, 

While providing a path to this property, the tag component can be omitted, which will set the starting path for the Tag Browser panel to the root of a particular driver. For example:

histprov:Sample_SQLite_Database:/drv:My_Gateway:My_Tag_Provider:/
value: string
modeThe type of query that is being made against the data source. Options are realtime or historical. value: string
refreshRateDuration (in milliseconds) that data will be queried for updated results. (realtime mode only)value: numeric
pointCountNumber of data points returned for the selected time range.value: numeric
startDateStart date for a historical data query. (historical mode only)value: string
endDateEnd date for a historical data query. (historical mode only)value: string
dateFormatThe date format displayed when in historical mode using a MomentJS date string (https://momentjs.com). (historical mode only)value: string
timeFormatThe time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com). (historical mode only)value: string
rangeSelectorPenThe pen that will drive the data display of the range selector.  (historical mode only)value: string
unitOfTimeTime unit used for a realtime data query.  (realtime mode only)value: numeric
measureOfTimeTime measurement used for a realtime data query. Options are seconds, minutes, hours, days, weeks, months, or years.  (realtime mode only)value: string
responsiveDesignWidth

A number (in pixels) that will be used as the switch over width to the responsive design for the chart so it fits better on mobile devices. The mobile breakpoint is 750px, and is configurable.

value: numeric
visibility

This feature is new in Ignition version 8.1.2
Click here to check out the other new features

Settings to show/hide elements within the component interface.

 Click here for the visibility properties...
NameDescriptionProperty Type
showTagBrowserFlag representing the visible state of the Tag Browser. Toggling this property will show or hide the Tag Browser. value: boolean
showDateRangeSelectorFlag representing the visible state of the Date Range Selector. Toggling this property will show or hide the Date Range Selector.value: boolean
showPenControlDisplayFlag representing the visible state of the Pen Control display. Toggling this property will show or hide the Pen Control display. value: boolean
buttons

Settings to show/hide the buttons used in the interface

 Click here to see buttons properties...
NameDescriptionProperty Type
showTagBrowserButtonFlag representing the visible state of the "Open Tag Browser" and "Close Tag Browser" buttons.value: boolean
showPanZoomButtonFlag representing the visible state of the "Pan/Zoom" toggle button.value: boolean
showXTraceButtonFlag representing the visible state of the "X Trace" toggle button.value: boolean
showRangeBrushButtonFlag representing the visible state of the "Range Brush" toggle button.value: boolean
showAnnotationButtonFlag representing the visible state of the "Annotation" toggle button. value: boolean
showFullscreenButtonFlag representing the visible state of the "Fullscreen" toggle button.value: boolean
showSettingsButtonFlag representing the visible state of the "Settings" toggle button.value: boolean
showMoreButtonFlag representing the visible state of the "Show More" toggle button. value: boolean
object
object
export

This feature is new in Ignition version 8.1.2
Click here to check out the other new features

Settings to control the format of data exported from the chart via the More button's "Export" option. 

 Click here for the export properties...
NameDescriptionProperty Type
dateFormatThe date format of the exported data. See https://numeraljs.com for formats.value: string
timeFormatThe time format of the exported data. See https://momentjs.com for formats.value: string


object
object
interaction

Configuration for the presentation of, and interaction with, chart data.

NameDescriptionProperty Type
modeCurrent user interaction mode of the chart. Options are panAndZoom, xTrace, rangeBrush, or annotation.value: string
fullscreenFlag representing the full screen presentation mode of the chart.value: boolean
xTrace

Configuration to build the xTrace display (mode must be set to xTrace).

 Click here to see the xTrace properties
NameDescriptionProperty Type
valuesAn array of read-only timestamp values representing the visible x-trace positions.array
infoBox

Configuration to build the box portion of the x-trace display.

 Click here to see the infoBox properties
NameDescriptionProperty Type
visibleWhether or not the box is visible.value: boolean
showTimeWhether or not the time value above the box is visible.value: boolean
widthThe width of the box.value: numeric
dataFormat

A numeral.js data format for displaying the data for this axis. See https://numeraljs.com for formats.

This feature is new in Ignition version 8.1.2
Click here to check out the other new features

As of Ignition 8.1.2, setting the dataFormat property to an empty string will result in no formatting being applied to the value. Useful in cases where a binding is returning the data in a preformatted state. 

value:string
dateFormatThe date format displayed when in historical mode using a MomentJS date string (https://momentjs.com).  value: string
timeFormatThe time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com).  value: string
stroke

A configuration object describing the properties that will be applied to the stroke of the box.

NameDescriptionProperty Type
colorThe color to apply to the line stroke, if applicable.color
widthThe width to apply to the line stroke, if applicable.value: numeric
opacityThe opacity to apply to the line stroke, if applicable.value: numeric
dashArrayThe spacing to apply between dashes of the line stroke, if applicable.value: numeric


object
fill

The fill configuration.

NameDescriptionProperty Type
colorThe color to apply to the trend fill, if applicable.color
opacityThe opacity to apply to the trend fill, if applicable.value: numeric


object
styleStyle for the box. Full menu of style options is available. You can also specify a style class.object
object
line

Configuration to build the vertical line portion of the x-trace display.

 Click here to see the line properties
NameDescriptionProperty Type
visibleWhether or not the line is visible.value: boolean
colorThe color to apply to the line stroke, if applicable.color
widthThe width to apply to the line stroke, if applicable.value: numeric
opacityThe opacity to apply to the line stroke, if applicable.value: numeric
dashArrayThe spacing to apply between dashes of the line stroke, if applicable.value: numeric
styleStyle for the box. Full menu of style options is available. You can also specify a style class.object
object 
value: object
rangeBrush

Configuration to build the range brush display (mode must be set to rangeBrush).

 Click here to see the rangeBrush properties
NameDescriptionProperty Type
values

An array of config objects to build each range brush.

NameDescriptionProperty Type
startThe start timestamp position.value: string
endThe end timestamp position.value: string
array
active

Configuration to build the active range brush display.

NameDescriptionProperty Type
colorThe color of the active range brush.color
opacityThe opacity of the active range brush.value: numeric
styleStyle settings for the active range brush. Full menu of style options is available. You can also specify a style class.object
object
inactive

Configuration to build the inactive range brush displays.

NameDescriptionProperty Type
colorThe color of the inactive range brush.color
opacityThe opacity of the inactive range brush.value: numeric
styleStyle settings for the inactive range brush. Full menu of style options is available. You can also specify a style class.object
object

annotation

Configuration to build the annotation display (mode must be set to annotation).

 Click here to see the annotation properties



infoBox

Configuration to build the box portion of the annotion display.

 Click here to see the infoBox properties
NameDescriptionProperty Type
visibleWhether or not the box is visible.value: boolean
showTimeWhether or not the time value above the box is visible.value: boolean
widthThe width of the box.value: numeric
dateFormatThe date format displayed when in historical mode using a MomentJS date string (https://momentjs.com).  value: string
timeFormatThe time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com).  value: string
stroke

A configuration object describing the properties that will be applied to the stroke of the box.

NameDescriptionProperty Type
colorThe color to apply to the line stroke, if applicable.color
widthThe width to apply to the line stroke, if applicable.value: numeric
opacityThe opacity to apply to the line stroke, if applicable.value: numeric
dashArrayThe spacing to apply between dashes of the line stroke, if applicable.value: numeric


object
fill

The fill configuration.

NameDescriptionProperty Type
colorThe color to apply to the trend fill, if applicable.color
opacityThe opacity to apply to the trend fill, if applicable.value: numeric


object
styleStyle for the box. Full menu of style options is available. You can also specify a style class.object
object
line

Configuration to build the connecting line portion of the annotation display.

 Click here to see the line properties
NameDescriptionProperty Type
visibleWhether or not the line is visible.value: boolean
colorThe color to apply to the line stroke, if applicable.color
widthThe width to apply to the line stroke, if applicable.value: numeric
opacityThe opacity to apply to the line stroke, if applicable.value: numeric
dashArrayThe spacing to apply between dashes of the line stroke, if applicable.value: numeric
styleStyle for the box. Full menu of style options is available. You can also specify a style class.object
object
dot

Configuration to build the dot portion of the annotation display.

NameDescriptionProperty Type
visibleWhether or not the dot portion is visible.value: boolean
colorThe color to apply to the dot.color
radiusThe radius of the dot.value: numeric
opacityThe opacity of the dot.value: numeric
stykeThe style settings for the dot. Full menu of style options is available. You can also specify a style class.object
object

object
axes

Collection of predefined axes against which the data visualizations can be drawn.

 Click here for the axes properties
NameDescriptionProperty Type
nameThe name of the axis.value: string
positionThe side of the plot upon which the axis should be drawn. Options are left or right.value: string
widthThe width of the axis.value: numeric
colorThe color of the Y axis vertical bar.color
dataFormatA numeral.js data format for displaying the data displayed in the pen control portion of the chart for this axis. See https://numeraljs.com for formats.value: string
range

Configuration for the upper and lower limits of the axis.

NameDescriptionProperty Type
autoIf true, the minimum and maximum displaying values for the axis will be auto calculated.value: boolean
minMinimum range value. If no value is provided, a minimum value will be calculated from the data bound to this axis.value: numeric
maxMaximum range value. If no value is provided, a maximum value will be calculated from the data bound to this axis.value: numeric
object
label

The label configuration for the Y axis.

NameDescriptionProperty Type
textThe text of the Y axis label.value: string
offsetOffset the Y axis label from its default position. This enables you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. Value may be positive or negative. Default is 0.value: numeric
fontFont configuration for the Y access label. Font size and color options for the font.object
styleStyle for the Y access label. Full menu of style options is available. You can also specify a style class.object
object
tick

Tick configuration.

NameDescriptionProperty Type
colorThe color of the ticks.color
label

Tick label configuration

NameDescriptionProperty Type

font

Label font configuration. Font size and color options for the font.object
styleStyle for the tick label.  Full menu of style options is available. You can also specify a style class.object
object
styleStyle for the tick.  Full menu of style options is available. You can also specify a style class.object
object
styleStyle for the display. Full menu of style options is available. You can also specify a style class.object



array
pens

Visual representation of each active item

 Click here for the pens properties
NameDescriptionProperty Type
nameName of the pen.value: string
visibleWhether or not the pen is visible on the chart.value: boolean
enabledAvailability of the pen on the chart and pen configuration panel.value: boolean
selectableFlag to allow the pen to be responsive to user selection.value: boolean
axisName of an axis in the "axes" array to plot against. If left blank, a default axis will be created based on data values.value: string
plotThe plot to which this pen is bound.value: numeric
display

Configuration that drives the display of the pen.

NameDescriptionProperty Type
typeThe type of chart to be built. Options are line, area, bar, or scatter.value: string
interpolation

Type of curve that should be used to draw the line portion of the chart. Options are: curveBasis, curveBasisOpen,curveCardinal, curveCardinalOpen, curveCatmullRom, curveCatmullRomOpen, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, or curveStepBefore.

More information on the interpolation methods above can be found in D3's documentation

value: string
breakLineIf true, the line will be broken on either side of bad/missing data values. If false, bad/missing data values are removed and the adjoining points are connected.value: boolean
styles

Settings for the display when it is normal, highlighted, selected, or muted.

NameDescriptionProperty Type
normalAn object providing style configuration for the “normal” state (no user interaction) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. object
highlightedAn object providing style configuration for the “highlighted” state (mouse hover) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The highlighted property uses the same configuration properties as the 'normal' property above.object
selectedAn object providing style configuration for the “selected” state (mouse click) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties.object
mutedAn object providing style configuration for the “muted” state (non selected) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. object

Each of these four display settings has the same set of properties.

 Click here to see the properties
NameDescriptionProperty Type
stroke

A configuration object describing the properties that will be applied to the stroke of the trend type being displayed (if applicable). The line, and area trend types will have these styles applied to them.

NameDescriptionProperty Type
colorThe color to apply to the line stroke, if applicable.color
widthThe width to apply to the line stroke, if applicable.value: numeric
opacityThe opacity to apply to the line stroke, if applicable.value: numeric
dashArrayThe spacing to apply between dashes of the line stroke, if applicable.value: numeric


object
fill

The fill configuration.

NameDescriptionProperty Type
colorThe color to apply to the trend fill, if applicable.color
opacityThe opacity to apply to the trend fill, if applicable.value: numeric


object
object
object
data
NameDescriptionProperty Type
sourceSource of the data behind the pen.value: string
aggregateModeMode to use to group the data. Options are: default, Average, MinMax, SimpleAverage, Sum, Minimum, Maximum, DurationOn, DurationOff, CountOn, CountOff, Count, Range, Variance, StdDev, PctGood, or PctBad.value: string
object
array
plots

A plot represents a row containing one or more pens.

 Click here for the pens properties
NameDescriptionProperty Type
relativeWeightRatio between all plots.value: numeric
colorBackground color of the plot.color
markers

An array of markers that can be added to the plot to better visualize the data being displayed.

NameDescriptionProperty Type
typeType of marker to add to the plot. Options are line or band.value: string
axisName of the axis against which the marker should be drawn. This must be specified for the marker to be drawn.value: string
valueValue where the line marker should be drawn.value: numeric
display

Configuration for the display of the marker. 

 Click here to see the display properties
NameDescriptionProperty Type
colorColor of the markercolor
widthWidth of the line.value: numeric
opacityOpacity of the markervalue: numeric
dashArrayDashed appearance of the marker.value: numeric
label

Configuration for the label of the marker.

NameDescriptionProperty Type
textText for the label.value: string
positionThe position of the label relative to the line. Options are right or left.value: string
fontLabel font configuration. Font size and color options for the font.object
styleStyle for the label. Full menu of style options is available. You can also specify a style classobject
object
styleStyle for the display. Full menu of style options is available. You can also specify a style class.object
object
array
style

Style for the individual plot. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class

object
array
dataColumns

Configuration for the data columns that can be shown in tabular displays throughout the chart.

NameDescriptionProperty Type
penControl

Configuration for the data columns that can display for pens.

 Click here for the penControl properties
NameDescriptionProperty Type
currentValueShow the "current value" column for the pen based on the time range.value: boolean
minimumShow the "minimum" column for the pen based on the time range.value: boolean
maximumShow the "minimum" column for the pen based on the time range.value: boolean
averageShow the "average" column for the pen based on the time range.value: boolean
axisShow the "axis" column for the pen.value: boolean
plotShow the "plot" column for the pen.value: boolean
xTraceShow the "xTrace" column for the pen based on the time range.value: boolean
object
rangeSelection

Configuration for the data columns that can display for the range brush.

 Click here for the rangeSelection properties
NameDescriptionProperty Type
firstShow the "first" column for the pen based on the time range.value: boolean
lastShow the "last" column for the pen based on the time range.value: boolean
averageShow the "average" column for the pen based on the time range.value: boolean
minimumShow the "minimum" column for the pen based on the time range.value: boolean
maximumShow the "minimum" column for the pen based on the time range.value: boolean
medianShow the "median" column for the pen based on the time range.value: boolean
deltaShow the "delta" column for the pen based on the time range.value: boolean
sumShow the "median" column for the pen based on the time range.value: boolean
uclShow the "UCL" column for the pen based on the time range.value: boolean
lclShow the "LCL" column for the pen based on the time range.value: boolean
standardDeviationShow the "standardDeviation" column for the pen based on the time range.value: boolean
object

title

Configuration for the title of the chart.

NameDescriptionProperty Type
visibleWhether or not the title is visible.value: boolean
textThe text for the title.value: string
fontTitle font configuration. Font size and color options for the font.object
styleStyle for the display. Full menu of style options is available. You can also specify a style class.object
object
timeAxis

Configuration for the time axis (X axis) of the chart.

NameDescriptionProperty Type
visibleWhether or not the time axis is visible.value: boolean
tickCountThe number of ticks.value: numeric
heightThe height of the time axis.value: numeric
colorThe color of the axis.color
tick

Tick configuration.

NameDescriptionProperty Type
colorThe color of the ticks.color
label

Tick label configuration

NameDescriptionProperty Type
angledWhether or not the tick labels are angled.value: boolean
formatDate/time format displayed by each tick using a MomentJS data string (https://momentjs.com).value: string

font

Label font configuration. Font size and color options for the font.object
styleStyle for the tick label.  Full menu of style options is available. You can also specify a style class.object
object
styleStyle for the tick.  Full menu of style options is available. You can also specify a style class.object
object
styleSets a style for this timeAxis. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

legend

Configuration for the display of the legend for the chart.

NameDescriptionProperty Type
visibleWhether or not the legend is visible.value: boolean
object
styleSets a style for this chart. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.



  • No labels