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: 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
| Name | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Background Color | The background color of the component. | Color | .background | Appearance |
| Border | The border surrounding this component. NOTE that the border is unaffected by rotation. | 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. | int | .cursorCode | Common |
| Data | The history data to draw in the sparkline chart. | Dataset | .data | Data |
| Data Quality | The data quality code for any tag bindings on this component. | int | .dataQuality | 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. | Color | .desiredRangeColor | Appearance |
| First Marker Color | The color of the first value marker. | 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. | 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. | 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. | Color | .foreground | Appearance |
| Line Width | The width of the sparkline. | float | .lineWidth | Appearance |
| Low Marker Color | The color of the low value marker. | 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 |
| 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
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
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
This component does not have any custom properties.
Examples
Sparkline Chart with Low and High Limits
| Property Name | Value |
|---|---|
| Range High | 100 |
| Range Low | 0 |
| Desired High | 75 |
| Desired Low | 40 |