|
Radar, Polar and Star Charts
Radar, Polar and Star are charts are used to compare values accross multiple categories in a radial layout.
They are most useful when you have relatively few alternatives (2-4) that you would like to compare based on a few different criteria (3-8).
WebCharts3D supports Radar, Polar and Star charts.
Radar Chart
Usually Radar Charts either show only outlines or use transparent palettes to allow multiple layers
presented on the chart to be visible at the same type. The following picture shows a simple radar chart with transparent colors:
 |
Xml Style:
<radarChart>
<paint palette="Transluent" paint="Plain"/>
<axis scaleMin="0"/>
</radarChart>
|
You can easily create a Polar chart as depicted on the picture below by using circular grid layout.
 |
Xml Style:
<radarChart isFrameCircle="true">
<paint palette="Transluent"/>
<axis scaleMin="0"/>
</radarChart>
|
Star Chart
Star charts are similar to Radar charts but they use two rows of data to render a single element,
the first row specifying the value along axis, and the second row specifying the relative width of the element's base.
All attributes applicable to Radar charts can be applied to Star charts. The following picture shows a star chart:
 |
Xml Style:
<radarChart isStarChart="true">
<paint palette="Transluent"/>
<axis scaleMin="0"/>
</radarChart>
|
Selecting chart style
Chart style determines the shape of the elements displayed inside radar charts.
WebCharts3D supports FillArea, DrawArea and Polyline element styles.
To change the chart's shape style click on style combobox in the Properties panel.
For example, the following chart uses DrawArea style
 |
Xml Style:
<radarChart style="DrawArea">
<paint palette="Pastel"/>
<legend isVisible="false"/>
<elements lineWidth="4"/>
</radarChart>
|
Like many other charts, radar charts can display markers at the data points.
To turn markers on set marker size in Elements to a positive number and make sure that useMarkers is turned on.
The following picture shows Radar chart with marker size set to 4 and type of Polyline:
 |
Xml Style:
<radarChart style="Polyline">
<axis scaleMin="0"/>
<legend isVisible="false"/>
<elements markerSize="4" lineWidth="4" drawOutline="false"/>
<paint palette="Pastel"/>
</radarChart>
|
Customizing Axis amd Labels
Radar chart has only one axis and you can control grid and label rendering and orientation using Axis Properties Panel the same way you can do it
with other charts. Radar charts have two grids - normal, that can be presented as concentric circles or polylines and radial. You can change the label
orientation by changing label placement attribute. For example, the following chart has radial label placement style with radial grid turned off.
 |
Xml Style:
<radarChart labelPlacement="Radial" style="Polyline">
<axis scaleMin="0"/>
<legend isVisible="false"/>
<elements markerSize="4" lineWidth="4" drawOutline="false"/>
<paint palette="Pastel"/>
</radarChart>
|
Customizing decoration
A number of properties can be used to improve your chart's look and feel. For example, you can show shadows, change line width,
and define radar background.
 |
Xml Style:
<radarChart dropShadow="true">
<axis isVisible="false"/>
<frameBackground type="HorizontalGradient" minColor="#ADD6FF" maxColor="#DAFFFF"/>
<legend halign="Right" useMarkers="true" />
<elements markerSize="4" lineWidth="0" drawShadow="true"/>
...
</radarChart> |
| 
