===== ParetoChart =====

com.ergotech.vib.graphics.javascript.charting.ParetoChart

==== Image Examples ====

| {{:mistudio:graphics:charts:pasted.png?40|ParetoChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260706-195520.png?200|ParetoChart graphic example}} |
| //ParetoChart in the graphics palette.// | //ParetoChart graphic example.// |

==== Overview ====

The ParetoChart graphic is a chart graphic used to display values as bars with an optional cumulative line.

ParetoChart combines bar-style comparison with line-style cumulative behavior.

This makes it useful for showing which categories contribute the most to a total and how the cumulative value changes across the chart.

==== Common Uses ====

  * Displaying Pareto-style analysis
  * Comparing category values
  * Showing ranked bar values
  * Displaying cumulative totals or cumulative percentages
  * Building dashboard summary graphics
  * Showing which categories contribute most to a result
  * Combining bar data with a cumulative line

==== Input Behavior ====

ParetoChart can receive input through **valueInput** or through individual chart input ports, depending on the **Use2DInput** setting.

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

When **Use2DInput** is unchecked, ParetoChart uses individual input ports such as `bar_0` and `line_0`.

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

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

Common test data sources include:

  * **TwoDimensionalDataSource**
  * **ArrayDataSource**

**TwoDimensionalDataSource** is useful for testing category values, bar values, cumulative line values, timestamps, and multiple data columns.

**ArrayDataSource** can be used for simpler ParetoChart testing.

==== Output Behavior ====

ParetoChart is used as a display graphic.

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

==== ParetoChart-Specific Behavior ====

ParetoChart displays bar values with an optional cumulative line.

ParetoChart-specific settings include:

  * **Name** Sets the name of the ParetoChart graphic.
  * **CenterLine** Configures an optional center reference line.
  * **CumulativeAsPercent** Controls whether the cumulative line is displayed as a percentage.
  * **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.
  * **MaxBars** Sets the maximum number of bars displayed.
  * **Series** Configures the bar and cumulative line series.
  * **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 input ports such as `bar_0` and `line_0`.
  * **Use Color** Controls whether incoming colors are used when supported.
  * **UseTooltip** Controls whether chart tooltips are shown.
  * **XAxis** Configures the chart x-axis.
  * **YAxis** Configures the chart y-axis.
  * **Bad Qual. Indicator** Controls the indicator used when bad quality data is received.
  * **Visible** Controls whether the ParetoChart 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, ParetoChart 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, ParetoChart uses individual input ports such as:

  * **bar_0**
  * **line_0**

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

Use individual input ports when the bar series and cumulative line series should be updated from separate scalar data sources.

==== Series Configuration ====

ParetoChart uses the **Series** property to define the bar series and cumulative line series displayed on the chart.

The Series editor includes a live preview and separate tabs for:

  * **Bar**
  * **Cumulative Line**

The **Bar** tab controls how the bar series appears.

The **Cumulative Line** tab controls how the cumulative line series appears.

==== Adding or Editing a Series ====

To edit the ParetoChart series:

  - Select the ParetoChart graphic in the Design Editor.
  - In the Basic properties, open the **Series** property editor.
  - Select the **Bar** tab or **Cumulative Line** tab.
  - Configure the selected series.
  - Set the appearance, layout, axis assignment, and animation settings.
  - Click **OK** to save the series settings.

{{:mistudio:graphics:charts:pasted:20260706-195653.png?500|ParetoChart Series editor}}

//ParetoChart Series editor with Bar and Cumulative Line tabs.//

==== Bar Series Settings ====

The **Bar** tab includes these sections:

  * **Preview** Shows a preview of the configured bar series.
  * **Appearance** Controls the visual style of the bars.
  * **Layout** Controls spacing between bars and bar categories.
  * **Axis** Selects which Y-axis the bar series uses.
  * **Animation** Controls whether animation is enabled for the bar series.

The **Appearance** section includes:

  * **Bar Color** Sets the color of the bar series.

The **Layout** section includes:

  * **Bar Gap** Sets the spacing between bars in the same category.
  * **Bar Category Gap (%)** Sets the spacing between bar categories as a percentage.

The **Axis** section includes:

  * **Y Axis** Selects which Y-axis the bar series uses.

The **Animation** section includes:

  * **Animation** Controls whether the bar series uses animation.

==== Cumulative Line Settings ====

The **Cumulative Line** tab configures the cumulative line displayed with the bars.

The cumulative line can be used to show the cumulative total or cumulative percentage across the chart.

When **CumulativeAsPercent** is enabled, the cumulative line is displayed as a percentage.

{{:mistudio:graphics:charts:pasted:20260706-200114.png?500|ParetoChart Cumulative Line editor}}

//ParetoChart Cumulative Line editor with preview, appearance, symbol, axis, and animation settings.//

The **Cumulative Line** tab includes these sections:

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

The **Appearance** section includes:

  * **Line Color** Sets the color of the cumulative line.
  * **Line Width** Sets the thickness of the cumulative 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 cumulative 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 cumulative line uses.

The **Animation** section includes:

  * **Animation** Controls whether the cumulative line uses animation.

==== X-Axis Configuration ====

ParetoChart uses the **XAxis** property to configure the x-axis.

The XAxis editor includes grouped settings for type, range, position, appearance, and name.

{{:mistudio:graphics:charts:pasted:PARETOCHART_XAXIS_EDITOR_UPDATED_IMAGE.png?500|ParetoChart XAxis editor}}

//ParetoChart XAxis editor.//

==== X-Axis Settings ====

The XAxis editor includes these sections:

  * **Type** Sets the axis type.
  * **Range** Controls automatic or manual range values.
  * **Position** Controls the axis position and offset.
  * **Appearance** Controls whether the axis is shown and how it appears.
  * **Name** Controls whether the axis name is shown and where it appears.

The **Type** section includes:

  * **Axis Type** Sets the type of x-axis, such as time.

The **Range** section includes:

  * **Auto Range** Controls whether the axis range is calculated automatically.
  * **Min** Sets the minimum axis value when auto range is not used.
  * **Max** Sets the maximum axis value when auto range is not used.

The **Position** section includes:

  * **Axis Position** Sets the axis position.
  * **Axis Offset** Sets the axis offset.

The **Appearance** section includes:

  * **Show Axis** Controls whether the axis is shown.
  * **Axis Color** Sets the axis color.
  * **Label Rotation (deg)** Sets the label rotation in degrees.

The **Name** section includes:

  * **Show Name** Controls whether the axis name is shown.
  * **Axis Name** Sets the axis name.
  * **Name Location** Sets where the axis name appears.

==== Y-Axis Configuration ====

ParetoChart uses the **YAxis** property to configure the y-axis.

The YAxis editor includes grouped settings for type, range, position, appearance, and name.

ParetoChart can use multiple y-axes. For example, one y-axis can be used for bar values and another y-axis can be used for the cumulative line.

{{:mistudio:graphics:charts:pasted:PARETOCHART_YAXIS_EDITOR_UPDATED_IMAGE.png?500|ParetoChart YAxis editor}}

//ParetoChart YAxis editor.//

==== Y-Axis Settings ====

The YAxis editor includes these sections:

  * **Type** Sets the axis type.
  * **Range** Controls automatic or manual range values.
  * **Position** Controls the axis position and offset.
  * **Appearance** Controls whether the axis is shown and how it appears.
  * **Name** Controls whether the axis name is shown and where it appears.

The **Type** section includes:

  * **Axis Type** Sets the type of y-axis, such as value.

The **Range** section includes:

  * **Auto Range** Controls whether the axis range is calculated automatically.
  * **Min** Sets the minimum axis value when auto range is not used.
  * **Max** Sets the maximum axis value when auto range is not used.

The **Position** section includes:

  * **Axis Position** Sets the axis position.
  * **Axis Offset** Sets the axis offset.

The **Appearance** section includes:

  * **Show Axis** Controls whether the axis is shown.
  * **Axis Color** Sets the axis color.
  * **Label Rotation (deg)** Sets the label rotation in degrees.

The **Name** section includes:

  * **Show Name** Controls whether the axis name is shown.
  * **Axis Name** Sets the axis name.
  * **Name Location** Sets where the axis name appears.

==== Multiple Series Behavior ====

ParetoChart combines a bar series and a cumulative line series.

For example:

<code>
Bar values        -> bar series
Cumulative values -> cumulative line series
</code>

When **Use2DInput** is checked, the chart can receive chart data through **valueInput**.

When **Use2DInput** is unchecked, the bar and line series can be updated separately through individual ports such as `bar_0` and `line_0`.

==== Two-Dimensional Data Behavior ====

TwoDimensionalDataSource can be used for ParetoChart 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 chart series data.

Use **TwoDimensionalDataSource** with **Use2DInput** checked and connected to **valueInput** for full chart data through one connection.

==== Array Data Behavior ====

ArrayDataSource can be used for simpler ParetoChart testing.

Array data is useful when only a basic set of values needs to be displayed.

Use **ArrayDataSource** with **Use2DInput** checked and connected to **valueInput**.

For full x/y behavior, timestamp behavior, bar and cumulative line behavior, or multiple data columns, use **TwoDimensionalDataSource**.

==== Individual Inputs ====

When **Use2DInput** is unchecked, ParetoChart uses individual input ports such as `bar_0` and `line_0`.

These ports allow scalar data sources to update the bar series and cumulative line series separately.

For example:

<code>
SineServer -> bar_0
Constant   -> line_0
</code>

This mode is useful when the bar series and cumulative line should be updated from separate sources.

==== Reference Lines ====

ParetoChart 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 ParetoChart displays tooltip information when the user hovers over the chart.

Tooltips are useful for showing exact values for bars and cumulative line points.

==== Notes ====

Use ParetoChart when values should be displayed as bars with a cumulative line.

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

Use **ArrayDataSource** for simpler testing.

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

Use **Use2DInput** unchecked with individual inputs when the bar and cumulative line should receive separate scalar values.

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

BarChart is better for simple bar-only comparisons. LineChart is better for line-only trend displays. ParetoChart is useful when bar values and cumulative line behavior should be shown together.

==== 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:linechart|LineChart]]
  * [[mistudio:design_editor:charts:bigdatalinechart|BigDataLineChart]]
  * [[mistudio:design_editor:charts:piechart|PieChart]]
  * [[mistudio:design_editor:charts:doughnutchart|DoughnutChart]]
  * [[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]]