ErgoTechWiki

User Tools

Site Tools

Trace:
mistudio:design_editor:charts:sparkchart

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
mistudio:design_editor:charts:sparkchart [2026/09/18 13:36] – removed - external edit (Unknown date) 127.0.0.1mistudio:design_editor:charts:sparkchart [2026/09/18 15:29] (current) – tputman
Line 1: Line 1:
 +===== SparkChart =====
  
 +com.ergotech.vib.graphics.javascript.charting.SparkChart
 +
 +==== Image Examples ====
 +
 +| {{:mistudio:graphics:charts:pasted:20260701-213116.png?40|SparkChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260701-213152.png?200|SparkChart graphic example}} |
 +| //SparkChart in the graphics palette.// | //SparkChart graphic example.// |
 +
 +==== Overview ====
 +
 +The SparkChart graphic is a chart 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.
 +
 +==== Common Uses ====
 +
 +  * 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
 +
 +==== Input Behavior ====
 +
 +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.
 +
 +==== Output Behavior ====
 +
 +SparkChart is used as a display graphic.
 +
 +SparkChart does not provide a default user-input output workflow.
 +
 +==== SparkChart-Specific Behavior ====
 +
 +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.
 +
 +==== Logic Ports ====
 +
 +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.
 +
 +==== Series Configuration ====
 +
 +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.
 +
 +==== Adding a Line Series ====
 +
 +To add another line series:
 +
 +  - Select the SparkChart graphic in the Design Editor.
 +  - In the Basic properties, open the **Series** property editor.
 +  - Click the **+** button in the Series editor.
 +  - Configure the new line series.
 +  - Set the line appearance, symbol options, Y-axis assignment, and animation setting.
 +  - Click **OK** to save the series settings.
 +
 +{{:mistudio:graphics:charts:pasted:20260706-193924.png?500|SparkChart Series editor}}
 +
 +//SparkChart Series editor with preview, appearance, symbol, axis, and animation settings.//
 +
 +==== Line Series 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.
 +
 +==== Multiple Series Behavior ====
 +
 +When using multiple data columns, each visible line needs a matching configured series.
 +
 +For example:
 +
 +<code>
 +One Y column    = one line series
 +Two Y columns   = two line series
 +Three Y columns = three line series
 +</code>
 +
 +If the chart only has one configured series, extra data columns can fail to appear as separate lines.
 +
 +==== Two-Dimensional Data Behavior ====
 +
 +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**.
 +
 +==== Array Data Behavior ====
 +
 +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**.
 +
 +==== Individual Line Inputs ====
 +
 +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:
 +
 +<code>
 +SineServer     -> line_0
 +RandomBoolean -> line_1
 +Constant       -> line_2
 +</code>
 +
 +This mode is useful when each line should be updated from a separate source.
 +
 +==== Reference Lines ====
 +
 +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.
 +
 +==== Tooltip Behavior ====
 +
 +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.
 +
 +==== Notes ====
 +
 +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.
 +
 +==== Related Pages ====
 +
 +  * [[mistudio:design_editor:start|MIStudio Design Editor]]
 +  * [[mistudio:design_editor:charts:start|Charts]]
 +  * [[mistudio:design_editor:charts:linechart|LineChart]]
 +  * [[mistudio:design_editor:charts:bigdatalinechart|BigDataLineChart]]
 +  * [[mistudio:design_editor:charts:barchart|BarChart]]
 +  * [[mistudio:getting_started:test_data_sources|Using Test Data Sources]]
 +  * [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki