Skip to main content
Version: 8.1

Perspective - Sparkline

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 display a desired range, fill in the props.desired.high and props.desired.low properties.

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
pointsData points to plot. Accepts the following: May be a dataset, or an array of values or of objects containing X or Y coordinates. Also may be a string formatted with X and Y values separated by a comma.
  • An array of numbers containing X or Y coordinates.
  • A string of space delimited points where x and y are separated by a comma. For example: 0,20 1,35 2,15.
  • An array of objects, where each object contains an x and a y property, and where each property's value is a number.
  • A dataset of a single column of number type.
  • A dataset of two columns, the first representing the x value and the second column representing the y value. The first column can be either of type number or type date. Dates and Timestamps are converted to unix timestamps which is used as the x value.
array or dataset
colorColor of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
widthThickness of the line, in pixels.value: numeric
opacityThe opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".array
rangeSettings for the upper and lower edge of the chart.
  • high: A fixed value for the upper edge of the chart as a number.
  • low: A fixed value for the lower edge of the chart as a number.
  • object
    desiredThe desired operating range. Settings for the desired properties operating range.
  • high: The high value of the desired operating range. Value is numeric.
  • low: The low value of the desired operating range. Value is numeric.
  • stroke: Settings for the stroke. Options as follows:
    • width: Width of the line in pixels. Value is numeric.
    • opacity: Opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.
    • dashArray: The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the stroke length for the desired operating range) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2".
  • fill: Settings for the fill for the desired range. Options as follows:
    • opacity: Opacity of the fill ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.
    object
    markerSettings for the markers on the chart. Each of the following markers have the child properties listed in the marker Type Child Properties table below.
  • first: Settings for the first marker on the chart.
  • last: Settings for the last marker on the chart.
  • high: Settings for the high marker on the chart.
  • low: Settings for the low marker on the chart.
  • object
    styleSets a style for this component. 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

    marker Type Child Properties‚Äč

    The following properties apply to the first, last, high, and low markers on the chart.

    NameDescriptionProperty Type
    shapeShape of the marker used to indicate the first point. Options are circle, triangle, or square. Default is circle.value: string dropdown
    sizeSize of the marker, in pixels.value: numeric
    strokeSettings for the stroke for the first marker. Options as follows:
  • color: Color of the line. See Color Selector.
  • width: Width of the line in pixels. Value is numeric.
  • opacity: Opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.
  • dashArray: The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the stroke length for the desired operating range) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2".
  • object
    fillSettings for the fill for the first marker. Options as follows:
  • color: Fill color of the desired range. See Color Selector.
  • opacity: Opacity of the fill ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.
  • object
    styleSets a style for this component. 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

    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.

    Example‚Äč

    This example demonstrates what changes to the various marker properties can do. In addition, the desired range has been enabled.

    PropertyValue
    props.width1
    props.dashArray6 2 2 2
    props.desired.high60
    props.desired.low25
    props.desired.stroke.color#AAAAAA
    props.desired.stroke.width3
    props.desired.stroke.opacity3
    props.desired.fill.color#CCFFF
    props.desired.fill.opacity4
    props.marker.first.shapecircle
    props.marker.first.size10
    props.marker.first.stroke.color#000000
    props.marker.first.fill.color#00AC00
    props.marker.last.shapetriangle
    props.marker.last.size20
    props.marker.last.stroke.color#000000
    props.marker.last.fill.color#EF4D4D
    props.marker.low.shapesquare
    props.marker.low.size7
    props.marker.low.stroke.color#000000
    props.marker.low.fill.color#0D9D9
    props.marker.high.shapesquare
    props.marker.high.size7
    props.marker.high.stroke.color#000000
    props.marker.high.fill.color#FF47FF
    props.style.backgroundColor#E2F1Fa
    props.style.borderStyleoutset
    props.style.borderWidth7px
    props.style.borderColor#9BBFBF