Gauges: Getting Started

This quick start tutorial demonstrates how to create a simple gauge view with TKGauge.


This article assumes that you have followed the Downloading UI for iOS, Installing UI for iOS and Setting Up the project steps from the common Getting Started article.

Setting up TKGauge

Now that our project is created and the TelerikUI.framework is added, we can start referencing and using the TelerikUI types:

Open your ViewController.m file and add a reference to the chart header file:

#import <TelerikUI/TelerikUI.h>

Note that starting with Xcode 6 Apple doesn't generate the precompiled headers file automatically. That is why you should add import the UIKit framework before importing TelerikUI:

#import <UIKit/UIKit.h>

If you are writing Swift, add the same line in your bridging header.

If you are using Xamarin, add a reference to TelerikUI.dll in your project and use the using directive:

using TelerikUI;

You can start by creating a TKGauge view object in ViewDidLoad() method. TelerikUI supports radial and linear type of gauge. You can instantiate TKRadialGauge by using the following lines:

self.radialGauge = [[TKRadialGauge alloc] initWithFrame:CGRectZero];
self.radialGauge.delegate = self;
[self.view addSubview:self.radialGauge];
radialGauge = TKRadialGauge()
radialGauge.delegate = self
radialGauge = new TKRadialGauge ();
this.radialGauge.Delegate = new GaugeDelegate ();
this.View.AddSubview (this.radialGauge);

TKGauge is created with flexibility in mind. There is few tipes of components - scales, segments and indicators - allowing you to fully customize the overall look and feel.

Let's add scale to TKGauge:

TKGaugeRadialScale *scale = [[TKGaugeRadialScale alloc] initWithMinimum:@0 maximum:@6];
[self.radialGauge addScale:scale];
let scale = TKGaugeRadialScale(minimum: 0, maximum: 6)
TKGaugeRadialScale scale = new TKGaugeRadialScale (new NSNumber (0), new NSNumber (6));
this.radialGauge.AddScale (scale);

Now add a segment to the scale:

TKGaugeSegment* segment = [[TKGaugeSegment alloc] initWithMinimum:@-10 maximum:@18];
segment.location = 0.60;
segment.width = 0.05;
segment.width2 = 0.05;
segment.cap = TKGaugeSegmentCapRound;
[scale addSegment: segment];
let segment = TKGaugeSegment(minimum: -10, maximum: 18)
segment.location = 0.56
segment.width = 0.05
segment.width2 = 0.05
segment.cap = TKGaugeSegmentCap.round
TKGaugeSegment segment = new TKGaugeSegment (new NSNumber(-10), new NSNumber(18));
segment.Location = 0.56f;
segment.Width = 0.05f;
segment.Width2 = 0.05f;
segment.Cap = TKGaugeSegmentCap.Round;

Add an indicator to the scale:

TKGaugeNeedle* needle = [TKGaugeNeedle new];
needle.length = .8;
needle.width = 3;
needle.topWidth = 3;
needle.shadowOffset = CGSizeMake(1, 1);
needle.shadowOpacity = 0.8;
needle.shadowRadius = 1.5;
[scale addIndicator:needle];
let needle = TKGaugeNeedle()
needle.length = 0.8
needle.width = 3
needle.topWidth = 3
needle.shadowOffset = CGSize(width: 1, height: 1);
needle.shadowOpacity = 0.8;
needle.shadowRadius = 1.5;
TKGaugeNeedle needle = new TKGaugeNeedle();
needle.Width = 3;
needle.TopWidth = 3;
needle.Length = 0.6f;
needle.ShadowOffset = new CGSize(1, 1);
needle.ShadowOpacity = 0.8f;
needle.ShadowRadius = 1.5f;