User Tools

Site Tools


mistudio:design_editor:charts:radarchart

RadarChart

com.ergotech.vib.graphics.javascript.charting.RadarChart

Image Examples

RadarChart in the graphics palette RadarChart graphic example
RadarChart in the graphics palette. RadarChart graphic example.

Overview

The RadarChart graphic is a chart graphic used to display values around a circular or web-style chart.

RadarChart is commonly used to compare several related values at the same time.

Each radar axis represents a category, and the connected shape shows the values for those categories.

Common Uses

  • Comparing related categories
  • Showing performance across several areas
  • Displaying survey or score data
  • Showing one-dimensional array values visually
  • Building dashboard summary graphics
  • Comparing values such as departments, metrics, or categories

Input Behavior

RadarChart accepts input through valueInput.

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

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

A common test data source is:

  • ArrayDataSource

When an ArrayDataSource is connected to RadarChart, the array values are plotted around the radar chart axes.

For predictable display, the array values should match the configured radar indicators. For example, if the RadarChart has five radar indicators, the connected array should provide five values.

Output Behavior

RadarChart is used as a display graphic.

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

RadarChart-Specific Behavior

RadarChart displays one or more values around configured radar axes.

RadarChart-specific settings include:

  • Name Sets the name of the RadarChart 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.
  • Radar Configures the radar chart shape, indicators, category names, and indicator ranges.
  • 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 RadarChart is shown.
  • Warning Qual. Indicator Controls the indicator used when warning or transitional quality data is received.

Logic Ports

In the Logic Editor, RadarChart includes this default port:

  • valueInput

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

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

Radar Configuration

RadarChart uses the Radar property to configure the radar chart structure.

The Radar editor includes a live preview and grouped settings for shape and indicators.

The Radar configuration defines the chart indicators. These indicators are the labels or categories shown around the radar chart.

Example radar indicators include:

  • Sales
  • Admin
  • Information Tech
  • Customer Support
  • Marketing

Each indicator represents one axis on the radar chart.

Editing Radar Indicators

To edit the radar indicators:

  1. Select the RadarChart graphic in the Design Editor.
  2. In the Basic properties, open the Radar property editor.
  3. Review the chart in the Preview section.
  4. In the Shape section, set the overall Radius (%) value.
  5. Choose whether the radar chart should be Circular.
  6. In the Indicators section, select an indicator tab, such as Sales, Admin, Information Tech, Customer Support, or Marketing.
  7. Edit the selected indicator Name, Min, and Max values.
  8. Use the + button to add another indicator.
  9. Use the - button to remove the selected indicator.
  10. Click OK to save the radar settings.

RadarChart Radar editor

RadarChart Radar editor with preview, shape, and indicator settings.

Radar Editor Settings

The Radar editor includes these sections:

  • Preview Shows a preview of the configured radar chart.
  • Shape Controls the overall radar shape.
  • Indicators Configures the radar indicator axes.

The Shape section includes:

  • Radius (%) Sets the size of the radar chart as a percentage.
  • Circular Controls whether the radar grid uses a circular shape.

The Indicators section includes tabs for each configured radar indicator.

Each indicator includes:

  • Name Sets the label for the selected radar indicator.
  • Min Sets the minimum value for the selected radar indicator.
  • Max Sets the maximum value for the selected radar indicator.

Multiple Indicator Behavior

Each visible radar axis needs a matching configured indicator in the Radar property.

For example:

One array value   = first radar indicator
Two array values  = first two radar indicators
Five array values = five radar indicators

If the chart has more array values than configured indicators, extra values can fail to appear as separate radar points.

Array Data Behavior

ArrayDataSource can be used for RadarChart testing.

When ArrayDataSource is connected to RadarChart, the array values are plotted across the configured radar indicators.

For example:

Array value 1 -> first radar indicator
Array value 2 -> second radar indicator
Array value 3 -> third radar indicator
Array value 4 -> fourth radar indicator
Array value 5 -> fifth radar indicator

If the RadarChart has five configured indicators, use an array with five values for predictable display.

Tooltip Behavior

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

Tooltips are useful for showing the exact value of a radar point.

Notes

Use RadarChart when several related values should be compared in one chart.

Use ArrayDataSource for simple RadarChart testing.

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

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

RadarChart is separate from LineChart, BarChart, PieChart, and DoughnutChart. Use RadarChart when values need to be compared across circular category axes.

mistudio/design_editor/charts/radarchart.txt · Last modified: by tputman

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki