ErgoTechWiki

com.ergotech.vib.graphics.javascript.charting.DoughnutChart

The DoughnutChart graphic is a chart graphic used to display values as circular sections with open space in the center.

DoughnutChart is similar to PieChart, but the sections use an inner radius to create the doughnut shape.

Each doughnut 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
• Creating circular dashboard graphics with center space
• Comparing sections such as categories, groups, or counts

DoughnutChart accepts input through valueInput.

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

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

A common test data source is:

• ArrayDataSource

When an ArrayDataSource is connected to DoughnutChart, the array values are used as the doughnut section values.

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

DoughnutChart is used as a display graphic.

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

DoughnutChart displays values as circular sections with an open center.

DoughnutChart-specific settings include:

• Name Sets the name of the DoughnutChart 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 doughnut 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 DoughnutChart is shown.
• Warning Qual. Indicator Controls the indicator used when warning or transitional quality data is received.

In the Logic Editor, DoughnutChart includes this default port:

• valueInput

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

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

DoughnutChart uses the Series property to define the doughnut sections displayed on the chart.

Each series item represents one doughnut 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 doughnut sections should be configured so each value can display as a separate section.

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

To add another doughnut section:

1. Select the DoughnutChart 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.

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

The Series editor includes these sections:

• Preview Shows a preview of the configured doughnut 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 doughnut section.
• Name Sets the name of the doughnut section.

The Radius section includes:

• Inner Radius (%) Sets the inner radius of the section. This creates the open center of the doughnut chart.
• Outer Radius (%) Sets the outer radius of the section.

The Label section includes:

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

The Animation section includes:

• Animation Controls whether the doughnut section uses animation.

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

For example:

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

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

ArrayDataSource can be used for DoughnutChart testing.

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

For example:

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

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

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

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

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

The Inner Radius (%) setting creates the open center of the doughnut chart.

The Outer Radius (%) setting controls the outside edge of the doughnut section.

For a standard doughnut chart, the inner radius should be greater than 0 and the outer radius should be greater than the inner radius.

Use DoughnutChart when values should be shown as sections of a whole with open space in the center.

Use ArrayDataSource for simple DoughnutChart testing.

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

DoughnutChart is intended for one-dimensional section values, not full x/y table-style chart data.

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

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