ErgoTechWiki

com.ergotech.vib.graphics.javascript.charting.SparkChart

The SparkChart graphic is a Charts graphic used to display compact line-based trend data.

SparkChart is similar to LineChart, but it is useful when a smaller trend display is needed.

SparkChart can show one or more line series and is commonly used for dashboard summary views, quick trend indicators, and compact data displays.

• Displaying compact trend data
• Showing quick value changes over time
• Displaying multiple small line series
• Building dashboard summary graphics
• Comparing simple trend lines
• Showing reference lines such as center, upper, or lower limit lines

SparkChart can receive input through valueInput or through individual line input ports, depending on the Use2DInput setting.

When Use2DInput is checked, SparkChart uses valueInput for array-style or two-dimensional chart data.

When Use2DInput is unchecked, SparkChart uses individual line input ports such as `line_0`, `line_1`, and additional ports based on the configured series.

The input can come from a data source, Constant, BroadcastServer, or another logic component.

For full chart behavior, SparkChart works best with table-style or array-style data sources.

Common test data sources include:

• TwoDimensionalDataSource
• ArrayDataSource

TwoDimensionalDataSource is useful for testing x/y values, timestamps, and multiple data columns.

ArrayDataSource is useful for simpler SparkChart testing.

SparkChart is used as a display graphic.

SparkChart does not provide a default user-input output workflow.

SparkChart displays compact trend data using one or more configured line series.

SparkChart-specific settings include:

• Name Sets the name of the SparkChart graphic.
• CenterLine Configures an optional center reference line.
• High Value Sets the high value used for chart scaling or range behavior.
• LclLine Configures an optional lower control limit reference line.
• Low Value Sets the low value used for chart scaling or range behavior.
• Series Configures the chart line series.
• TopSpacing Sets spacing above the chart area.
• UclLine Configures an optional upper control limit reference line.
• Use2DInput Controls the chart input mode. When checked, the chart uses valueInput for array-style or two-dimensional data. When unchecked, the chart uses individual line input ports such as `line_0`, `line_1`, and additional ports based on the configured series.
• Use Color Controls whether incoming colors are used when supported.
• UseTooltip Controls whether chart tooltips are shown.
• ZoomStyle Sets the chart zoom style.
• Bad Qual. Indicator Controls the indicator used when bad quality data is received.
• Visible Controls whether the SparkChart is shown.
• Warning Qual. Indicator Controls the indicator used when warning or transitional quality data is received.

The visible Logic Editor ports depend on the Use2DInput setting.

When Use2DInput is checked, SparkChart uses this port:

• valueInput

Use valueInput with TwoDimensionalDataSource or ArrayDataSource when the chart should receive array-style or two-dimensional chart data through one connection.

When Use2DInput is unchecked, SparkChart uses individual line input ports such as:

• line_0
• line_1

The available line input ports depend on the chart configuration and the configured series.

Use individual line input ports when each line series should be updated from a separate scalar data source.

SparkChart uses the Series property to define the line series displayed on the chart.

A series controls how one line appears on the chart.

The Series editor includes a live preview and grouped settings for appearance, symbols, axis selection, and animation.

When a data source provides multiple data columns, matching series should be configured so each column can display as a separate line.

For example, if a TwoDimensionalDataSource provides multiple Y columns, the SparkChart should have matching line series configured for those values.

To add another line series:

1. Select the SparkChart graphic in the Design Editor.
2. In the Basic properties, open the Series property editor.
3. Click the + button in the Series editor.
4. Configure the new line series.
5. Set the line appearance, symbol options, Y-axis assignment, and animation setting.
6. Click OK to save the series settings.

SparkChart Series editor with preview, appearance, symbol, axis, and animation settings.

The Series editor includes these sections:

• Preview Shows a preview of the configured line series.
• Appearance Controls the visual style of the line.
• Symbols Controls whether point symbols are shown on the line.
• Axis Selects which Y-axis the line series uses.
• Animation Controls whether animation is enabled for the line series.

The Appearance section includes:

• Line Color Sets the color of the line series.
• Line Width Sets the thickness of the line.
• Line Style Sets the line style, such as solid.

The Symbols section includes:

• Show Symbols on Graph Controls whether point symbols are shown on the line.
• Symbol Icon Sets the symbol shape.
• Symbol Size Sets the size of the symbol.
• Use Line Color for Symbol Uses the line color for the symbol.
• Symbol Color Sets a separate symbol color when line color is not used.

The Axis section includes:

• Y Axis Selects which Y-axis the line series uses.

The Animation section includes:

• Animation Controls whether the line series uses animation.

When using multiple data columns, each visible line needs a matching configured series.

For example:

One Y column  = one line series
Two Y columns = two line series
Three Y columns = three line series

If the chart only has one configured series, extra data columns can fail to appear as separate lines.

TwoDimensionalDataSource can be used for SparkChart testing.

With timestamp behavior enabled on the data source, the chart can display time-based data.

With timestamp behavior disabled, the first data column can be used as the x-axis, and additional columns can be used as y-series data.

Multiple y-series require matching entries in the Series configuration.

Use TwoDimensionalDataSource with Use2DInput checked and connected to valueInput.

ArrayDataSource can be used for simpler SparkChart testing.

Array data is useful when only a basic series of values needs to be plotted.

Use ArrayDataSource with Use2DInput checked and connected to valueInput.

For full x/y behavior, timestamp behavior, or multiple data columns, use TwoDimensionalDataSource.

When Use2DInput is unchecked, SparkChart uses individual line input ports such as `line_0`, `line_1`, and additional ports based on the configured series.

These ports allow scalar data sources to update individual line series.

For example:

SineServer -> line_0
RandomBoolean -> line_1
Constant -> line_2

This mode is useful when each line should be updated from a separate source.

SparkChart includes optional reference line properties:

• CenterLine
• LclLine
• UclLine

These properties are used for chart reference lines such as center, lower control limit, and upper control limit lines.

Reference line settings are chart configuration values and should be edited through the chart property controls.

The UseTooltip property controls whether SparkChart displays tooltip information when the user hovers over the chart.

Tooltips are useful for showing exact values while keeping the chart compact.

Use SparkChart when data should be displayed as a compact line or trend.

Use TwoDimensionalDataSource for full chart testing with x/y values, timestamps, and multiple columns.

Use ArrayDataSource for simpler single-series testing.

Use Use2DInput checked with valueInput for array-style or two-dimensional chart data.

Use Use2DInput unchecked with individual line inputs when each line series should receive a separate scalar value.

Use numeric or array-style data sources with SparkChart. String data sources are not appropriate for numeric chart input.

LineChart is better for larger trend displays. SparkChart is better when a compact trend graphic is needed.

• Charts
• LineChart
• BigDataLineChart
• BarChart
• Using Test Data Sources
• Connecting a Data Source to a Graphic
• MIStudio Graphics