Vision - Sparkline Chart
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.
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, fill in the Range High and Range Low properties.
Properties​
| Name | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Background Color | The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | Color | .background | Appearance |
| Border | The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border. Note: The border is unaffected by rotation. Changed in 8.1.21 As of 8.1.21, the "Button Border" and "Other Border" options are removed. | Border | .border | Common |
| Border Inset | The amount of space to inset the chart inside its border. | double | .borderInset | Appearance |
| Chart Max | The value that corresponds to the upper edge of the chart. (Read only. Usable in bindings and scripting.) | Double | .chartMax | Uncategorized |
| Chart Min | The value that corresponds to the lower edge of the chart. (Read only. Usable in bindings and scripting.) | Double | .chartMin | Uncategorized |
| Cursor | The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. | int | .cursorCode | Common |
| Data | The history data to draw in the sparkline chart. | Dataset | .data | Data |
| Desired High | The high value of the desired operating range. If left blank (null), no desired range band will be shown. | Double | .desiredHi | Data |
| Desired Low | The low value of the desired operating range. If left blank (null), no desired range band will be shown. | Double | .desiredLo | Data |
| Desired Range Color | The color of the desired operating range band. Only used if the desired operating range is configured. See Color Selector. | Color | .desiredRangeColor | Appearance |
| First Marker Color | The color of the first value marker. See Color Selector. | Color | .firstMarkerColor | Markers |
| First Marker Size | The size of the first value marker. | double | .firstMarkerSize | Markers |
| First Marker Style | The style of the first value marker. | int | .firstMarkerStyle | Markers |
| First Value | The first (oldest) value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .firstValue | Uncategorized |
| High Marker Color | The color of the high value marker. See Color Selector. | Color | .hiMarkerColor | Markers |
| High Marker Size | The size of the high value marker. | double | .hiMarkerSize | Markers |
| High Marker Style | The style of the high value marker. | int | .hiMarkerStyle | Markers |
| Last Marker Color | The color of the last value marker. See Color Selector. | Color | .lastMarkerColor | Markers |
| Last Marker Size | The size of the last value marker. | double | .lastMarkerSize | Markers |
| Last Marker Style | The style of the last value marker. | int | .lastMarkerStyle | Markers |
| Last Value | The last (most recent) value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .lastValue | Uncategorized |
| Line Color | The color of the sparkline. See Color Selector. | Color | .foreground | Appearance |
| Line Width | The width of the sparkline. | float | .lineWidth | Appearance |
| Low Marker Color | The color of the low value marker. See Color Selector. | Color | .loMarkerColor | Markers |
| Low Marker Size | The size of the low value marker. | double | .loMarkerSize | Markers |
| Low Marker Style | The style of the low value marker. | int | .loMarkerStyle | Markers |
| Max Value | The largest value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .maxValue | Uncategorized |
| Min Value | The smallest value in the dataset. (Read only. Usable in bindings and scripting.) | Double | .minValue | Uncategorized |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Quality | The data quality code for any Tag bindings on this component. | int | .quality | Data |
| Range High | A fixed value for the upper edge of the chart. If left blank (null), the upper range will be calculated automatically. | Double | .rangeHi | Data |
| Range Low | A fixed value for the lower edge of the chart. If left blank (null), the lower range will be calculated automatically. | Double | .rangeLo | Data |
| Styles | Contains the component's styles. | Dataset | .styles | Appearance |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Scripting​
Component Functions​
This component does not have component functions associated with it.
Extension Functions​
This component does not have extension functions associated with it.
Event Handlers​
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page
Customizers​
Examples​
Sparkline Chart with Low and High Limits​
| Property Name | Value |
|---|---|
| Desired Range Color | 184,218,255 |
| Range High | 100 |
| Range Low | 0 |
| Desired High | 75 |
| Desired Low | 40 |