ErgoTechWiki

User Tools

Site Tools

Trace:
mistudio:design_editor:charts:paretochart

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:paretochart [2026/09/18 13:36] – removed - external edit (Unknown date) 127.0.0.1mistudio:design_editor:charts:paretochart [2026/09/18 15:26] (current) – tputman
Line 1: Line 1:
 +===== 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]]
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki