Configuring Numeric Angle Axis
Send Feedback

Glossary Item Box

Topic Overview

Purpose

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

In this topic

Requirements

The code snippets in this topic use the IGChartView and require the inclusion of the IGChartView framework, for more information about how to add this framework see the Adding the IGChartView to a UIView topic.


Introduction

Introduction to the numeric angle axis

The IGNumericAngleAxis takes the shape of a series of concentric circles of increasing radii emanating from the center of the chart with major gridlines that look like radial lines originating at the center of the chart and extending outwards.

The following image illustrates the effect of implementing the IGNumericAngleAxis shape.

This type of axis can only be used with a Polar series, in combination with IGNumericRadiusAxis, instead of the IGCategoryAngleAxis, which is only used with a Radial series.


Axis Crossing Properties

Description

The IGNumericAngleAxis has the following axis crossing properties.

Property Name

Description

crossingValue

The crossing value is the radius or distance from the beginning of the IGNumericRadiusAxis. This value determines the location of intersection of the IGNumericAngleAxis on the IGNumericRadiusAxis. Increasing the value of the crossingValue property will move the IGNumericAngleAxis farther from the center of the chart, and decreasing it will move the angle axis closer to the center along the radius axis. For example, if the IGNumericRadiusAxis has a range value from 0 to 100 and a value of 50 is set on the crossingValue property of the IGNumericAngleAxis then the angle axis will cross the radius axis at value of 50. By default, the crossing value of the angle is set to the maximum value of radius axis, which means that the angle axis will be rendered at the outer ring of the chart.

crossingAxis

The crossing axis is the axis in the IGChartView’s axes collection that crosses the IGNumericAngleAxis. This property must be bound to an IGNumericRadiusAxis if there is more than one IGNumericAngleAxis and one IGNumericRadiusAxis in the axes collection. If you don’t specify the crossing axis, then the angle axis will assume the first axis of the IGNumericRadiusAxis type in the chart’s axes collection is the correct crossing axis.


Code

The following code snippet uses the crossingAxis and crossingValue properties of the IGNumericAngleAxis in the IGChartView control. It sets the intersection of IGNumericAngleAxis with IGNumericRadiusAxis at a radius of 150 from the beginning of the IGNumericRadiusAxis.

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

interval

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

maximum

The position at which the axis ends.

minimum

The position at which the axis begins.


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

Code

The following code snippet uses range values with the IGNumericAngleAxis in the IGChartView. It sets the angle range between 0 and 360 and intervals of the major gridlines every 30 degrees.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    angleAxis.minimum = 0;
    angleAxis.maximum = 360;
    angleAxis.interval = 30;
    [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= 360;

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

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


Axis Offset

Description

The IGCategoryAngleAxis references the default starting position of 0°, analogous to the 3 o’clock position (the right-hand side of the chart). However, this starting point is adjustable by setting the IGCategoryAngleAxis object’s startAngleOffset property to an angle that will offset the starting axis location in a clockwise direction. For example, setting the startAngleOffset property to 90° results in advancing the starting point 90° in a clockwise rotation, positioning the IGCategoryAngleAxis’ starting point at 90°, analogous to the 6 o’clock position (the bottom of the chart). Conversely, setting the startAngleOffset property to 270° advances the IGCategoryAngleAxis’ starting point to 270°, analogous the 12 o’clock position (the top of the chart). By default, the axis index advances the clockwise direction; however, you can set the IGCategoryAngleAxis’ isInverted property to YES. This will retard the axis indices, or rotates the starting point in a counterclockwise direction.

Code

The following code snippet shows how to offset the starting point of the IGNumericAngleAxis, in rendering the IGChartView control by 60° degrees.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGNumericAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    angleAxis.startAngleOffset = 60;
    [infraChart addAxis:angleAxis];
    [infraChart addAxis:radiusAxis];

In C#:


IGChartView chart = new IGChartView(this.View.Frame);
IGCategoryAngleAxis angleAxis = new IGCategoryAngleAxis("angleAxis");
IGNumericRadiusAxis radiusAxis = new IGNumericRadiusAxis("radiusAxis");
angleAxis.StartAngleOffset= 60;

chart.AddAxis(angleAxis);
chart.AddAxis(radiusAxis);

The following image illustrates the effect of implementing this code snippet and labels the numeric angle axis and start angle offset 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 IGNumericRadusAxis in the IGChartView.