Top  | Previous | Next

Sparkline Chart
Three sparklines used to augment a numeric readout

Three sparklines used to augment a numeric readout

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 SQLTag 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 High and Range Low properties.

Properties

Appearance

Background Color

The background color of the component.

Scripting name

background

Data type

Color

Line Color

The color of the sparkline.

Scripting name

foreground

Data type

Color

Line Width

The width of the sparkline.

Scripting name

lineWidth

Data type

float

Desired Range Color

The color of the desired operating range band. Only used if the desired operating range is configured.

Scripting name

desiredRangeColor

Data type

Color

Border Inset

The amount of space to inset the chart inside its border.

Scripting name

borderInset

Data type

double

Styles

Contains the component's styles

Scripting name

styles

Data type

Dataset

Flags

bindable | expert

Common

Name

The name of this component.

Scripting name

name

Data type

String

Flags

bindable

Visible

If disabled, the component will be hidden.

Scripting name

visible

Data type

boolean

Flags

bindable

Border

The border surrounding this component. NOTE that the border is unaffected by rotation.

Scripting name

border

Data type

Border

Mouseover Text

The text that is displayed in the tooltip which pops up on mouseover of this component.

Scripting name

toolTipText

Data type

String

Cursor

The mouse cursor to use when hovering over this component.

Scripting name

cursorCode

Data type

int

Values

0

Default

1

Crosshair

2

Text

3

Wait

12

Hand

13

Move

4

SW Resize

5

SE Resize

6

NW Resize

7

NE Resize

8

N Resize

9

S Resize

10

W Resize

11

E Resize

Data

Data

The history data to draw in the sparkline chart.

Scripting name

data

Data type

Dataset

Flags

bindable

Range High

A fixed value for the upper edge of the chart. If left blank (null), the upper range will be calculated automatically.

Scripting name

rangeHi

Data type

Double

Range Low

A fixed value for the lower edge of the chart. If left blank (null), the lower range will be calculated automatically.

Scripting name

rangeLo

Data type

Double

Desired High

The high value of the desired operating range. If left blank (null), no desired range band will be shown.

Scripting name

desiredHi

Data type

Double

Flags

bindable

Desired Low

The low value of the desired operating range. If left blank (null), no desired range band will be shown.

Scripting name

desiredLo

Data type

Double

Flags

bindable

First Value

The first (oldest) value in the dataset

Scripting name

firstValue

Data type

Double

Flags

bindable | read-only

Last Value

The last (most recent) value in the dataset.

Scripting name

lastValue

Data type

Double

Flags

bindable | read-only

Min Value

The smallest value in the dataset.

Scripting name

minValue

Data type

Double

Flags

bindable | read-only

Max Value

The largest value in the dataset.

Scripting name

maxValue

Data type

Double

Flags

bindable | read-only

Chart Max

The value that corresponds to the upper edge of the chart.

Scripting name

chartMax

Data type

Double

Flags

bindable | read-only

Chart Min

The value that corresponds to the lower edge of the chart.

Scripting name

chartMin

Data type

Double

Flags

bindable | read-only

Data Quality

The data quality code for any tag bindings on this component.

Scripting name

dataQuality

Data type

int

Flags

bindable | expert

Markers

First Marker Color

The color of the first value marker

Scripting name

firstMarkerColor

Data type

Color

First Marker Style

The style of the first value marker

Scripting name

firstMarkerStyle

Data type

int

Values

-1

None

0

Circle

1

Empty Circle

2

Triangle1

3

Empty Triangle1

4

Triangle2

5

Empty Triangle2

6

Square

7

Empty Square

First Marker Size

The size of the first value marker

Scripting name

firstMarkerSize

Data type

double

Last Marker Color

The color of the last value marker

Scripting name

lastMarkerColor

Data type

Color

Last Marker Style

The style of the last value marker

Scripting name

lastMarkerStyle

Data type

int

Values

-1

None

0

Circle

1

Empty Circle

2

Triangle1

3

Empty Triangle1

4

Triangle2

5

Empty Triangle2

6

Square

7

Empty Square

Last Marker Size

The size of the last value marker

Scripting name

lastMarkerSize

Data type

double

Low Marker Color

The color of the low value marker

Scripting name

loMarkerColor

Data type

Color

Low Marker Style

The style of the low value marker

Scripting name

loMarkerStyle

Data type

int

Values

-1

None

0

Circle

1

Empty Circle

2

Triangle1

3

Empty Triangle1

4

Triangle2

5

Empty Triangle2

6

Square

7

Empty Square

Low Marker Size

The size of the low value marker

Scripting name

loMarkerSize

Data type

double

High Marker Color

The color of the high value marker

Scripting name

hiMarkerColor

Data type

Color

High Marker Style

The style of the high value marker

Scripting name

hiMarkerStyle

Data type

int

Values

-1

None

0

Circle

1

Empty Circle

2

Triangle1

3

Empty Triangle1

4

Triangle2

5

Empty Triangle2

6

Square

7

Empty Square

High Marker Size

The size of the high value marker

Scripting name

hiMarkerSize

Data type

double

Scripting

Events

The following event sets are fired by this component. See Component Event Handlers to learn more.

•mouse
•mouseMotion
•propertyChange

 

Scripting Functions

This component has no special scripting functions.