ErgoTechWiki

com.ergotech.vib.graphics.javascript.charting.PieChart

The PieChart graphic is a Charts graphic used to display values as sections of a circle.

PieChart is commonly used to show how values compare as parts of a whole.

Each pie section represents one configured series item, and the size of each section is based on the incoming data value.

• Showing parts of a whole
• Comparing category values
• Displaying percentage-style data
• Showing summary dashboard values
• Displaying one-dimensional array values visually
• Comparing sections such as categories, groups, or counts

PieChart accepts input through valueInput.

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

PieChart works well with one-dimensional array-style data.

A common test data source is:

• ArrayDataSource

When an ArrayDataSource is connected to PieChart, the array values are used as the pie section values.

For predictable display, the number of array values should match the configured pie sections. For example, if the PieChart has two configured sections, the connected array should provide two values.

PieChart is used as a display graphic.

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

PieChart displays values as circular sections.

PieChart-specific settings include:

• Name Sets the name of the PieChart graphic.
• High Value Sets the high value used for chart scaling or range behavior.
• Low Value Sets the low value used for chart scaling or range behavior.
• Series Configures the pie sections.
• TopSpacing Sets spacing above the chart area.
• Use1DInput Enables the standard one-dimensional array input mode through valueInput.
• Use Color Controls whether incoming colors are used when supported.
• UseTooltip Controls whether chart tooltips are shown.
• Bad Qual. Indicator Controls the indicator used when bad quality data is received.
• Visible Controls whether the PieChart is shown.
• Warning Qual. Indicator Controls the indicator used when warning or transitional quality data is received.

In the Logic Editor, PieChart includes this default port:

• valueInput

The valueInput port receives one-dimensional array-style chart data.

For standard PieChart setup, leave Use1DInput enabled and connect a supported one-dimensional data source such as ArrayDataSource to valueInput.

PieChart uses the Series property to define the pie sections displayed on the chart.

Each series item represents one pie section.

The Series editor includes a live preview and grouped settings for appearance, radius, label display, and animation.

When an ArrayDataSource provides multiple values, matching pie sections should be configured so each value can display as a separate slice.

For example, if an ArrayDataSource provides two values, the PieChart should have two configured sections.

To add another pie section:

1. Select the PieChart graphic in the Design Editor.
2. In the Basic properties, open the Series property editor.
3. Click the + button in the Series editor.
4. Configure the new section.
5. Set the section appearance, radius, label options, and animation setting.
6. Click OK to save the section settings.

PieChart Series editor with preview, appearance, radius, label, and animation settings.

The Series editor includes these sections:

• Preview Shows a preview of the configured pie sections.
• Appearance Controls the section color and name.
• Radius Controls the inner and outer radius of the section.
• Label Controls whether labels are shown and where they appear.
• Animation Controls whether animation is enabled for the section.

The Appearance section includes:

• Section Color Sets the color of the pie section.
• Name Sets the name of the pie section.

The Radius section includes:

• Inner Radius (%) Sets the inner radius of the section. For a standard PieChart, this is usually 0.
• Outer Radius (%) Sets the outer radius of the section. For a standard PieChart, this is usually 100.

The Label section includes:

• Show Label Controls whether the section label is shown.
• Label Position Sets where the label appears, such as inside the pie section.

The Animation section includes:

• Animation Controls whether the pie section uses animation.

Each visible pie section needs a matching configured section in the Series property.

For example:

One array value  = one pie section
Two array values = two pie sections
Three array values = three pie sections

If the chart has more data values than configured sections, extra values can fail to appear as separate pie sections.

ArrayDataSource can be used for PieChart testing.

When ArrayDataSource is connected to PieChart, the array values are used as the values for the configured pie sections.

For example:

Array value 1 -> first pie section
Array value 2 -> second pie section
Array value 3 -> third pie section

If the PieChart has two configured sections, use an array with two values for predictable display.

The UseTooltip property controls whether PieChart displays tooltip information when the user hovers over the chart.

Tooltips are useful for showing the exact value of a pie section.

Each pie section includes Inner Radius (%) and Outer Radius (%) settings.

For a standard pie chart, the inner radius is usually set to 0 and the outer radius is usually set to 100.

Increasing the inner radius creates open space in the center of the chart.

Use PieChart when values should be shown as sections of a whole.

Use ArrayDataSource for simple PieChart testing.

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

PieChart is separate from DoughnutChart, LineChart, BarChart, and RadarChart. Use PieChart when values should be compared as circular sections.

• Charts
• DoughnutChart
• LineChart
• BarChart
• RadarChart
• Using Test Data Sources
• Connecting a Data Source to a Graphic
• MIStudio Graphics