ErgoTechWiki

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

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.

• 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

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.

ParetoChart is used as a display graphic.

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

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.

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.

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.

To edit the ParetoChart series:

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

ParetoChart Series editor with Bar and Cumulative Line tabs.

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.

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.

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.

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

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

ParetoChart XAxis editor.

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.

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.

ParetoChart YAxis editor.

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.

ParetoChart combines a bar series and a cumulative line series.

For example:

Bar values        -> bar series
Cumulative values -> cumulative line series

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`.

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.

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.

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:

SineServer -> bar_0
Constant   -> line_0

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

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.

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.

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.

• MIStudio Design Editor
• Charts
• BarChart
• LineChart
• BigDataLineChart
• PieChart
• DoughnutChart
• RadarChart
• Using Test Data Sources
• Connecting a Data Source to a Graphic