Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:


 

Description

The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. Sparklines were invented by Edward Tufte as a way to show a great deal of contextual information in a very small amount of space. Sparklines are typically used to display the recent history (up to current time) of a datapoint so that the viewer can quickly discern the recent trend of a datapoint: is it rising? falling? oscillating? etc..

To use a sparkline, bind its Data property either to a Tag Historian realtime query, or to a database query. There should be two columns in this dataset: the first one a date column, the second a number. Each row will become a datapoint on the chart, and the dataset must be sorted by time in ascending order.

Instead of using axes to convey scale, the sparkline can display a band of color across the back of the chart which indicates the desired operating range of the datapoint. In this way, it is instantly obvious when a value is in its expected range, above that range, or below. The sparkline automatically configures its internal axes based on the data given to it. To give it a fixed range, simply fill in the Range Highand Range Low properties.

Properties
NameDescriptionProperty TypeScriptingCategory
Background ColorThe background color of the component.Color.backgroundAppearance
BorderThe border surrounding this component. NOTE that the border is unaffected by rotation.Border.borderCommon
Border InsetThe amount of space to inset the chart inside its border.double.borderInsetAppearance
Chart MaxThe value that corresponds to the upper edge of the chart. (Read only. Usable in bindings and scripting.)Double.chartMaxUncategorized
Chart MinThe value that corresponds to the lower edge of the chart. (Read only. Usable in bindings and scripting.)Double.chartMinUncategorized
CursorThe mouse cursor to use when hovering over this component.int.cursorCodeCommon
DataThe history data to draw in the sparkline chart.Dataset.dataData
Data QualityThe data quality code for any tag bindings on this component.int.dataQualityData
Desired HighThe high value of the desired operating range. If left blank (null), no desired range band will be shown.Double.desiredHiData
Desired LowThe low value of the desired operating range. If left blank (null), no desired range band will be shown.Double.desiredLoData
Desired Range ColorThe color of the desired operating range band. Only used if the desired operating range is configured.Color.desiredRangeColorAppearance
First Marker ColorThe color of the first value marker.Color.firstMarkerColorMarkers
First Marker SizeThe size of the first value marker.double.firstMarkerSizeMarkers
First Marker StyleThe style of the first value marker.int.firstMarkerStyleMarkers
First ValueThe first (oldest) value in the dataset. (Read only. Usable in bindings and scripting.)Double.firstValueUncategorized
High Marker ColorThe color of the high value marker.Color.hiMarkerColorMarkers
High Marker SizeThe size of the high value marker.double.hiMarkerSizeMarkers
High Marker StyleThe style of the high value marker.int.hiMarkerStyleMarkers
Last Marker ColorThe color of the last value marker.Color.lastMarkerColorMarkers
Last Marker SizeThe size of the last value marker.double.lastMarkerSizeMarkers
Last Marker StyleThe style of the last value marker.int.lastMarkerStyleMarkers
Last ValueThe last (most recent) value in the dataset. (Read only. Usable in bindings and scripting.)Double.lastValueUncategorized
Line ColorThe color of the sparkline.Color.foregroundAppearance
Line WidthThe width of the sparkline.float.lineWidthAppearance
Low Marker ColorThe color of the low value marker.Color.loMarkerColorMarkers
Low Marker SizeThe size of the low value marker.double.loMarkerSizeMarkers
Low Marker StyleThe style of the low value marker.int.loMarkerStyleMarkers
Max ValueThe largest value in the dataset. (Read only. Usable in bindings and scripting.)Double.maxValueUncategorized
Min ValueThe smallest value in the dataset. (Read only. Usable in bindings and scripting.)Double.minValueUncategorized
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
Range HighA fixed value for the upper edge of the chart. If left blank (null), the upper range will be calculated automatically.Double.rangeHiData
Range LowA fixed value for the lower edge of the chart. If left blank (null), the lower range will be calculated automatically.Double.rangeLoData
StylesContains the component's styles.Dataset.stylesAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Scripting
Scripting Functions

This component does not have scripting functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

Event Handlers

This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

This event fires when the mouse enters the space over the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

This event fires when the mouse leaves the space over the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

This event fires when a mouse button is pressed down on the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

This event fires when a mouse button is released, if that mouse button's press happened over this component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

Fires when the mouse moves over a component after a button has been pushed.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

Fires when the mouse moves over a component, but no buttons are pushed.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.

Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.

.sourceThe component that fired this event
.newValueThe new value that this property changed to.
.oldValueThe value that this property was before it changed. Note that not all components include an accurate oldValue in their events.
.propertyNameThe name of the property that changed. NOTE: remember to always filter out these events for the property that you are looking for! Components often have many properties that change.
Customizers

This component does not have any custom properties.

Examples
Gallery
Sparkline Chart with Low and High Limits

Property NameValue
Range High100
Range Low0
Desired High75
Desired Low40
  • No labels