Configuring Category Angle Axis
Send Feedback

Glossary Item Box

Topic Overview

Purpose

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

In this topic

Requirements

The code snippets in this topic use the IGChartView and require the inclusion of the IGChartView framework, detail about how to add this framework can be found in the Adding the IGChartView to a UIView topic.


Introduction

Introduction to the category angle axis

The IGCategoryAngleAxis 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 shows a sample implementation of the IGCategoryAngleAxis shape.

This type of axis is only used with radial series, in combination with IGNumericRadiusAxis, instead of the IGNumericAngleAxis, which is used only with Polar series.


Axis Crossing Properties

Description

The IGCategoryAngleAxis has the following axis crossing properties.

Property Name

Description

crossingValue

The crossing value is the radius or distance from the beginning of the IGNumericRadiusAxis through to the IGCategoryAngleAxis. In other words, this value determines the location of intersection of the IGCategoryAngleAxis on the IGNumericRadiusAxis. Increasing the value of the crossingValue property, moves the IGCategoryAngleAxis farther from the center of the chart while decreasing it moves 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 IGCategoryAngleAxis’ crossingValue property 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 IGCategoryAngleAxis. This property must be bound to an IGNumericRadiusAxis and vice-versa if there is more than one IGCategoryAngleAxis and one IGNumericRadiusAxis in the IGChartView control’s axes collection. If you don’t specify the crossing axis, then the angle axis will just 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 IGCategoryAngleAxis in the IGChartView control to set the intersection of IGCategoryAngleAxis with IGNumericRadiusAxis at a radius of 150° from the beginning of IGNumericRadiusAxis.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGCategoryAngleAxis *angleAxis = [[IGCategoryAngleAxis 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);

   IGCategoryAngleAxis  angleAxis = new IGCategoryAngleAxis("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 is the result implementing the previous code snippet, which results in the labeling the numeric radius axis, category angle axis, and the crossing.


Axis Range Properties

Description

The IGCategoryAngleAxis does not have minimum and maximum properties. Therefore, it always starts from the first item bound to it in the data set and then displays axis labels, and major gridlines, for the remaining items, spaced at even intervals equal to a value of the interval property.

Code

The following code snippet sets the axis interval on the IGCategoryAngleAxis and displays every other axis label in the IGChartView control.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGCategoryAngleAxis *angleAxis = [[IGNumericAngleAxis alloc] initWithKey:@"angleAxis"];
    IGNumericRadiusAxis *radiusAxis = [[IGNumericRadiusAxis alloc] initWithKey:@"radiusAxis"];
    angleAxis.interval = 2;
    [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.Interval = 2;

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

The following image illustrates the implementation of the previous code snippet resulting in the labeling of the category angle axis and interval areas on 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 IGCategoryAngleAxis’ starting point on the IGChartView control by 60°.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    
    IGCategoryAngleAxis *angleAxis = [[IGCategoryAngleAxis 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= 2;

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

The following image illustrates the result of the implementing the previous code snippet labels the category angle axis and offsets the starting angle 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 IGNumericAngleAxis in the IGChartView.

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