===== 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]]