Configuring the Scale
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains uses examples demonstrating how to customize the scale of the IGLinearGaugeView™ control.

In this topic


Introduction

Scale summary

The scale of the IGLinearGaugeView control is a logical entity formed by combining tick marks and (numbering) labels. The supported tick marks of the IGLinearGaugeView control, both major and minor, mark off equal intervals of measure along the gauge’s scale. Both can be positioned along the scale by adjusting the values of the respective extent-related properties, which are measured as a percentage of the gauge area. All aspects of the tick marks’ exact count, position, look, and frequency are customizable by property settings.

Scale configuration chart

The following table lists the IGLinearGaugeView’s scale configurable properties along with a brief description of each property.

Property

Description

font

Scale label Font

fontBrush

Scale label color

interval

Major tick mark count

labelExtent

Label position, as a value from 0 to 1, measured from the font/bottom of the scale.

labelInterval

Label rendering interval

labelsPostInitial

Label start rendering point from the minimum value

labelsPreTerminal

Starting from the maximum value, when to stop rendering labels.

maximumValue

The linear scale’s highest value

minimumValue

The linear scale’s lowest value

minorTickBrush

Minor tick mark color

minorTickCount

Count of tick marks between major tick marks

minorTickEndExtent

Minor tick marks stop rendering position, measured from the front/bottom of the linear gauge depending on the gauge orientation

minorTickStartExtent

Minor tick marks start rendering position, measured from the front/bottom of the linear gauge depending on the gauge orientation

minorTickStrokeThickness

Minor tick mark stroke thickness

scaleEndExtent

Position at which to stop rendering the scale as a value from 0 to 1, measured from the front/bottom of the linear gauge

scaleStartExtent

Position at which to start rendering the scale as a value from 0 to 1, measured from the front/bottom of the linear gauge.

tickBrush

Major tick mark color

tickEndExtent

Major tick marks end position, measured from the side of the linear gauge containing the maximumValue

ticksPostInitial

A value to start adding tick marks, added to the scale's minimumValue

ticksPreTerminal

A value to stop adding tick marks, subtracted from the scale's maximumValue

tickStartExtent

Major tick marks start position, measured from the side of the linear gauge containing the minimumValue

tickStrokeThickness

Major tick mark stroke thickness



Customizing Tick Marks – Code Example

Description

The code example configures the major and minor tick marks centering them within the IGLinearGaugeView and rendering the scale labels in black using the HelveticaNeue font.

Prerequisites

This code example requires the inclusion of the Chart framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.

Preview

The image below illustrates the code example when ran.

Code

In Objective-C:

CGRect gaugeRect = self.view.bounds;
gaugeRect.size.height = 250;
gaugeRect.origin.y = (self.view.bounds.size.height / 2) - 125;
IGLinearGaugeView *gauge = [[IGLinearGaugeView alloc] initWithFrame:gaugeRect];
gauge.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;
gauge.font = [UIFont fontWithName:@"HelveticaNeue" size:17.0];
gauge.fontBrush = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
gauge.minorTickStartExtent = 0.3;
gauge.minorTickEndExtent = 0.6;
gauge.tickStartExtent = 0.2;
gauge.tickEndExtent = 0.8;
gauge.needleShape = IGLinearGraphNeedleShapeRectangle;
gauge.needleInnerExtent = 0.15;
gauge.needleOuterExtent = 0.85;
gauge.value = 82;
[self.view addSubview:gauge];

In C#:

RectangleF gaugeRect = this.View.Bounds;
gaugeRect.Height = 250;
gaugeRect.Y = (this.View.Bounds.Height / 2) - 125;
IGLinearGaugeView gauge = new IGLinearGaugeView ();
gauge.Frame = gaugeRect;
gauge.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;
gauge.Font = UIFont.FromName ("HelveticaNeue", 17.0f);
gauge.FontBrush = new IGBrush (0, 0, 0, 1); 
gauge.MinorTickStartExtent = 0.3f;
gauge.MinorTickEndExtent = 0.6f;
gauge.TickStartExtent = 0.2f;
gauge.TickEndExtent = 0.8f;
gauge.NeedleShape = IGLinearGraphNeedleShape.IGLinearGraphNeedleShapeRectangle;
gauge.NeedleInnerExtent = 0.15f;
gauge.NeedleOuterExtent = 0.85f;
gauge.Value = 82;
this.View.Add (gauge);

Customizing the Scale – Code Example

Description

The code example uses the scaleStartExtent and scaleEndExtent properties of the IGLinearGaugeView to adjust the scale’s position making space for the label.

Prerequisites

This code example requires the inclusion of the Chart framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.

Preview

The image below illustrates the code example when ran on a device.

Code

In Objective-C:

CGRect gaugeRect = self.view.bounds;
gaugeRect.size.height = 250;
gaugeRect.origin.y = (self.view.bounds.size.height / 2) - 125;
IGLinearGaugeView *gauge = [[IGLinearGaugeView alloc] initWithFrame:gaugeRect];
gauge.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;
gauge.fontBrush = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
gauge.scaleStartExtent = 0.3;
gauge.scaleEndExtent = 0.95;
gauge.value = 82;
[self.view addSubview:gauge];
UILabel *label = [[UILabel alloc] init];
label.frame = CGRectMake(0, 0, 100, gauge.bounds.size.height);
label.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleRightMargin;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:22.0];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"Units";
[gauge addSubview:label];

In C#:

RectangleF gaugeRect = this.View.Bounds;
gaugeRect.Height = 250;
gaugeRect.Y = (this.View.Bounds.Height / 2) - 125;
IGLinearGaugeView gauge = new IGLinearGaugeView ();
gauge.Frame = gaugeRect;
gauge.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleBottomMargin;
gauge.FontBrush = new IGBrush (0, 0, 0, 1);
gauge.ScaleStartExtent = 0.3f;
gauge.ScaleEndExtent = 0.95f;
gauge.Value = 82;
this.View.Add (gauge);
UILabel label = new UILabel ();
label.Frame = new RectangleF(0, 0, 100, gauge.Bounds.Height);
label.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleRightMargin;
label.BackgroundColor = UIColor.Clear;
label.Font = UIFont.FromName ("HelveticaNeue-Bold", 22.0f);
label.TextAlignment = UITextAlignment.Center;
label.Text = @"Units";
gauge.Add (label);

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

The topics in this group cover enabling, configuring, and using the IGLinearGaugeView control’s supported features.