ErgoTechWiki

User Tools

Site Tools

Trace:
mistudio:design_editor:charts:linechart

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:linechart [2026/09/18 13:36] – removed - external edit (Unknown date) 127.0.0.1mistudio:design_editor:charts:linechart [2026/09/18 15:23] (current) – tputman
Line 1: Line 1:
 +===== LineChart =====
  
 +com.ergotech.vib.graphics.javascript.charting.LineChart
 +
 +==== Image Examples ====
 +
 +| {{:mistudio:graphics:charts:pasted:20260701-174614.png?40|LineChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260701-174712.png?200|LineChart graphic example}} |
 +| //LineChart in the graphics palette.// | //LineChart graphic example.// |
 +
 +==== Overview ====
 +
 +The LineChart graphic is a chart graphic used to display one or more data series as lines.
 +
 +LineChart is commonly used for trends, changing values, time-based data, x/y data, and dashboard displays.
 +
 +The current LineChart uses chart configuration properties such as **Series**, **YAxis**, **Use2DInput**, **ZoomStyle**, and optional reference line settings.
 +
 +==== Common Uses ====
 +
 +  * Displaying trends over time
 +  * Showing changing process values
 +  * Plotting x/y data
 +  * Displaying multiple data series
 +  * Building dashboards with live or test data
 +  * Comparing multiple values on the same chart
 +  * Showing reference lines such as center, upper, or lower limit lines
 +
 +==== Input Behavior ====
 +
 +LineChart can receive data through **valueInput** or through individual line input ports, depending on the **Use2DInput** setting.
 +
 +When **Use2DInput** is checked, LineChart uses **valueInput** for array-style or two-dimensional chart data.
 +
 +When **Use2DInput** is unchecked, LineChart exposes 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, LineChart 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 single-series chart testing.
 +
 +==== Output Behavior ====
 +
 +LineChart is used as a display graphic.
 +
 +LineChart does not provide a default user-input output workflow.
 +
 +==== LineChart-Specific Behavior ====
 +
 +LineChart displays data using one or more configured line series.
 +
 +LineChart-specific settings include:
 +
 +  * **Name** Sets the name of the LineChart 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 exposes 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.
 +  * **YAxis** Configures the chart y-axis.
 +  * **ZoomStyle** Sets the chart zoom style.
 +  * **Bad Qual. Indicator** Controls the indicator used when bad quality data is received.
 +  * **Visible** Controls whether the LineChart 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, LineChart 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, LineChart 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 ====
 +
 +LineChart 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 LineChart should have matching line series configured for those values.
 +
 +==== Adding a Line Series ====
 +
 +To add another line series:
 +
 +  - Select the LineChart 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-185224.png?500|LineChart Series editor}}
 +
 +//LineChart 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 is the main test data source for LineChart.
 +
 +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 LineChart testing.
 +
 +Array data is useful when only a basic series of values needs to be plotted.
 +
 +When ArrayDataSource is connected to LineChart, the array elements are plotted together over one x-axis position or timestamp. This can create a simple line from the array values, but it does not provide full x/y column behavior.
 +
 +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, LineChart exposes 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 ====
 +
 +LineChart 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.
 +
 +==== Notes ====
 +
 +Use LineChart when data should be displayed as a 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 LineChart. String data sources are not appropriate for numeric chart input.
 +
 +LineChart is separate from BarChart, PieChart, DoughnutChart, and the other chart graphics. Use the chart type that matches the kind of data display needed.
 +
 +==== Related Pages ====
 +
 +  * [[mistudio:design_editor:start|MIStudio Design Editor]]
 +  * [[mistudio:design_editor:charts:start|Charts]]
 +  * [[mistudio:design_editor:charts:barchart|BarChart]]
 +  * [[mistudio:design_editor:charts:bigdatalinechart|BigDataLineChart]]
 +  * [[mistudio:design_editor:charts:radarchart|RadarChart]]
 +  * [[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