Table of Contents

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

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:

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:

Logic Ports

In the Logic Editor, RadarChart includes this default port:

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:

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:

The Shape section includes:

The Indicators section includes tabs for each configured radar indicator.

Each indicator includes:

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.