Configuring Numeric Radius Axis
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains, with code examples, how to use the IGChartView™ control’s numeric radius axis.

In this topic

Requirements

The code examples used in this topic use the IGChartView and require the inclusion of the IGChartView framework. For more information about how adding this framework, please refer to the Adding the IGChartView to a UIView topic.


Introduction

Introduction to the numeric radius axis

The IGNumericRadiusAxis IGChartView control takes the shape of a ray emanating from the center of a polar graph and pointing outwards to the boundary of the chart plot area. As illustrated below, the major gridlines of this axis consist of several, equally spaced nested concentric circles of increasing radii.

This type of axis can only be used with, a Polar series in combination with IGNumericAngleAxis; or alternately with a Radial series in combination with IGCategoryAngleAxis.


Axis Crossing Properties

Description

The IGNumericRadiusAxis has the following axis crossing properties.

Property Name

Description

crossingValue

The crossing value is the relative angle between the IGNumericRadiusAxis and the polar axis with a valid range of 0° to 360°. By default, this value is set to zero degrees, analogous to the 3 o’clock position, on the IGCategoryAngleAxis or IGNumericAngleAxis. The value of the crossingValue property indicates the number of degrees with which to rotate the IGNumericRadiusAxis clockwise from the horizontal polar axis (the axis running through the 3 and 9 o’clock position). For example, a value of 90 set on crossingValue property orients the IGNumericRadiusAxis to the vertical polar axis (the axis running through the 6 and 12 o’clock positions 90° and 270° respectively).

crossingAxis

The crossing axis is the axis in the IGChartView control’s axes collection that crosses the IGNumericRadiusAxis. This property must be bound to an IGNumericAngleAxis (Polar series) or IGCategoryAngleAxis (Radial series), and vice-versa, if there is more than one IGNumericRadiusAxis and one IGNumericAngleAxis or IGCategoryAngleAxis in the axes collection of the IGChartView.


Code

The following code snippet uses the crossingAxis and crossingValue properties of the IGNumericRadiusAxis in the IGChartView control. It sets the intersection of IGNumericRadiusAxis with IGNumericAngleAxis at an angle of 0° from the beginning of the IGNumericAngleAxis.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    angleAxis.crossingAxis = radiusAxis;
    angleAxis.crossingValue = 150;
    radiusAxis.crossingAxis = angleAxis;
    radiusAxis.crossingValue = 0;
    [infraChart addAxis:angleAxis];
    [infraChart addAxis:radiusAxis];

In C#:

IGChartView chart = new IGChartView(this.View.Frame);

   IGNumericAngleAxis angleAxis = new IGNumericAngleAxis ("angleAxis");
   IGNumericRadiusAxis radiusAxis = new IGNumericRadiusAxis("radiusAxis");
   angleAxis.CrossingAxis = radiusAxis;
   angleAxis.CrossingValue = 150;
   radiusAxis.CrossingAxis = angleAxis;
   radiusAxis.CrossingValue = 0;
   chart.AddAxis(angleAxis);
   chart.AddAxis(radiusAxis);

The following image illustrates the effect of implementing this code snippet, and labels the numeric radius axis, numeric angle axis, and the crossing.


Axis Range Properties

Description

The IGNumericAngleAxis has the following range properties.

Property Name

Description

minimum

The point or origin where the axis begins.

maximum

The point where the axis ends.

interval

The interval between the consecutive major gridlines or angular separation between radial lines starting from the center of the chart.


By default, the IGChartView uses an auto range feature, which means that the minimum property will be set to the data point with the smallest angular data column and the maximum property will be set to the data point with the largest angular data column. However, manually setting a value range on the IGNumericRadiusAxis will hide all data points with radius data columns falling outside this range. For example, if a collection of data points, with a radius data column varying from 0 to 200 bound to a series and a value range of 50 (minimum) and 100 (maximum), is set on IGNumericRadiusAxis, then the chart will only show data points with radius data column between 50 and 100.

Code

The following code snippet uses range values with the IGNumericRadiusAxis in the IGChartView. It sets the radius axis range between 0° and 150°, and the intervals of the major gridlines to 50.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    radiusAxis.minimum = 0;
    radiusAxis.maximum = 150;
    radiusAxis.interval = 50;
    [infraChart addAxis:angleAxis];
    [infraChart addAxis:radiusAxis];

In C#:

IGChartView chart = new IGChartView(this.View.Frame);

   IGNumericAngleAxis angleAxis = new IGNumericAngleAxis ("angleAxis");
   IGNumericRadiusAxis radiusAxis = new IGNumericRadiusAxis("radiusAxis");
   radiusAxis.Minimum= 0;
   radiusAxis.Maximum= 150;

   radiusAxis.Interval= 50;
   chart.AddAxis(angleAxis);
   chart.AddAxis(radiusAxis);

The following image illustrates the effect of implementing the previous code snippet, and labels the minimum, maximum, and interval areas of the rendered chart.


Axis Extent Scales

Description

The IGNumericRadiusAxis has two unique properties listed in the table below for configuring the axis scale.

Property Name

Description

radiusExtentScale

The percentage of the outer radius width, used as the maximum radius or how far the maximum radius extents from the center of the chart. The valid range is from 0.0 to 1.0.

innerRadiusExtentScale

The percentage of the inner radius extent to use as the minimum radius or how big the blank space should be at the center of the chart. For example, a value of 0 set on the innerRadiusExtentScale property will result in no blank space in the center of chart. The valid range is from 0.0 to 1.0.


Note: In order for the chart to render correctly and display radius lines and axis labels the value for the radiusExtentScale property should always be higher than the value for innerRadiusExtentScale property.

Code

The following code snippet shows how to use radius extent scales with the IGNumericRadiusAxis in the IGChartView control. It increases the inner radius by 20% of the chart radius and decreases the outer radius by 80% of the chart radius implements. This renders a blank space in the center of the chart, thus making space for the labels outside the numerical angle axis.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    radiusAxis.radiusExtentScale = 0.8f;
    radiusAxis.innerRadiusExtentScale = 0.2f;
    [infraChart addAxis:angleAxis];
    [infraChart addAxis:radiusAxis];

In C#:

IGChartView chart = new IGChartView(this.View.Frame);

   IGNumericAngleAxis angleAxis = new IGNumericAngleAxis ("angleAxis");
   IGNumericRadiusAxis radiusAxis = new IGNumericRadiusAxis("radiusAxis");
   radiusAxis.RadiusExtentScale = .8f;
   radiusAxis.InnerRadiusExtentScale= .2f;
   chart.AddAxis(angleAxis);
   chart.AddAxis(radiusAxis);

The following image illustrates the effect of implementing the previous code snippet and labels the radius extent scale, inner radius extent scale, and max scale areas of the rendered chart.


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic uses code examples to demonstrate how to create an axis crossing on the IGChartView control.

This topic explains, with code examples, how to use axis scales and intervals on the IGChartView control.

This topic serves as a gateway to the features and functionality of the IGChartView control.

This topic demonstrates, with code examples, how to use IGCategoryAngleAxis in the IGChartView.

This topic demonstrates, with code examples, how to use IGNumericAngleAxis in the IGChartView.