Differences

This shows you the differences between two versions of the page.

--- mistudio:design_editor:charts:radarchart [2026/09/18 13:36] – removed - external edit (Unknown date) 127.0.0.1
+++ mistudio:design_editor:charts:radarchart [2026/09/18 15:28] (current) – tputman
@@ Line 1: / Line 1: @@
+===== RadarChart =====
+com.ergotech.vib.graphics.javascript.charting.RadarChart
+==== Image Examples ====
+| {{:mistudio:graphics:charts:pasted:20260701-203741.png?40|RadarChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260701-203827.png?200|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:
+  - Select the RadarChart graphic in the Design Editor.
+  - In the Basic properties, open the **Radar** property editor.
+  - Review the chart in the **Preview** section.
+  - In the **Shape** section, set the overall **Radius (%)** value.
+  - Choose whether the radar chart should be **Circular**.
+  - In the **Indicators** section, select an indicator tab, such as Sales, Admin, Information Tech, Customer Support, or Marketing.
+  - Edit the selected indicator **Name**, **Min**, and **Max** values.
+  - Use the **+** button to add another indicator.
+  - Use the **-** button to remove the selected indicator.
+  - Click **OK** to save the radar settings.
+{{:mistudio:graphics:charts:pasted:20260706-192408.png?500|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:
+<code>
+One array value   = first radar indicator
+Two array values  = first two radar indicators
+Five array values = five radar indicators
+</code>
+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:
+<code>
+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
+</code>
+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.
+==== Related Pages ====
+  * [[mistudio:design_editor:start|MIStudio Design Editor]]
+  * [[mistudio:design_editor:charts:start|Charts]]
+  * [[mistudio:design_editor:charts:linechart|LineChart]]
+  * [[mistudio:design_editor:charts:barchart|BarChart]]
+  * [[mistudio:design_editor:charts:bigdatalinechart|BigDataLineChart]]
+  * [[mistudio:design_editor:charts:piechart|PieChart]]
+  * [[mistudio:design_editor:charts:doughnutchart|DoughnutChart]]
+  * [[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]]