You are on page 1of 412

Essential Studio

for iOS
Version - v13.4.0.53 | Release Date - January 13,2016

Welcome to Syncfusion Essential Studio for iOS ................................................................................ 11


1.1

How to best read this user guide ................................................................................................ 11

1.2

Additional help resources ........................................................................................................... 11

1.3

Create a support incident ........................................................................................................... 11

System Requirements ......................................................................................................................... 11

Installation and Deployment............................................................................................................... 11

3.1

Downloading and exploring the package.................................................................................... 11

3.2

Add Framework reference to the project ................................................................................... 12

SfAutoComplete .................................................................................................................................. 14
4.1

SfAutoComplete .......................................................................................................................... 14

4.1.1
4.2

Key Features ........................................................................................................................ 14

Getting Started............................................................................................................................ 14

4.2.1

Create your first AutoComplete in Objective C................................................................... 14

4.2.2

Create your first AutoComplete in Swift ............................................................................. 16

4.3

AutoCompleteSource .................................................................................................................. 18

4.4

AutoCompleteMode ................................................................................................................... 19

4.5

SuggestionMode ......................................................................................................................... 20

4.6

MaximumDropDownHeight ........................................................................................................ 23

4.7

MinimumPrefixCharacter............................................................................................................ 24

4.8

PopUpDelay................................................................................................................................. 25

4.9

WaterMark .................................................................................................................................. 25

SfBarcode ............................................................................................................................................ 25
5.1

SfBarcode .................................................................................................................................... 25

5.2

Getting Started............................................................................................................................ 26

5.2.1

Create your first Barcode in Objective C ............................................................................. 26

5.2.2

Create your first Barcode in Swift ....................................................................................... 29

5.3

Supported Symbologies .............................................................................................................. 32

5.3.1

One Dimensional Barcodes ................................................................................................. 32

5.3.2

Two Dimensional Barcodes ................................................................................................. 40

5.4

Symbology Settings ..................................................................................................................... 42

5.4.1

One Dimensional Barcode settings ..................................................................................... 42

5.4.2

Two Dimensional Barcode Settings..................................................................................... 43

5.5

Barcode Customization ............................................................................................................... 47

5.5.1

Bar Customization ............................................................................................................... 47

5.5.2

Text Customization ............................................................................................................. 47

SfBusyindicator ................................................................................................................................... 48
6.1

SfBusyIndicator ........................................................................................................................... 48

6.1.1
6.2

Getting Started............................................................................................................................ 49

6.2.1

Create your first BusyIndicator in Objective C .................................................................... 49

6.2.2

Create your first BusyIndicator in Swift .............................................................................. 50

6.3

IsBusy .......................................................................................................................................... 52

6.4

Title ............................................................................................................................................. 52

6.4.1
6.5

FontFace .............................................................................................................................. 53

Sizing ........................................................................................................................................... 53

6.5.1

ViewBoxHeight .................................................................................................................... 53

6.5.2

ViewBoxWidth..................................................................................................................... 53

6.6
7

Key Features ........................................................................................................................ 49

AnimationTypes .......................................................................................................................... 54

SfCalendar ........................................................................................................................................... 57
7.1

Overview ..................................................................................................................................... 57

7.1.1
7.2

Key Features ........................................................................................................................ 57

Getting Started............................................................................................................................ 57

7.2.1

Create your first Calendar control in iOS ............................................................................ 58

7.2.2

Creating your first Calendar in Xamarin.iOS. ...................................................................... 65

7.3

Built-in Views .............................................................................................................................. 66

7.3.1

Month View......................................................................................................................... 67

7.3.2

YearView ............................................................................................................................. 69

7.4

Navigation and Gesture .............................................................................................................. 71

7.4.1

Move to Date ...................................................................................................................... 71

7.4.2

Toggle navigation ............................................................................................................... 72

7.4.3

Transition modes ................................................................................................................ 72

7.5

Populating Events ....................................................................................................................... 73

7.5.1

Adding events using Collection ........................................................................................... 74

7.6

Selection...................................................................................................................................... 76

7.7

Restricting Dates ......................................................................................................................... 77

7.7.1

Min Max dates .................................................................................................................... 77

7.7.2

Blackout dates ..................................................................................................................... 79

7.8

FirstDayofWeek........................................................................................................................... 81

7.9

Localization ................................................................................................................................. 82

7.9.1

Calendar Custom String Localization .................................................................................. 83

SfChart................................................................................................................................................. 84
8.1

Overview ..................................................................................................................................... 84

8.1.1
8.2

Key features ........................................................................................................................ 84

Getting Started............................................................................................................................ 84

8.2.1

Create your first Chart in Objective C ................................................................................. 84

8.2.2

Create your first Chart in Swift ........................................................................................... 94

8.2.3

Create your first Chart in Xamarin.iOS .............................................................................. 102

8.3

Axis ............................................................................................................................................ 112

8.3.1

Category Axis..................................................................................................................... 112

8.3.2

Numeric Axis ..................................................................................................................... 115

8.3.3

Date Time Axis................................................................................................................... 125

8.3.4

Common axis features ...................................................................................................... 134

8.3.5

Smart Axis Labels .............................................................................................................. 148

8.4

Chart Series ............................................................................................................................... 150

8.4.1

Multiple Series .................................................................................................................. 150

8.4.2

Combination Series ........................................................................................................... 152

8.5

Chart Types ............................................................................................................................... 156

8.5.1

Line Chart .......................................................................................................................... 156

8.5.2

Area Chart ......................................................................................................................... 157

8.5.3

Spline Area Chart .............................................................................................................. 158

8.5.4

Stacked Area Chart............................................................................................................ 158

8.5.5

100% Stacked Area Chart .................................................................................................. 159

8.5.6

Column Chart .................................................................................................................... 160

8.5.7

Range Column Chart ......................................................................................................... 161

8.5.8

Stacked Column Chart ....................................................................................................... 162

8.5.9

100% Stacked Column Chart ............................................................................................. 163

8.5.10

Bar Chart ........................................................................................................................... 164

8.5.11

Stacked Bar Chart .............................................................................................................. 164

8.5.12

100% Stacked Bar Chart .................................................................................................... 165

8.5.13

Spline Chart ....................................................................................................................... 166

8.5.14

Fast Line Chart................................................................................................................... 167

8.5.15

Bubble Chart ..................................................................................................................... 168

8.5.16

Scatter Chart ..................................................................................................................... 169

8.5.17

OHLC Chart ........................................................................................................................ 170

8.5.18

Candle Chart...................................................................................................................... 172

8.5.19

Pie Chart ............................................................................................................................ 174

8.5.20

Doughnut Chart................................................................................................................. 177

8.5.21

Pyramid Chart ................................................................................................................... 180

8.5.22

Funnel Chart ...................................................................................................................... 182

8.6

8.6.1

Customizing Labels ............................................................................................................ 185

8.6.2

Formatting Label Content ................................................................................................. 187

8.6.3

Label Position .................................................................................................................... 188

8.6.4

Customizing Marker Shapes.............................................................................................. 192

8.6.5

Connector Line .................................................................................................................. 194

8.7

Data Markers............................................................................................................................. 184

Legend ....................................................................................................................................... 196

8.7.1

Customizing Labels ............................................................................................................ 196

8.7.2

Legend Icons ..................................................................................................................... 198

8.7.3

Legend Title ....................................................................................................................... 199

8.7.4

Toggle the series visibility ................................................................................................. 201

8.7.5

Positioning the Legend...................................................................................................... 201

SfCircularGauge................................................................................................................................. 203
9.1

Overview ................................................................................................................................... 203

9.1.1
9.2

Key Features ...................................................................................................................... 203

Getting Started.......................................................................................................................... 204

9.2.1

Create your first Circular Gauge in Objective C ................................................................ 204

9.2.2

Create your first Circular Gauge in Swift........................................................................... 211

10

SfDigitalGauge ............................................................................................................................... 219

10.1

Overview ................................................................................................................................... 219

10.1.1
10.2

Key Features ...................................................................................................................... 219

Getting Started.......................................................................................................................... 220

10.2.1

Creating Your First DigitalGauge in ios.............................................................................. 220

10.2.2

Creating Your First DigitalGauge in Xamarin.iOS .............................................................. 221

10.3

CharacterHeight ........................................................................................................................ 222

10.4

CharacterType ........................................................................................................................... 223

10.4.1

Seven Segment.................................................................................................................. 223

10.4.2

Fourteen Segment............................................................................................................. 224

10.4.3

Sixteen Segment ............................................................................................................... 225

10.4.4

EightCrossEightDotMatrix Segment .................................................................................. 225

10.5

CharacterWidth ......................................................................................................................... 226

10.6
11

Value ......................................................................................................................................... 227


SfLinearGauge ............................................................................................................................... 228

11.1

Overview ................................................................................................................................... 228

11.1.1

Use Cases .......................................................................................................................... 228

11.1.2

Key Features ...................................................................................................................... 229

11.1.3

Key Elements ..................................................................................................................... 229

11.2

Getting Started.......................................................................................................................... 229

11.2.1

Ticks................................................................................................................................... 229

11.2.2

Labels ................................................................................................................................ 229

11.2.3

Ranges ............................................................................................................................... 229

11.2.4

Pointers ............................................................................................................................. 229

11.2.5

Create your first Linear Gauge in Objective C ................................................................... 230

11.2.6

Create your first Linear Gauge in Swift ............................................................................. 235

11.3

MainScale .................................................................................................................................. 241

11.3.1
11.4

Ticks........................................................................................................................................... 242

11.4.1
11.5

Customize Labels............................................................................................................... 243

Ranges ....................................................................................................................................... 244

11.6.1
11.7

Customize Ticks ................................................................................................................. 242

Labels ........................................................................................................................................ 243

11.5.1
11.6

Customize MainScale ........................................................................................................ 241

Customize Range ............................................................................................................... 244

Pointers ..................................................................................................................................... 245

11.7.1

Bar Pointer ........................................................................................................................ 245

11.7.2

Symbol Pointer .................................................................................................................. 246

12

SfMaps .......................................................................................................................................... 247

12.1

Overview ................................................................................................................................... 247

12.1.1
12.2

Key Features ...................................................................................................................... 247

Getting Started.......................................................................................................................... 247

12.2.1

Create your first Maps in Objective C ............................................................................... 247

12.2.2

Create your first Maps in Swift ......................................................................................... 250

12.2.3

Create your first Maps in Xamarin.iOS.............................................................................. 253

12.3

Populate Data ........................................................................................................................... 256

12.3.1
12.4

Data Binding ...................................................................................................................... 256

Customization ........................................................................................................................... 261

12.4.1

Shape Settings ................................................................................................................... 261

12.4.2
12.5

Color Mapping................................................................................................................... 262

Map Elements ........................................................................................................................... 266

12.5.1

Markers ............................................................................................................................. 266

12.5.2

Bubbles.............................................................................................................................. 271

12.5.3

Legend ............................................................................................................................... 273

12.5.4

Positioning of the Legend ................................................................................................. 273

12.6

User Interaction ........................................................................................................................ 275

12.6.1

Map Selection ................................................................................................................... 275

12.6.2

Zooming ............................................................................................................................ 276

13

SfNavigationDrawer ...................................................................................................................... 278

13.1

Overview ................................................................................................................................... 278

13.1.1

Use Case Scenarios............................................................................................................ 278

13.1.2

Key Features ...................................................................................................................... 279

13.2

Getting Started.......................................................................................................................... 279

13.2.1

Create your first NavigationDrawer in Objective C........................................................... 279

13.2.2

Create your first NavigationDrawer in Swift ..................................................................... 283

13.3

TouchThreshold ........................................................................................................................ 286

13.4

ContentView ............................................................................................................................. 286

13.5

DrawerContentView ................................................................................................................. 289

13.6

DrawerHeaderView................................................................................................................... 289

13.7

DrawerFooterView .................................................................................................................... 290

13.8

DrawerHeight ............................................................................................................................ 292

13.9

DrawerWidth............................................................................................................................. 292

13.10

Position ................................................................................................................................. 292

13.11

Transition .............................................................................................................................. 300

14

SfNumericTextBox......................................................................................................................... 306

14.1

Overview ................................................................................................................................... 306

14.1.1
14.2

Key Features ...................................................................................................................... 306

Getting Started.......................................................................................................................... 306

14.2.1

Create your first NumericTextBox in Objective C ............................................................. 306

14.2.2

Create your first NumericTextBox in Swift........................................................................ 308

14.3

Number Formatting .................................................................................................................. 310

14.3.1
14.4

Format String .................................................................................................................... 310

CultureInfo ................................................................................................................................ 310

14.4.1

Culture with formatting .................................................................................................... 311

14.5

Nullable Value ........................................................................................................................... 311

14.6

ParsingMode ............................................................................................................................. 311

14.7

WaterMark Text ........................................................................................................................ 312

14.8

Percent Display mode ............................................................................................................... 312

15

SfRangeSlider ................................................................................................................................ 313

15.1

Overview ................................................................................................................................... 313

15.2

Getting Started.......................................................................................................................... 314

15.2.1

Create your first RangeSlider in iOS by using objective C ................................................. 314

15.2.2

Create your first RangeSlider in iOS by using Swift ........................................................... 318

15.3

Minimum ................................................................................................................................... 321

15.4

Maximum .................................................................................................................................. 321

15.5

Ticks........................................................................................................................................... 321

15.5.1

Tick Frequency .................................................................................................................. 321

15.5.2

Step Frequency ................................................................................................................. 322

15.5.3

Snaps To ............................................................................................................................ 322

15.5.4

Tick Placement .................................................................................................................. 322

15.5.5

BottomRight ...................................................................................................................... 322

15.5.6

TopLeft .............................................................................................................................. 323

15.5.7

Outside .............................................................................................................................. 323

15.5.8

Inline.................................................................................................................................. 324

15.6

Range ........................................................................................................................................ 324

15.6.1

ShowRange........................................................................................................................ 324

15.6.2

RangeStart ......................................................................................................................... 325

15.6.3

RangeEnd .......................................................................................................................... 325

15.7

Orientation ................................................................................................................................ 325

15.8

Direction Reversed .................................................................................................................... 326

15.9

Label Support ............................................................................................................................ 327

15.9.1

ShowValueLabels .............................................................................................................. 327

15.9.2

ValuePlacement ................................................................................................................ 327

16

SfRating ......................................................................................................................................... 328

16.1

Overview ................................................................................................................................... 328

16.1.1
16.2

Key Features ...................................................................................................................... 328

Getting Started.......................................................................................................................... 328

16.2.1

Creating your first Rating in iOS ........................................................................................ 328

16.2.2

Creating your First Rating in Xamarin.iOS ......................................................................... 331

16.3

Precision Mode ......................................................................................................................... 332

16.3.1

Standard ............................................................................................................................ 332

16.3.2

Half .................................................................................................................................... 332

16.3.3

Exact .................................................................................................................................. 333

16.4

ToolTip ...................................................................................................................................... 333

16.4.1

ToolTipPlacement ............................................................................................................. 333

16.4.2

Tooltip Precision................................................................................................................ 334

16.5

Appearance and Styling ............................................................................................................ 335

16.5.1

Item Size ............................................................................................................................ 335

16.5.2

Item Spacing ...................................................................................................................... 335

16.5.3

Number of Items ............................................................................................................... 335

16.5.4

Read Only .......................................................................................................................... 336

16.5.5

RatingSettings ................................................................................................................... 336

17

SfSchedule ..................................................................................................................................... 339

17.1

Overview ................................................................................................................................... 339

17.1.1
17.2

Key Features ...................................................................................................................... 339

Getting Started.......................................................................................................................... 339

17.2.1

Adding control reference to the application .................................................................... 340

17.2.2

Initializing Schedule .......................................................................................................... 340

17.2.3

Populating Events.............................................................................................................. 342

17.2.4

Populating Recursive Events ............................................................................................. 344

17.2.5

Enabling Appointments Inline ........................................................................................... 346

17.2.6

Restricting Dates ............................................................................................................... 348

17.3

Populating Appointments ......................................................................................................... 350

17.3.1

Adding appointments using Collection ............................................................................. 350

17.3.2

Adding appointments by implementing data source protocol ......................................... 351

17.4

Date Navigation and Gesture .................................................................................................... 354

17.4.1

Forward ............................................................................................................................. 354

17.4.2

Backward........................................................................................................................... 355

17.4.3

Move to Date .................................................................................................................... 355

17.4.4

Enable/disable navigation ................................................................................................. 356

17.4.5

Min Max dates. ................................................................................................................. 356

17.4.6

Inline.................................................................................................................................. 357

17.4.7

FirstDay of the Week......................................................................................................... 359

17.5

Views ......................................................................................................................................... 360

17.5.1

Day View ........................................................................................................................... 360

17.5.2

Week View ........................................................................................................................ 363

17.5.3

Work Week View............................................................................................................... 366

17.5.4

Month View....................................................................................................................... 369

17.6

Recurrence ................................................................................................................................ 372

17.6.1

Recurrence Pattern ........................................................................................................... 372

17.6.2

RRule generator ................................................................................................................ 373

17.7

Localization & Globalization...................................................................................................... 375

17.7.1
17.8

Schedule Custom String Localization ................................................................................ 376

Appearance & Styling ................................................................................................................ 377

17.8.1

Cell Customization ............................................................................................................ 377

17.8.2

Appointment Customization. ............................................................................................ 382

18

SfTreeMap ..................................................................................................................................... 387

18.1

Overview ................................................................................................................................... 387

18.1.1

Key Features ...................................................................................................................... 387

18.1.2

Use Case Scenarios............................................................................................................ 387

18.2

Getting Started.......................................................................................................................... 387

18.2.1

Create your first TreeMap in Objective C ......................................................................... 387

18.2.2

Create your first TreeMap in Swift.................................................................................... 400

Welcome to Syncfusion Essential Studio for iOS

How to best read this user guide

1 Welcome to Syncfusion Essential Studio for iOS


Essential Studio for iOS is a comprehensive collection of enterprise-grade iOS components for building
the modern Mobile applications. It includes all the UI controls that are typically required for building
line-of-business (LOB) applications including Charts, Gauge, Schedule, Maps and much more.

1.1 How to best read this user guide


The best way to read the User guide is to start with the Getting Started section of the
documentation for the component that you need. The Getting Started guide gives information
needed to know before writing the code. This is the only section recommended for end-to-end
reading before writing the code. All the other information can be referred as and when needed.
Now, that you are familiar with the basics of using the component, the next step would be to
start integrating the component into your application. A good starting point would be to refer to
the code examples in the sample browser. It is very likely that you would find a code example
that resembles your intended usage scenario.
After you have integrated the component into your application, it is likely that you would need
additional information on specific features and API. Search the specific topic by using the search
box available at the top of the user guide.
Another valuable resource is the API reference that provides detailed information on the classes
and its members.

1.2 Additional help resources


The Knowledge Base section contains responses to some of the most common questions that other
customers had asked in the past. You can search for topics that are not covered in the user guide.
Similar to the Knowledge Base, the Forum section also contains responses to questions of other
customers asked in the past.

1.3 Create a support incident


In case, you are not able to find the information that you are looking for in the self-help resources
mentioned above, then please contact us by creating a support ticket.

2 System Requirements
Following are the prerequisites required for Essential Studio for iOS components,
OS X Mountain Lion (10.8.4) and later versions.
XCode 5.0 or higher version
iOS 7.0 or higher version

3 Installation and Deployment


3.1 Downloading and exploring the package
You can download the syncfusionessentialios package from the following link:
http://www.syncfusion.com/products/ios
Unzip the syncfusionessentialios file. You can find the following finders as listed here.
Frameworks

Copyright 2001 - 2016 Syncfusion Inc.

11

Installation and Deployment

Add Framework reference to the project

This finder contains frameworks of all the components. You can refer to these frameworks to your
project.
Infrastructure
This finder contains:
License Agreement- Explains the software license agreement.
Read Me- Contains important information on configuring Essential Studio for iOS, for optimal
use.
Release Notes- Contains a list of newly added controls, features and bugs that are fixed for the
particular release.
Samples
After you download and unzip the syncfusionessentialios zip file, you can find the Objective-C sample
browser in the following location.
{Unzipped location}/syncfusionessentialios/Samples/ObjectiveC
Similarly, the Swift sample browser can be found in the following location.
{Unzipped location}/syncfusionessentialios/Samples/Swift

3.2 Add Framework reference to the project


After you download and unzip the syncfusionessentialios zip file, you can proceed with the following
steps to add the framework to your project.

1. Open Xcode and choose Create a new Xcode project.


2.
3.
4.
5.

Choose Single View Application from the Choose a template for your new project dialog.
Give your project a name and click Next.
Specify the location for your project and click Create.
Scroll down to the Linked Frameworks and Libraries section in General tab in your project
settings and click on the + button.

6. Click AddOther button.

Copyright 2001 - 2016 Syncfusion Inc.

12

Installation and Deployment

Add Framework reference to the project

7. Navigate to the unzipped location and select the framework that you need from the
Frameworks folder and click Open.
Example
{unzipped location}\ syncfusionessentialios\ Frameworks\ SFChartUI.framework

8. Now the selected framework is added to the project.

Copyright 2001 - 2016 Syncfusion Inc.

13

SfAutoComplete

SfAutoComplete

4 SfAutoComplete
4.1 SfAutoComplete
AutoComplete functionality provides you with suggestions while typing. There are several modes of
suggestions. The suggested text can be appended to the original text or it can be displayed in a dropdown list so that you can choose from different options.

Figure 1: AutoComplete

4.1.1 Key Features


Watermark The control shows the watermark text.
AutoCompleteMode The control provides you with suggestions, based on a predefined
collection while typing.
SuggestionMode The suggestions list can be displayed with 8 types of search patterns.
AutoCompleteSource A list of strings, that is loaded to the control for displaying suggestions.

4.2 Getting Started


Create your first AutoComplete in Objective C
Create your first AutoComplete in Swift

4.2.1 Create your first AutoComplete in Objective C


This section provides a quick overview to work with the AutoComplete in Objective C. The following
example explains how to create an AutoComplete with AutoCompleteMode and SuggestionModes.

Copyright 2001 - 2016 Syncfusion Inc.

14

SfAutoComplete

Getting Started

AutoComplete
4.2.1.1 Add Framework reference to the project
You can learn how to add framework to your project through the following link:
http://help.syncfusion.com/ios/introduction/installation-and-deployment
4.2.1.2 Create an AutoComplete control
To develop an application with iOS AutoComplete is simple. The following steps explain how to create
and configure its elements,

1. Create an AutoComplete object in the View Controller and add the AutoComplete as subview in
the viewdidload override method.
2. You can create an AutoComplete object by using the following code example.
C
@interface ViewController ()
{
SFAutoComplete *autocomplete;
}

Copyright 2001 - 2016 Syncfusion Inc.

15

SfAutoComplete

Getting Started

- (void)viewDidLoad
{
[super viewDidLoad];
autocomplete=[[ SFAutoComplete alloc]init];
[self.view addSubview:autocomplete];
}

4.2.1.3 Setting the AutoCompleteSource to AutoComplete


You can set the suggestions list to the AutoComplete using the AutoCompleteSource property.
C
-(NSMutableArray*) countryArray{
NSMutableArray * array= [NSMutableArray array];
[array addObject:[[AutoCompleteSource alloc]init:@"Afghanistan"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Akrotiri"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Albania"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Algeria"]];
}
@property (nonatomic, strong) AutoCompleteSource *source;
_source=[[AutoCompleteSource alloc]init];
autoComplete1.autoCompleteSource=[_source countryArray];

4.2.1.4 Setting AutoComplete Customizations


AutoComplete can be customized by setting the properties as explained in the following code example.
C
_autoComplete1.suggestionMode=SFAutoCompleteSuggestionModeStartsWith;
_autoComplete1.autoCompleteSource=[_source countryArray];
_autoComplete1.tableViewStyle=UITableViewCellStyleDefault;
_autoComplete1.watermark=@"Enter country name";
_autoComplete1.autoCompleteMode=SFAutoCompleteAutoCompleteModeSuggest;
_autoComplete1.popUpDelay = 100;

4.2.2 Create your first AutoComplete in Swift


This section provides a quick overview to work with AutoComplete in Swift. This example explains how
to create an AutoComplete with different AutoCompleteMode and SuggestionModes.

Copyright 2001 - 2016 Syncfusion Inc.

16

SfAutoComplete

Getting Started

Figure 3: AutoComplete
4.2.2.1 Create an AutoComplete control
To develop an application with the iOS BusyIndicator is simple. The following steps explain how to
create and configure its elements,

1. Create an AutoComplete object in the View Controller and add the AutoComplete as subview
in the viewdidload override method.
2. You can create an AutoComplete object by using the following code example.
C
var autoComplete: SFAutoComplete = SFAutoComplete ();
override func load(frame:CGRect)
{
super.viewDidLoad()
autoComplete.frame = self.view.bounds;
self.view.addSubview(autoComplete);
}

Copyright 2001 - 2016 Syncfusion Inc.

17

SfAutoComplete

AutoCompleteSource

4.2.2.2 Setting the AutoCompleteSource to AutoComplete


You can set the suggestions list to AutoComplete using the AutoCompleteSource property.
C
autoComplete1.autoCompleteSource = ["Afghanistan",
"Akrotiri",
"Albania",
"Algeria",
"American Samoa",
"Andorra"];

4.2.2.3 Setting AutoComplete Customizations


AutoComplete is customized by setting the properties as explained in the following code example.
C
autoComplete1.suggestionMode=SFAutoCompleteSuggestionModeStartsWith;
autoComplete1.watermark="Starts with S, M or B";
autoComplete1.maxDropDownHeight=90;
autoComplete1.autoCompleteMode=SFAutoCompleteAutoCompleteModeSuggest;
autoComplete1.popUpDelay = 200;

4.3 AutoCompleteSource
The AutoCompleteSource property in the AutoComplete control is used to set the list of strings to the
suggestions dropdown. The list is filtered based on the suggestion mode set.
C
-(NSMutableArray*) countryArray{
NSMutableArray * array= [NSMutableArray array];
[array addObject:[[AutoCompleteSource alloc]init:@"Afghanistan"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Akrotiri"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Albania"]];
[array addObject:[[AutoCompleteSource alloc]init:@"Algeria"]];
}
@property (nonatomic, strong) AutoCompleteSource *source;
_source=[[AutoCompleteSource alloc]init];
autoComplete1.autoCompleteSource=[_source countryArray];

C
autoComplete1.autoCompleteSource = ["Afghanistan",
"Akrotiri",
"Albania",
"Algeria",
"American Samoa",
"Andorra"];

Copyright 2001 - 2016 Syncfusion Inc.

18

SfAutoComplete

AutoCompleteMode

AutoCompleteSource

4.4 AutoCompleteMode
The AutoCompleteMode property is used to customize the behavior of the suggestions that are filtered
according to the text entered. By default there are three AutoComplete modes provided. They are:
Append Appends the first matching string with the entered character.
Suggest Displays the suggestion in the dropdown.
SuggestAppend Displays the suggestion in the dropdown along with appending the first
matching string.
C
autoComplete1.autoCompleteMode=SFAutoCompleteAutoCompleteModeAppend;

C
autoComplete1.autoCompleteMode=SFAutoCompleteAutoCompleteModeAppend;

AutoComplete with Append mode

Copyright 2001 - 2016 Syncfusion Inc.

19

SfAutoComplete

SuggestionMode

4.5 SuggestionMode
This property is used to define the filter list in the DropDown. There are eight types of SuggestionModes
that can be applied to AutoComplete.
StartsWith
StartsWithCaseSensitive
Contains
ContainsWithCaseSensitive
Equals
EqualsWithCaseSensitive
EndsWith
EndsWithCaseSensitive
C
autoComplete1.suggestionMode=SFAutoCompleteSuggestionModeStartsWith;

C
autoComplete1.suggestionMode=SFAutoCompleteSuggestionModeStartsWith;

StartsWith

Copyright 2001 - 2016 Syncfusion Inc.

20

SfAutoComplete

SuggestionMode

StartsWithCaseSensitive

Contains

Copyright 2001 - 2016 Syncfusion Inc.

21

SfAutoComplete

SuggestionMode

ContainsWithCaseSensitive

Equals

Copyright 2001 - 2016 Syncfusion Inc.

22

SfAutoComplete

MaximumDropDownHeight

EqualsWithCaseSensitive

EndsWith

EndsWithCaseSensitive

4.6 MaximumDropDownHeight
C
_autoComplete1.maxDropDownHeight = 100;

C
autoComplete1.maxDropDownHeight=90;

Copyright 2001 - 2016 Syncfusion Inc.

23

SfAutoComplete

MinimumPrefixCharacter

MaximumDropDownHeight

4.7 MinimumPrefixCharacter
C
_autoComplete1.minimumPrefixCharacters = 2;

C
autoComplete2.minimumPrefixCharacters=2;

Copyright 2001 - 2016 Syncfusion Inc.

24

SfBarcode

PopUpDelay

MinimumPrefixCharacter

4.8 PopUpDelay
This property is used to customize when the dropdown should display the suggested list.
C
autoComplete1.popUpDelay = 100;

C
autoComplete1.popUpDelay = 200;

4.9 WaterMark
This property is used to customize the watermark text that is displayed when the textbox is empty.
C
autoComplete1.watermark=@"Enter country name";

C
autoComplete1.watermark=" Enter country name ";

Watermark

5 SfBarcode
5.1 SfBarcode
Essential Barcode for iOS provides a perfect approach to encode texts by using supported symbol types
that comprises one dimensional Barcodes and two dimensional Barcodes. The basic structure of a
Barcode consists of one or more data characters, optionally one or two check characters, a start pattern
as well as a stop pattern.

Copyright 2001 - 2016 Syncfusion Inc.

25

SfBarcode

Getting Started

iOS device with 1D & 2D Barcodes

5.2 Getting Started


5.2.1 Create your first Barcode in Objective C
This section explains how to configure a Barcode for iOS application by using the Objective C. To get
started with the Essential Barcode, refer to the following steps and in result, you get the output on iOS
devices as follows.

Copyright 2001 - 2016 Syncfusion Inc.

26

SfBarcode

Getting Started

QR Barcode output
5.2.1.1 Add framework reference to the project
You can refer to the following link to learn how to refer to the framework to your project.
Syncfusion iOS components installation
Similarly, the framework of SfBarcode is selected from the installed location to configure the Barcode.
5.2.1.2 Example
{unzipped location}\ syncfusionessentialios\ Frameworks\ SFBarcodeUI.framework
5.2.1.3 Configure the Barcode control
The following steps explain you how to create and configure a Barcode.

1. Add reference to the SfBarcode in view controller as follows.


C
//Objective C
#import <SFBarcodeUI/SFBarcodeUI.h>

2. Create an instance of SfBarcode in view controller and add it as sub view in viewDidLoad
override method.

Copyright 2001 - 2016 Syncfusion Inc.

27

SfBarcode

Getting Started

C
//Objective C
- (void)viewDidLoad
{
[super viewDidLoad];
//Initializes the Barcode.
SFBarcode *barcode = [[SFBarcode alloc]init];
[self.view addSubview:barcode];
}

3. Then you can assign the text that you want to encode.
C
//Objective C
barcode.text = @"www.wikipedia.org";

4. Specify the required symbology to encode the given text. By default, the given text is encoded
by using the Code 39 symbology.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeQRCode;

5. To customize the Barcode, initialize the settings of the corresponding Barcode symbology.
C
//Objective C
SFQRBarcodeSettings *settings = [[SFQRBarcodeSettings alloc]init];
settings.xDimension = 6;
barcode.symbologySettings = settings;

6. Finally, the Barcode is generated as displayed in the screenshot by using the following code
example.
C
//Objective C
- (void)viewDidLoad
{
[super viewDidLoad];
//Initializes the Barcode.
SFBarcode *barcode = [[SFBarcode alloc]init];
//Sets the text to encode.
barcode.text = @"www.wikipedia.org";
barcode.symbology = SFBarcodeSymbolTypeQRCode;
//Initializes the corresponding settings to customize Barcode.

Copyright 2001 - 2016 Syncfusion Inc.

28

SfBarcode

Getting Started

SFQRBarcodeSettings *settings = [[SFQRBarcodeSettings alloc]init];


settings.xDimension = 6;
//Assigns settings to Barcode.
barcode.symbologySettings = settings;
[self.view addSubview:barcode];
}

Final output of iOS getting started application

5.2.2 Create your first Barcode in Swift


This section explains how to configure a Barcode for iOS application by using the Objective C. To get
started with the Essential Barcode, refer to the following steps and in result, you get the output on iOS
devices as follows.

Copyright 2001 - 2016 Syncfusion Inc.

29

SfBarcode

Getting Started

QR Barcode output
Similarly, the framework of the SfBarcode is selected from the installed location to configure the
Barcode.
5.2.2.1 Example
{unzipped location}\ syncfusionessentialios\ Frameworks\ SFBarcodeUI.framework
5.2.2.2 Configure the Barcode control
The following steps explain you how to create and configure a Barcode.

1. Add reference to the SfBarcode in view controller as follows


C
//Swift
import SFBarcodeUI

2. Then, create an instance of the SfBarcode and add it as sub view in viewDidLoad override
function.
C
//Swift

Copyright 2001 - 2016 Syncfusion Inc.

30

SfBarcode

Getting Started

override func viewDidLoad()


{
super.viewDidLoad();
//Initializes the Barcode.
var barcode : SFBarcode = SFBarcode();
self.view.addSubview(barcode);
}

3. Then you can assign the text that you want to encode.
C
//Swift
barcode.text = "www.wikipedia.org";

4. Specify the required symbology to encode the given text. By default, the given text is encoded
by using the Code 39 symbology.
C
//Swift
barcode.symbology = SFBarcodeSymbolType.QRCode;

5. To customize the Barcode, initialize the settings of the corresponding Barcode symbology.
C
//Swift
var settings : SFQRBarcodeSettings = SFQRBarcodeSettings();
settings.xDimension = 6;
barcode.symbologySettings = settings;

6. Finally, the Barcode is generated as displayed in the screenshot for the following code example.
C
//Swift
- (void)viewDidLoad
{
[super viewDidLoad];
//Initializes the Barcode.
var barcode : SFBarcode = SFBarcode();
//Sets the text to encode.
barcode.text = "www.wikipedia.org";
barcode.symbology = SFBarcodeSymbolType.QRCode;
//Initializes corresponding settings to customize Barcode.
var settings : SFQRBarcodeSettings = SFQRBarcodeSettings();
settings.xDimension = 6;
//Assigns settings to Barcode.
barcode.symbologySettings = settings;

Copyright 2001 - 2016 Syncfusion Inc.

31

SfBarcode

Supported Symbologies

self.view.addSubview(barcode);
}

Final output of iOS getting started application

5.3 Supported Symbologies


Essential Barcode supports 10 variants of one dimensional and 2 variants of two dimensional Barcodes
that are illustrated as follows.

5.3.1 One Dimensional Barcodes


One dimensionalBarcode is also called as linear Barcode. The bars and spaces signified for each symbol
in one dimensional Barcodes are grouped in such a way to represent a specific ASCII character.
Codabar
Code 11
Code 32
Code 39
Code 39 Extended
Code 93
Code 93 Extended
Code 128A
Code 128B
Code 128C

Copyright 2001 - 2016 Syncfusion Inc.

32

SfBarcode

Supported Symbologies

5.3.1.1 Codabar
Codabar is a discrete numeric symbology that is used in libraries, blood banks and a variety of other
information processing applications.
Encodes only numeric characters and some special characters like dash (-), colon (:), slash (/),
plus (+).
Each character has three bars and four spaces.
Uses characters of A, B, C, D as start and stop characters.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCodaBar;

Codabar barcode
5.3.1.2 Code 11
Code 11 symbology is used mainly for labeling telecommunications equipment and it has the following
structure.
Allows character set of digits (0-9), dash (-).
Each character is encoded with 3 bars and 2 spaces.
Of these five elements, there may be two wide and three narrow elements or one wide and four
narrow elements.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode11;

Copyright 2001 - 2016 Syncfusion Inc.

33

SfBarcode

Supported Symbologies

Code 11 Barcode
5.3.1.3 Code 32
Code32 is mainly used for coding pharmaceuticals, cosmetics and dietetics and it contains following
structure:
Starts with 'A' character (ASCII 65) that is not really encoded.
Encodes only the character set of length 8.
One digit for Checksum module 10 that is automatically calculated.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode32;

Copyright 2001 - 2016 Syncfusion Inc.

34

SfBarcode

Supported Symbologies

Code 32 Barcode
5.3.1.4 Code 39
Code 39 is a symbology of Barcode that encodes alphanumeric characters into a series of bars. It may be
of any length, although more than 25 characters really begin to push the bounds. This symbology is the
only type of the Barcode in common use that does not require a checksum.
Allows character set of digits (0-9), upper case alphabets (A-Z), and symbols like space, minus (-),
plus (+), period (.), dollar sign ($), slash (/), and percent (%).
Always starts and ends with an asterisk (*) symbol, termed as start and stop character.
Each character is encoded with 5 bars and 4 spaces where 3 are wide and 6 are narrow.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode39;

Copyright 2001 - 2016 Syncfusion Inc.

35

SfBarcode

Supported Symbologies

Code 39 Barcode
5.3.1.5 Code 39 Extended
Code 39 Extended symbology is an extended version of Code 39 that supports full ASCII character set.
So, it encodes lower case alphabets (a-z) as well as special characters in the keyboard.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode39Extended;

Code 39 Extended Barcode

Copyright 2001 - 2016 Syncfusion Inc.

36

SfBarcode

Supported Symbologies

5.3.1.6 Code 93
Code 93 is designed to complement and improve upon Code 39. It represents the full ASCII character set
by using the combination of 2 characters. It is a continuous, variable-length symbology and it produces
denser code.
Encodes character set of uppercase alphabets (A-Z), digits (0-9), and special characters like
asterisk (*), dash (-), dollar ($), percent (%), Space, dot (.), slash (/), and plus (+).
The asterisk (*) is not a true encoding character, but it is the start and stop symbol for Code 93
symbology.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode93;

Code 93 Barcode
5.3.1.7 Code 93 Extended
Code 93 is designed to complement and improve upon Code 39. It represents the full ASCII character set
by using the combination of 2 characters. It is a continuous, variable-length symbology and it produces
denser code.
Encodes character set of uppercase alphabets (A-Z), digits (0-9), and special characters like
asterisk (*), dash (-), dollar ($), percent (%), Space, dot (.), slash (/), and plus (+).
The asterisk (*) is not a true encoding character, but it is the start and stop symbol for Code 93
symbology.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode93Extended;

Copyright 2001 - 2016 Syncfusion Inc.

37

SfBarcode

Supported Symbologies

Code 93 Extended Barcode


5.3.1.8 Code 128
Code 128 is a variable length, high density, alphanumeric, linear Barcode symbology. It is capable of
encoding full ASCII character set and extended character sets. This symbol includes a checksum digit for
verification and the Barcode may also be verified character-by-character for parity of each data byte.
5.3.1.9 Code 128 A
Code 128 A (or Chars Set A) includes all of the standard upper case U.S. alphanumeric keyboard
characters and punctuation characters together with the control characters, (characters with ASCII
values from 0 to 95 inclusive), and seven special characters.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode128A;

Copyright 2001 - 2016 Syncfusion Inc.

38

SfBarcode

Supported Symbologies

Figure 17: Code 128A Barcode


5.3.1.10 Code128 B
Code 128 B (or Chars Set B) includes all the standard upper case alphanumeric keyboard characters and
punctuation characters together with the lower case alphabetic characters (characters with ASCII values
from 32 to 127 inclusive), and seven special characters.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode128B;

Copyright 2001 - 2016 Syncfusion Inc.

39

SfBarcode

Supported Symbologies

Code 128B Barcode


5.3.1.11 Code128 C
Code 128 C (or Chars Set C) includes the set of 100 digit pairs from 00 to 99 inclusive, as well as three
special characters. This allows numeric data to be encoded as two data digits per symbol character
effectively twice the density of standard data.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeCode128C;

Code 128C Barcode


5.3.1.12 Code 128 Special characters:
The last seven characters of Code Sets A and B (character values 96 - 102) and the last three characters
of Code Set C (character values 100 - 102) are special non-data characters with no ASCII character
equivalents that have particular significance to the Barcode reading device.
Note: When you specify that the data must be encoded by using Char Set C, then the number of
characters after it must be even.

5.3.2 Two Dimensional Barcodes


Two dimensional Barcode is a way to represent information by using two-dimensional approach. It is
similar to one dimensional Barcode, but can represent more data per unit area.
QR Code
Data Matrix
5.3.2.1 QR Code
QR Code is a two dimensional symbology that is popularly used in automotive industry. It is known for
fast readability and greater storage capacity.

Copyright 2001 - 2016 Syncfusion Inc.

40

SfBarcode

Supported Symbologies

C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeQRCode;

QR Barcode
5.3.2.2 Data Matrix
DataMatrix symbology is widely used in printed media such as labels and letters. It can be read easily by
a Barcode reader and also by mobile phones. It consists of a Grid of dark and light dots or blocks forming
square or rectangular symbol. The data encoded in the Barcode can be either number or alphanumeric.
C
//Objective C
barcode.symbology = SFBarcodeSymbolTypeDataMatrix;

Copyright 2001 - 2016 Syncfusion Inc.

41

SfBarcode

Symbology Settings

Data Matrix Barcode


Note: By default, the width of the quiet zone on all four sides of the Barcode is equal to the dimension
of the blocks.

5.4 Symbology Settings


Each and every Barcode symbology can be personalized with optional settings that may affect the
appearance of specific Barcode.

5.4.1 One Dimensional Barcode settings


One dimensional Barcodes can be customized by using the following properties and they are commonly
used for all categories of supported one dimensional Barcodes.
By setting the barHeight property, the height of linear bars can be changed.
By setting the narrowBarWidth property, the width ratio of wide and narrow bars can be
customized.
One dimensional Barcodes can also have error detection settings.
By enabling the encodeStartStopSymbols property, start and stop symbols are added to signal a
Barcode reader that a Barcode has been scanned.
The enableCheckDigit property enables or disables the redundancy check by using a check digit
that is the decimal equivalent of a binary parity bit.
With the help of showCheckDigit property, the check digit can be shown or hidden.
The following code example shows how to change the settings of Code 39linear Barcode.
C
//Objective C
//Changes the settings of Code 39 linear Barcode.
SFCode39Settings *settings = [[SFCode39Settings alloc]init];

Copyright 2001 - 2016 Syncfusion Inc.

42

SfBarcode

Symbology Settings

settings.barHeight = 100;
settings.narrowBarWidth = 2;
settings.encodeStartStopSymbols = true;
settings.enableCheckDigit = false;
settings.showCheckDigit = false;

Similarly, you can specify the settings of other linear Barcodes corresponding to specified symbology.

5.4.2 Two Dimensional Barcode Settings


Two dimensional Barcodes are customized by using xDimension property that modifies its block size and
it is commonly used for all kinds of supported two dimensional Barcodes.
5.4.2.1 Data Matrix Settings
The Data Matrix symbology can be customized with the help of the following settings.
C
//Objective C
//To change the settings of Data Matrix barcode.
SFDataMatrixSettings *settings = [[SFDataMatrixSettings alloc]init];
settings.xDimension = 8;
settings.size = SFDataMatrixSizeAuto;
settings.encoding = SFDataMatrixEncodingAuto;

The encoding property is used to specify the encoding technique from enumeration of
SfDataMatrixEncoding that contains encoding techniques such as ASCII, ASCIINumeric, Auto and
Base256.
The size property allows the user to specify the size of the Barcode from a set of predefined
sizes available in the SFDataMatrixSize enumeration.
Data Matrix Size

Description

Auto

Size is chosen based on the input data

Size10x10

Square matrix with 10 rows and 10 columns.

Size12x12

Square matrix with 12 rows and 12 columns.

Size14x14

Square matrix with 14 rows and 14 columns.

Size16x16

Square matrix with 16 rows and 16 columns.

Size18x18

Square matrix with 18 rows and 18 columns.

Size20x20

Square matrix with 20 rows and 20 columns.

Size22x22

Square matrix with 22 rows and 22 columns.

Size24x24

Square matrix with 24 rows and 24 columns.

Size26x26

Square matrix with 26 rows and 26 columns.

Size32x32

Square matrix with 32 rows and 32 columns.

Copyright 2001 - 2016 Syncfusion Inc.

43

SfBarcode

Symbology Settings

Size36x36

Square matrix with 36 rows and 36 columns.

Size40x40

Square matrix with 40 rows and 40 columns.

Size44x44

Square matrix with 44 rows and 44 columns.

Size48x48

Square matrix with 48 rows and 48 columns.

Size52x52

Square matrix with 52 rows and 52 columns.

Size64x64

Square matrix with 64 rows and 64 columns.

Size72x72

Square matrix with 72 rows and 72 columns.

Size80x80

Square matrix with 80 rows and 80 columns.

Size88x88

Square matrix with 88 rows and 88 columns.

Size96x96

Square matrix with 96 rows and 96 columns.

Size104x104

Square matrix with 104 rows and 104 columns.

Size120x120

Square matrix with 120 rows and 120 columns.

Size132x132

Square matrix with 132 rows and 132 columns.

Size144x144

Square matrix with 144 rows and 144 columns.

Size8x18

Rectangular matrix with 8 rows and 18 columns.

Size8x32

Rectangular matrix with 8 rows and 32 columns.

Size12x26

Rectangular matrix with 12 rows and 26 columns.

Size12x36

Rectangular matrix with 12 rows and 36 columns.

Size16x36

Rectangular matrix with 16 rows and 36 columns.

Size16x48

Rectangular matrix with 16 rows and 48 columns.

5.4.2.2 QR Code Settings


The Data Matrix symbology can be customized by using the following settings.
C
//Objective C
//Changes the settings of QR Barcode.
SFQRBarcodeSettings *settings = [[SFQRBarcodeSettings alloc]init];
settings.xDimension = 5;
settings.inputMode = SFQRInputModeBinary;
settings.errorCorrectionLevel = SFQRErrorCorrectionLevelLow;
settings.version = SFQRVersionAuto;

The version property allows you to set various types of version for QR code from SFQRVersion
enumeration. By default, its value is set as Auto.

Copyright 2001 - 2016 Syncfusion Inc.

44

SfBarcode

Symbology Settings

Table 2 : SFQRVersion enumeration details


SFQRVersion

Description

Version01

Measures 21 x 21 modules

Version02

Measures 25 x 25 modules

Version03

Measures 29 x 29 modules

Version04

Measures 33 x 33 modules

Version05

Measures 37 x 37 modules

Version06

Measures 41 x 41 modules

Version07

Measures 45 x 45 modules

Version08

Measures 49 x 49 modules

Version09

Measures 53 x 53 modules

Version10

Measures 57 x 57 modules

Version11

Measures 61 x 61 modules

Version12

Measures 65 x 65 modules

Version13

Measures 69 x 69 modules

Version14

Measures 73 x 73 modules

Version15

Measures 77 x 77 modules

Version16

Measures 81 x 81 modules

Version17

Measures 85 x 85 modules

Version18

Measures 89 x 89 modules

Version19

Measures 93 x 93 modules

Version20

Measures 97 x 97 modules

Version21

Measures 101 x 101 modules

Version22

Measures 105 x 105 modules

Version23

Measures 109 x 109 modules

Version24

Measures 113 x 113 modules

Version25

Measures 117 x 117 modules

Version26

Measures 121 x 121 modules

Version27

Measures 125 x 125 modules

Copyright 2001 - 2016 Syncfusion Inc.

45

SfBarcode

Symbology Settings

Version28

Measures 129 x 129 modules

Version29

Measures 133 x 133 modules

Version30

Measures 137 x 137 modules

Version31

Measures 141 x 141 modules

Version32

Measures 145 x 145 modules

Version33

Measures 149 x 149 modules

Version34

Measures 153 x 153 modules

Version35

Measures 157 x 157 modules

Version36

Measures 161 x 161 modules

Version37

Measures 165 x 165 modules

Version38

Measures 169 x 169 modules

Version39

Measures 173 x 173 modules

Version40

Measures 177 x 177 modules

The ErrorCorrectionLevel property employs error correction to generate a series of error


correction code words that are added to the data code word sequence in order to enable the
symbol to withstand damage without loss of data. By default, its value is set as Low.
Error Correction Level

Recovery Capacity % (approx.)

Low

Medium

15

Quartile

25

High

30

The inputMode property allows you to select specific set of input characters. You may select the
most suitable input mode. By default, its value is set as Binary Mode.
Input Mode

Possible characters

NumericMode

0,1,2,3,4,5,6,7,8,9

AlphanumericMode

0 to 9, A to Z, space, $, %, *, +, -,., /, :

BinaryMode

Shift JIS characters

Copyright 2001 - 2016 Syncfusion Inc.

46

SfBarcode

Barcode Customization

5.5 Barcode Customization


5.5.1 Bar Customization
The color of the Barcode can be customized by using the properties of darkBarColor and lightBarColor in
the SfBarcode.
The darkBarColor represents the color of the dark bar (Black color by default) and the lightBarColor
represents the color of the gap between two adjacent black bars (White color by default).
C
//SWIFT
//Changes the color of darker area of Barcode.
barcode.darkBarColor = [UIColor blueColor];
//Changes the color of lighter area of Barcode.
barcode.lightBarColor = [UIColor yellowColor];

Barcode with bar color customization


Note: The darkBarColor and lightBarColor customizations are applicable only for one dimensional
Barcodes. In order, to recognize a Barcode symbol by a scanner, there must be an adequate contrast
between the dark bars and the light spaces. All the Barcode scanners do not have support for colored
Barcodes.

5.5.2 Text Customization


The text representing the Barcode can be customized by using the following properties.
The color of text can be altered by using the textColor property.
The horizontal alignment of text can be customized with the help of the textAlignment property.
The gap between Barcode and text can be adjusted by setting property of textGapHeight.
To change the location of text vertically, you can make use of the textLocation property with
options of top and bottom location.

Copyright 2001 - 2016 Syncfusion Inc.

47

SfBusyindicator

SfBusyIndicator

C
//Swift
//Changes the color of text.
barcode.textColor = [UIColor redColor];
//Changes the font style of text.
barcode.textFont = [UIFont boldSystemFontOfSize:14];
//Changes the height of gap between text and Barcode.
barcode.textGapHeight = 10;
//Changes the location of text.
barcode.textLocation = SFBarcodeTextLocationTop;
//Changes the alignment of text.
barcode.textAlignment = SFBarcodeTextAlignmentCenter;

Barcode with text customization

6 SfBusyindicator
6.1 SfBusyIndicator
The BusyIndicator control includes over 13 built-in animations that can be displayed within your
applications.

BusyIndicator

Copyright 2001 - 2016 Syncfusion Inc.

48

SfBusyindicator

Getting Started

6.1.1 Key Features


IsBusy The control shows the animation when this property is set.
Title A user customized string is displayed while showing animation.
Sizing The control view boxs height and width can be set.
AnimationTypes There are over 13 built-in animations that can be set with the control.

6.2 Getting Started


6.2.1 Create your first BusyIndicator in Objective C
This section provides a quick overview to work with the BusyIndicator in Objective C. You can also set
the required AnimationType to the BusyIndicator and customize it according to your requirements. This
example explains how to create the BusyIndicator with different AnimationTypes.

BusyIndicator
6.2.1.1 Add Framework reference to the project
You can refer to the following link to learn how to refer to the framework to your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
6.2.1.2 Create a BusyIndicator
To develop an application with iOS BusyIndicator is simple. Following steps explain how to create and
configure its elements,

1. Create a BusyIndicator object in the View Controller and add the BusyIndicator as subview
in viewdidload override method.

Copyright 2001 - 2016 Syncfusion Inc.

49

SfBusyindicator

Getting Started

2. You can create a BusyIndicator object by using the following code example.
C
@interface ViewController ()
{
SFBusyIndicator *busyIndicator;
}
- (void)viewDidLoad
{
[super viewDidLoad];
busyIndicator=[[ SFBusyIndicator alloc]init];
[self.view addSubview:busyIndicator];
}

6.2.1.3 Set the Animation Type to BusyIndicator


You can set the AnimationType to the BusyIndicator by using the property Animationtype and choose
among the 13 predefined animation types.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;

6.2.1.4 Set BusyIndicator Customizations


BusyIndicator can be customized by setting the properties as explained in the following code example.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;
busyIndicator.viewBoxWidth=100;
busyIndicator.viewBoxHeight=100;
busyIndicator.foreground=[UIColor redColor];
busyIndicator.title=@"Loading";
busyIndicator.backgroundColor=[UIColor whiteColor];
[self.view addSubview:busyIndicator];

6.2.2 Create your first BusyIndicator in Swift


This section provides a quick overview to work with the BusyIndicator in Swift. You can also set the
required AnimationType to BusyIndicator and customize it according to your requirements. This
example explains how to create a BusyIndicator with different AnimationTypes.

Copyright 2001 - 2016 Syncfusion Inc.

50

SfBusyindicator

Getting Started

BusyIndicator
6.2.2.1 Create a BusyIndicator
To develop an application with the iOS BusyIndicator is simple. Following steps explain how to create
and configure its elements,

1. Create a BusyIndicator object in the View Controller and add the BusyIndicator as subview in the
viewdidload override method.
2. You can create a BusyIndicator object by using the following code example.
C
var busyIndicator:SFBusyIndicator=SFBusyIndicator();
override func load(frame:CGRect)
{
super.viewDidLoad()
busyIndicator.frame = self.view.bounds;
self.view.addSubview(busyIndicator);
}

6.2.2.2 Set the Animation Type to BusyIndicator


You can set the AnimationType to the BusyIndicator by using the property Animationtype and choose
among the 13 predefined animation types.
C
busyIndicator.frame = self.view.bounds;
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;

Copyright 2001 - 2016 Syncfusion Inc.

51

SfBusyindicator

IsBusy

6.2.2.3 Set BusyIndicator Customizations


BusyIndicator can be customized by setting the properties as explained in the following code example.
C
busyIndicator.frame = self.view.bounds;
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;
busyIndicator.viewBoxWidth=100;
busyIndicator.viewBoxHeight=100;
busyIndicator.foreground= UIColor.redColor();
busyIndicator.title="Loading";
busyIndicator.backgroundColor=UIColor.whiteColor();
self.view.addSubview(busyIndicator)

6.3 IsBusy
The IsBusy property in the BusyIndicator control is used to determine whether an animation needs to be
executed or not.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.isBusy=true;

C
busyIndicator.frame = self.view.bounds;
busyIndicator.isBusy=true;

BusyIndicator

6.4 Title
The Title is displayed beneath the animation. The Title property can be used to get or set the content
that indicates the information related to loading.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.title= busyIndicator.title=@"Loading...";

C
busyIndicator.frame = self.view.bounds;
busyIndicator.title="Loading";

Copyright 2001 - 2016 Syncfusion Inc.

52

SfBusyindicator

Sizing

BusyIndicator with title

6.4.1 FontFace
FontFace can be used to define the font style and font size that can be set to the title that is displayed
beneath the animation.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.title= busyIndicator.title=@"Loading...";
busyIndicator.fontFace=[UIFont fontWithName:@"Calibri" size:(16)];

C
busyIndicator.frame = self.view.bounds;
busyIndicator.title="Loading";
busyIndicator.fontFace=UIFont(name: "Calibri", size: 16.0);

BusyIndicator with font face

6.5 Sizing
6.5.1 ViewBoxHeight
The ViewBoxHeight property allows you to set the height of the ViewBox.

6.5.2 ViewBoxWidth
ViewBoxWidth property allows you to set the width of the ViewBox.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.viewBoxWidth=100;
busyIndicator.viewBoxHeight=100;

C
busyIndicator.frame = self.view.bounds;
busyIndicator.viewBoxWidth=100;

Copyright 2001 - 2016 Syncfusion Inc.

53

SfBusyindicator

AnimationTypes

busyIndicator.viewBoxHeight=100;

ViewBox height and width

6.6 AnimationTypes
The AnimationTypes property for the SfBusyIndicator allows you to set one of the animations from the
built-in animations as the BusyIndicator.
C
busyIndicator=[[ SFBusyIndicator alloc]init];
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;

C
busyIndicator.frame = self.view.bounds;
busyIndicator.animationType=SFBusyIndicatorAnimationTypeBattery;

AnimationType - Ball

AnimationType - Battery

Copyright 2001 - 2016 Syncfusion Inc.

54

SfBusyindicator

AnimationTypes

AnimationType - DoubleCircle

AnimationType - ECG

AnimationType - Globe

AnimationType - HorizontalPulsingBox

Figure 14: AnimationType - MovieTime

Figure 15: AnimationType - Print

Copyright 2001 - 2016 Syncfusion Inc.

55

SfBusyindicator

AnimationTypes

Figure 16: AnimationType - Rectangle

Figure 17: AnimationType - RollingBall

Figure 18: AnimationType - SlicedCircle

Figure 19: AnimationType - SlicedCircle

Figure 20: AnimationType - ZoomingTarget

Copyright 2001 - 2016 Syncfusion Inc.

56

SfCalendar

Overview

7 SfCalendar
7.1 Overview
The Essential Android Calendar widget provides the multi-view representation to display and select one
or more dates within specified ranges. Also provides a gesture friendly UI to perform operations like
navigations, events, etc.
Essential Calendar can be used in various scenarios like ticket booking, events notifying, display working
days etc.

7.1.1 Key Features


Built-in Views A multi-view representation to display dates in month or year view layout.
Selection Enables users to select one or multiple dates.
Min Max dates Visible dates can be limited using the specified Minimum and Maximum
dates.

Blackout dates A collection of dates with cross mark representation that cannot be
interacted.

7.2 Getting Started


This section explains you the steps required to render the Calendar control, to change selection mode,
set min max dates and black out dates for the control. This section covers only the minimal features that
you need to know to get started with the Calendar.

Copyright 2001 - 2016 Syncfusion Inc.

57

SfCalendar

Getting Started

7.2.1 Create your first Calendar control in iOS


Illustration for the procedures to install the Syncfusion Essential Studio can be refered from Syncfusion
ios components installation, Syncfusion.SfCalendar.ios.aar should be used to add calendar reference
in the application.
7.2.1.1

Initializing Calendar
Adding reference to calendar

OBJECTIVE-C
#import <SFCalendarUI/SFCalendarUI.h>

SWIFT
import SFCalendarUI

Initialize calendar instance in viewDidLoad method and then add the calendar as a subview of
self view.
Copyright 2001 - 2016 Syncfusion Inc.

58

SfCalendar

Getting Started

OBJECTIVE-C
-(void)viewDidLoad {
[super viewDidLoad];
CGRect currentFrame =
CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y+20,self.view.fr
ame.size.width,self.view.frame.size.height-20);
//initialising control in the allocated frame size
_calendar=[[SFCalendar alloc] initWithFrame:currentFrame];
[self.view addSubview: _calendar];
}

SWIFT
override func viewDidLoad() {
super.viewDidLoad()
//initializing calendar
var _calendar:SFCalendar=SFCalendar();
var frameWithMargin : CGRect =
CGRectMake(self.view.bounds.origin.x,self.view.bounds.origin.y,
self.view.bounds.size.width, self.view.bounds.size.height);
//initialising control in the allocated frame size
_calendar.frame = frameWithMargin;
self.view.addSubview(_calendar)
}

Copyright 2001 - 2016 Syncfusion Inc.

59

SfCalendar

Getting Started

7.2.1.2 Enabling Multiple Selection


To enable multiple selection, change the selection type using selectionMode property. Check the
Selection Mode section for more details.
OBJECTIVE-C
_calendar=[[SFCalendar alloc] initWithFrame:currentFrame];
_calendar.selectionMode = SFCalenderSelectionModeMultiple;
[self.view addSubview: _calendar];

SWIFT
var _calendar:SFCalendar=SFCalendar();
_calendar.selectionMode = SFCalenderSelectionModeMultiple;
_calendar.frame = frameWithMargin;
self.view.addSubview(_calendar)

Copyright 2001 - 2016 Syncfusion Inc.

60

SfCalendar

Getting Started

7.2.1.3 Setting blackout dates


Add the dates into blackOutDates property that needs to be disabled among visible dates. Check the
BlackOutDates section for more details.
For instance add all the holiday dates to black out dates.
OBJECTIVE-C
dateArray = [NSMutableArray array];
NSDate *now = [NSDate date];
[dateArray addObject:now];
NSDateComponents *components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=6;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];

Copyright 2001 - 2016 Syncfusion Inc.

61

SfCalendar

Getting Started

[dateArray addObject:startDate];
_calendar.blackoutDates=dateArray;
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=10;
components.month=12;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
[dateArray addObject:startDate];
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=27;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
[dateArray addObject:startDate];
_calendar.blackoutDates=dateArray;
[self.view addSubview: _calendar];

SWIFT
var dateArray:NSMutableArray = NSMutableArray();
var df = NSDateFormatter();
var now:NSDate=NSDate();
dateArray.addObject(now);
df.dateFormat = "dd MM yyyy";
var dateString4 = "28 Aug 2015";
var date4 = df.dateFromString(dateString4);
if let unwrappedDate4 = date4 {
dateArray.addObject(unwrappedDate4);
};
var dateString5 = "6 Oct 2015";
var date5 = df.dateFromString(dateString5);
if let unwrappedDate5 = date5 {
dateArray.addObject(unwrappedDate5);
};
var dateString6 = "27 Oct 2015";
var date6 = df.dateFromString(dateString6);
if let unwrappedDate6 = date6 {
dateArray.addObject(unwrappedDate6);
};
_calendar.blackoutDates = dateArray;
_calendar.frame = frameWithMargin;
self.view.addSubview(_calendar)

Copyright 2001 - 2016 Syncfusion Inc.

62

SfCalendar

Getting Started

7.2.1.4 Restricting Dates


Set minDate and maxDate property to limit visible dates range. Check the Min Max dates section for
more details.
OBJECTIVE-C
NSDate * date =[NSDate date];
NSDateComponents *mindate_componet = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
mindate_componet.day = mindate_componet.day - 10;
mindate_componet.minute = 0;
mindate_componet.second = 0;
mindate_componet.hour = 10 ;
NSDate *minDate = [[NSCalendar currentCalendar]
dateFromComponents:mindate_componet];
//assigning max display date
NSDateComponents *maxDate_component = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
maxDate_component.day = maxDate_component.day + 10;
maxDate_component.minute = 0;

Copyright 2001 - 2016 Syncfusion Inc.

63

SfCalendar

Getting Started

maxDate_component.second = 0;
maxDate_component.hour = 12 ;
NSDate *maxDate = [[NSCalendar currentCalendar]
dateFromComponents:maxDate_component];
_calendar.minDate = minDate;
_calendar.maxDate = maxDate;
[self.view addSubview: _calendar];

SWIFT
var df = NSDateFormatter();
df.dateFormat = "dd MM yyyy";
var dateString5 = "17 Oct 2015";
var minDate = df.dateFromString(dateString5);
if let unwrappedDate5 = minDate {
_calendar.minDate = unwrappedDate5;
};
var dateString6 = "5 Nov 2015";
var maxDate = df.dateFromString(dateString6);
if let unwrappedDate6 = maxDate {
_calendar.maxDate = unwrappedDate6;
};
self.view.addSubview(_calendar)

Copyright 2001 - 2016 Syncfusion Inc.

64

SfCalendar

Getting Started

7.2.2 Creating your first Calendar in Xamarin.iOS.


This section provides a quick overview to work with the Calendar in Objective C. This example explains
how to create an Calendar with different CalendarModes and SuggestionModes.
7.2.2.1 Referencing Essential Studio Components in Your Solution
After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation
folders, typically:
{Syncfusion Installed location}\Essential Studio {version number}\lib
You have to add the following assembly reference to the iOS classic project
ios\Syncfusion.SfCalendar.iOS.dll
And below assembly reference to the iOS unified project.
ios-unifed\Syncfusion.SfCalendar.iOS.dll
7.2.2.2 And and Configure the Calendar
The following steps explain on how to create an Calendar and configure its elements,
Adding reference to Calendar.

Copyright 2001 - 2016 Syncfusion Inc.

65

SfCalendar

Built-in Views

C#
using Syncfusion.SFCalendar.iOS;

Create an instance of SfCalendar


C#
@interface ViewController ()
{
SfCalendar *_calendar;
}
- (void)viewDidLoad
{
[super viewDidLoad];
_calendar=[[ SfCalendar alloc]init];
[self.view addSubview:SfCalendar];
}

Configure the properties for Calendar.


C#
_calendar.ViewMode = SFCalendarViewMode.SFCalendarViewModeMonth;
_calendar.Locale = new NSLocale("fr-FR")
_calendar.SelectionMode =
SFCalenderSelectionMode.SFCalenderSelectionModeSingle;
_calendar.TransitionMode = SFCalendarTransitionModee.
SFCalendarTransitionModeFloat;
NSDate today = new NSDate ();
NSCalendar calendar = NSCalendar.CurrentCalendar;
// Get the year, month, day from the date
NSDateComponents components = calendar.Components (NSCalendarUnit.Year |
NSCalendarUnit.Month | NSCalendarUnit.Day, today);
// Set the hour, minute, second
schedule.BlackoutDates = new NSMutableArray ();
components.Day -= 10;
for (int i = 0; i < 5; i++) {
NSDate startDate = calendar.DateFromComponents (components);
components.Day += 5;
schedule.BlackoutDates.Add (startDate);
}

7.3 Built-in Views


Calendar control provides two types of views to display dates such as month view and year view. It can
be assigned to the calendar control by using view mode property.
By default calendar control is assigned with month view. Based on the users preference calendar
viewed in any of the available two type.

Copyright 2001 - 2016 Syncfusion Inc.

66

SfCalendar

Built-in Views

7.3.1 Month View


This displays entire dates of a particular month, by default current month will be displayed on loading.
The current date is provided with seperate color different from the rest of the dates color in a month.
The events availability will be denoted within the cell based on its duration.
The dates in month view can be selected by three ways such as single, multiple and range which can be
modified using selectionMode.
OBJECTIVE-C
_calendar.viewMode = SFCalendarViewModeMonth;
[self.view addSubview: _calendar];

SWIFT
_calendar.viewMode = SFCalendarViewModeMonth;
self.view.addSubview(_calendar)

C#
sfCalendar.ViewMode=ViewMode.MonthView;

Copyright 2001 - 2016 Syncfusion Inc.

67

SfCalendar

7.3.1.1

Built-in Views

Month View Settings


Current day text color can be modified using todayTextColor.
The month view label settings class has the APIs to change date text size, day text size and
format options are available.
The background color of the inline view can be modified using inlineBackgroundColor
property.
The blackoutdate color can be modified with blackoutColor property.

OBJECTIVE-C
MonthViewSettings *viewSettings = [MonthViewSettings new];
viewSettings.todayTextColor = [UIColor redColor];
//setting label size and format properties
MonthLabelSettings *labelSettings = [MonthLabelSettings new];
labelSettings.dayLabelSize = 10;
labelSettings.dayLabelFormat = @"EEE";
labelSettings.dateLabelFormat = @"d";
labelSettings.dateLabelSize = 12;
viewSettings.labelSettings = labelSettings;

Copyright 2001 - 2016 Syncfusion Inc.

68

SfCalendar

Built-in Views

_calendar.monthViewSettings = viewSettings;
[self.view addSubview: _calendar];

SWIFT
var viewSettings:MonthViewSettings = MonthViewSettings();
viewSettings.todayTextColor = UIColor.redColor();
//setting label size and format properties
var labelSettings:MonthLabelSettings = MonthLabelSettings();
labelSettings.dayLabelSize = 10;
labelSettings.dayLabelFormat = "EEE";
labelSettings.dateLabelFormat = "d";
labelSettings.dateLabelSize = 12;
viewSettings.labelSettings = labelSettings;
_calendar.monthViewSettings = viewSettings;
self.view.addSubview(_calendar)

C#
MonthLabelSettings labelsettings = new MonthLabelSettings();
labelSettings.DateFormat = dd;
labelSettings.DayLabelSize = 20;
labelSettings.DayFormat = "EEE";
labelSettings.DateLabelSize = 12;
MonthViewSettings monthViewSettings = new MonthViewSettings();
monthViewSettings.TodayTextColor=Color.ParseColor("#1B79D6");
monthViewSettings.InlineBackgroundColor=Color.ParseColor("#E4E8ED");
monthViewSettings.SetWeekDayBackGroundColor(Color.ParseColor("#F7F7F7"));
monthviewSettings.MonthLabelSettings = labelSettings;
sfCalendar.MonthViewSettings=monthViewSettings;

Note: The view modes can be switched by clicking Header Text in MonthView or by Selecting a month in
YearView

7.3.2 YearView
This displays entire dates/month of a particular year, by default current year will be displayed on
loading. The years can be changed by swiping back and forth. The months can be navigated quickly by
selecting on the particular month in year view.
OBJECTIVE-C
_calendar.viewMode = SFCalendarViewModeYear;
[self.view addSubview: _calendar];

SWIFT
_calendar.viewMode = SFCalendarViewModeYear;
self.view.addSubview(_calendar)

C#
calendar.ViewMode=ViewMode.YearView;

Copyright 2001 - 2016 Syncfusion Inc.

69

SfCalendar

7.3.2.1

Built-in Views

Year View Settings


The month header color can be modified using monthHeaderTextColor property.
The year header and date text color can be changed using yearTextColor and dateTextColor
properties respectively.
The gravity of the month name can be modified using labelAlignment property, to position it to
left, right or center.
The complete layouts background color can be modified using yearLayoutBackground
property.

OBJECTIVE-C
SFYearViewSettings *viewSettigns = [SFYearViewSettings new];
viewSettigns.dateTextColor = [UIColor redColor];
viewSettigns.monthHeaderTextColor = [UIColor grayColor];
viewSettigns.yearLayoutBackground = [UIColor brownColor];
_calendar.yearViewSettings = viewSettigns;
[self.view addSubview: _calendar];

Copyright 2001 - 2016 Syncfusion Inc.

70

SfCalendar

Navigation and Gesture

SWIFT
var viewSettigns:SFYearViewSettings = SFYearViewSettings();
viewSettigns.dateTextColor =UIColor.redColor();
viewSettigns.monthHeaderTextColor = UIColor.grayColor();
viewSettigns.yearLayoutBackground = UIColor.brownColor();
_calendar.yearViewSettings = viewSettigns;
self.view.addSubview(_calendar)

C#
SfCalendar calendar = new SfCalendar(this);
YearViewSettings yearViewSettings = new YearViewSettings();
yearViewSettings.YearHeaderTextColor=Color.parseColor("#1B79D6");
yearViewSettings.MonthHeaderBackground=Color.parseColor("#E4E8ED");
yearViewSettings.DateTextColor=Color.RED;
yearViewSettings.HeaderLabelAlignment=LabelAlignment.Center;
calendar.YearViewSettings=yearViewSettings;
SetContentView(calendar);

7.4 Navigation and Gesture


7.4.1 Move to Date
Visible dates can be moved to specific date using moveToDate property available in Calendar. It will
move to any specific month if the viewMode is month view or move to year if it is a year view.
OBJECTIVE-C
NSDate * date =[NSDate date];
NSDateComponents *navigate = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
navigate.year = 2020;
navigate.month = 8;
navigate.day = 29;
navigate.minute = 0;
navigate.second = 0;
navigate.hour = 10 ;
NSDate *naivagate_Date = [[NSCalendar currentCalendar]
dateFromComponents:navigate];
[_calendar moveToDate:naivagate_Date];
[self.view addSubview: _calendar];

SWIFT
var dateString = "5 Aug 2020";
var moveToDate = df.dateFromString(dateString);
if let unwrappedDate = moveToDate {
_calendar.moveToDate(unwrappedDate)
};
self.view.addSubview(_calendar)

C#
Calendar moveToDate = Calendar.getInstance();

Copyright 2001 - 2016 Syncfusion Inc.

71

SfCalendar

Navigation and Gesture

moveToDate.Set
(
2010,
Calendar.AUGUST,
25,
0,
0,
0
);
calendar.MoveToDate=moveToDate;

Note: The specified date should lie between minDate and maxDate, if the specified date is greater
than maxDate then the view will be moved to maxDate and if the specified date is lesser than the
minDate then the view will be moved to minDate.

7.4.2 Toggle navigation


This navigation, using touch gesture can be enabled and disabled using navigationEnabled property
available in Calendar control. By default, navigationEnabled property is enabled.
Note: By default, calendar views can be moved backwards and forwards using touch swipe gesture.
OBJECTIVE-C
//disabling gesture navigation
_calendar.navigationEnabled = false;
[self.view addSubview: _calendar];

SWIFT
//disabling gesture navigation
_calendar.navigationEnabled = false;
self.view.addSubview(_calendar)

C#
calendar.ViewMode=ViewMode.MonthView;
calendar.NavigationEnable=false;

7.4.3 Transition modes


Dates can be navigated by using swipe gesture. By default those navigation are performed along with
Scroll animation. Other than the default scroll animation, there are other options available like card,
reveal, float animations. It can be changed by using transitionMode property of Calendar control.
OBJECTIVE-C
_calendar.transitionType = SFCalendarTransitionTypeFloat;
[self.view addSubview: _calendar];

SWIFT
_calendar.transitionType = SFCalendarTransitionTypeFloat;
self.view.addSubview(_calendar)

Copyright 2001 - 2016 Syncfusion Inc.

72

SfCalendar

Populating Events

C#
calendar.TransitionMode=TransitionMode.Card;

7.5 Populating Events


Calendar control has an inbuilt capability to display the events based on the calendar events collection
provided to appointment property. For events to be listed for a particular day, enable the inline feature
in month view cell.
Note: The default UI of the inline view with events will be like list of events with a dark background

Inline event support can be toggled on / off with enableInLine property.


OBJECTIVE-C
_calendar.enableInLine = true;
[self.view addSubview: _calendar];

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

73

SfCalendar

Populating Events

_calendar.enableInLine = true;
self.view.addSubview(_calendar)

C#
sfcalendar.showInLineEvent=True;

Note: The Inline function will be available only in month view with single selection mode.

7.5.1 Adding events using Collection


Calendar events collection can be provided to calendar using the following steps.
The Appointment class has some basic properties such as startTime, endTime and subject.
OBJECTIVE-C
NSDate * today=[NSDate date];
// Get the year, month, day from the date
NSDateComponents *components = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:today];
components.day = components.day -17;
components.minute = 0;
components.second = 0;
components.hour = 5 ;
NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:today];
endDateComponents.day = endDateComponents.day-17 ;
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 7 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
SFAppointment *event= [SFAppointment new];
event.startTime = startDate;
event.endTime = endDate;
event.appointmentBackground=[UIColor blueColor];
event.subject =@"GoToMeeting";

SWIFT
var today:NSDate = NSDate();
// Get the year, month, day from the date
let calendar = NSCalendar.currentCalendar()
let components:NSDateComponents = calendar.components(.CalendarUnitYear |
.CalendarUnitMonth | .CalendarUnitDay , fromDate: today)
components.day = components.day - 17;
components.minute = 0;
components.second = 0;
components.hour = 5 ;
// Get the year, month, day from the date

Copyright 2001 - 2016 Syncfusion Inc.

74

SfCalendar

Populating Events

let endDateComponents:NSDateComponents =
calendar.components(.CalendarUnitYear | .CalendarUnitMonth |
.CalendarUnitDay , fromDate: today)
endDateComponents.day = endDateComponents.day - 17;
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 7 ;
var event:SFAppointment = SFAppointment();
event.startTime = startDate;
event.endTime = endDate;
event.appointmentBackground=UIColor.blueColor();
event.subject ="GoToMeeting";

C#
CalendarInlineEvent event=new CalendarInlineEvent();
DateTime d=new DateTime(2015,1,1);
DateTime d1=new DateTime(2015,1,1);
event.StartTime=d;
event.EndTime=d1;
event.Subject=Go to Meeting;
event.Color=Color.RED;

Create the collection of the calendar events by setting required details using above mentioned
properties for each events and assign the collection to appointment property.
OBJECTIVE-C
NSMutableArray *appCollection=[NSMutableArray new];
[appCollection addObject:event];
_calendar.appointments = appCollection;

SWIFT
var appCollection:NSMutableArray=NSMutableArray();
appCollection.addObject(event);
_calendar.appointments = appCollection;

C#
CalendarEventCollection eventsCollection = new CalendarEventCollection();
eventsCollection.Add(events);

Copyright 2001 - 2016 Syncfusion Inc.

75

SfCalendar

Selection

7.6 Selection
Dates can be selected by making a touch on month view cells. The default Selection mode is Single
which allows user to select one date at a time. Calendar provides support to select dates in three modes
such as single, multiple and range selection.

SingleSelection A single date can be selected in a month view which can be equipped when
user needs to select one date at a time / to view events.
MultiSelection More than one date can be selected in a random manner. Clicking again on
selected dates can do deselection.
RangeSelection Range of dates can be selected by dragging on the date cells.
Note: The selected dates can be retrieved through calendarTapped Delegate which is raised on
selecting.
OBJECTIVE-C
_calendar.selectionMode = SFCalenderSelectionModeMultiple;
[self.view addSubview: _calendar];

Copyright 2001 - 2016 Syncfusion Inc.

76

SfCalendar

Restricting Dates

SWIFT
_calendar.selectionMode = SFCalenderSelectionModeMultiple;
self.view.addSubview(_calendar)

C#
sfCalendar.SelectionMode=SelectionMode.SingleSelection;

Note: In range selection, navigation through swipe will be restricted and moving between months can
be done by clicking on navigation button available at top corners of calendar control.

7.7 Restricting Dates


7.7.1 Min Max dates
Visible dates can be restricted between certain range of dates using minDate and maxDate properties
available in calendar control. It is applicable in all the calendar views.
The inline feature in month view will work only within the min max date range.
Note: Beyond the min max date range, following restrictions will be applied.

Copyright 2001 - 2016 Syncfusion Inc.

77

SfCalendar

Restricting Dates

Date navigations features of move to date will be restricted.


Cannot swipe the control using touch gesture.
Selection does not work for month view.
The tapped delegates will not be triggered while tapped on the monthcell.
OBJECTIVE-C
//assigning min display date
NSDate * date =[NSDate date];
NSDateComponents *mindate_componet = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
mindate_componet.day = mindate_componet.day - 10;
mindate_componet.minute = 0;
mindate_componet.second = 0;
mindate_componet.hour = 10 ;
NSDate *minDate = [[NSCalendar currentCalendar]
dateFromComponents:mindate_componet];
//assigning max display date
NSDateComponents *maxDate_component = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
maxDate_component.day = maxDate_component.day + 10;
maxDate_component.minute = 0;
maxDate_component.second = 0;
maxDate_component.hour = 12 ;
NSDate *maxDate = [[NSCalendar currentCalendar]
dateFromComponents:maxDate_component];
_calendar.minDisplayDate = minDate;
_calendar.maxDisplayDate = maxDate;
[self.view addSubview: _calendar];

SWIFT
var df = NSDateFormatter();
df.dateFormat = "dd MM yyyy";
var dateString5 = "17 Oct 2015";
var minDate = df.dateFromString(dateString5);
if let unwrappedDate5 = minDate {
_calendar.minDate = unwrappedDate5;
};
var dateString6 = "5 Nov 2015";
var maxDate = df.dateFromString(dateString6);
if let unwrappedDate6 = maxDate {
_calendar.maxDate = unwrappedDate6;
};
self.view.addSubview(_calendar)

C#
DateTime d1=new DateTime(2015,1,1);
sfCalendar.MinDate=mindate;
DateTime d2=new DateTime(2040,12,12);
sfCalendar.MaxDate=d2;

Copyright 2001 - 2016 Syncfusion Inc.

78

SfCalendar

Restricting Dates

7.7.2 Blackout dates


In Calendar, BlackoutDates refers the disabled dates that restrict the user from selecting it. These dates
will be marked with slanted Stripes.
The BlackoutDays can be achieved in two ways.
A date collection can be provided to set the blackoutDates. This is useful where one wants to block dates
where holidays or any other events occur. By invoking the addDatesInPast method, all past dates will
be blacked out till current date.
OBJECTIVE-C
@implementation ViewController
{
NSMutableArray *dateArray;
}
dateArray = [NSMutableArray array];
NSDate *now = [NSDate date];
[dateArray addObject:now];
NSDateComponents *components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=6;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
[dateArray addObject:startDate];
_calendar.blackoutDates=dateArray;
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=10;
components.month=12;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
[dateArray addObject:startDate];
components = [[NSCalendar currentCalendar]
components:NSYearCalendarUnit|NSMonthCalendarUnit|NSDayCalendarUnit
fromDate:[NSDate date]];
components.day=27;
startDate = [[NSCalendar currentCalendar]
dateFromComponents:components];
[dateArray addObject:startDate];
_calendar.blackoutDates=dateArray;
[self.view addSubview: _calendar];

SWIFT
var dateArray:NSMutableArray = NSMutableArray();
var df = NSDateFormatter();
var now:NSDate=NSDate();
dateArray.addObject(now);

Copyright 2001 - 2016 Syncfusion Inc.

79

SfCalendar

Restricting Dates

df.dateFormat = "dd MM yyyy";


var dateString4 = "28 Aug 2015";
var date4 = df.dateFromString(dateString4);
if let unwrappedDate4 = date4 {
dateArray.addObject(unwrappedDate4);
};
var dateString5 = "6 Oct 2015";
var date5 = df.dateFromString(dateString5);
if let unwrappedDate5 = date5 {
dateArray.addObject(unwrappedDate5);
};
var dateString6 = "27 Oct 2015";
var date6 = df.dateFromString(dateString6);
if let unwrappedDate6 = date6 {
dateArray.addObject(unwrappedDate6);
};
_calendar.blackoutDates = dateArray;
_calendar.frame = frameWithMargin;
self.view.addSubview(_calendar)

C#
List<DateTime> black_dates = new List<DateTime>();
black_dates.Add (new DateTime(2015,11,3));
black_dates.Add (new DateTime(2015,11,7));
black_dates.Add (new DateTime(2015,11,15));
black_dates.Add (new DateTime(2015,11,16));
black_dates.Add (new DateTime(2015,11,26));
black_dates.Add (new DateTime(2015,11,30));
sfCalendar.BlackoutDates= black_dates ;

Copyright 2001 - 2016 Syncfusion Inc.

80

SfCalendar

FirstDayofWeek

Note: This support is enabled only in month view and the dates that consists inline events will also be
disabled, when they are blacked out.

7.8 FirstDayofWeek
By default, the starting day will be Sunday. This can be modified using firstDayofWeek property.
Changing the first day of week will be applied to both month and year view.
OBJECTIVE-C
_calendar.firstDayofWeek=4;
[self.view addSubview: _calendar];

SWIFT
_calendar.firstDayofWeek=4;
self.view.addSubview(_calendar)

C#
sfCalendar.FirstDayofWeek= 4;

Copyright 2001 - 2016 Syncfusion Inc.

81

SfCalendar

Localization

7.9 Localization
Calendar control is available with complete localization support.
Localization can be specified by setting the Locale property of the control using the format of Language
code followed by Country code. Based on the locale specified, the strings in the control are localized
accordingly.
Note: By default, calendar control is available with en-US locale.
OBJECTIVE-C
//setting french locale
[_calendar setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"fr-FR"]];
[self.view addSubview: _calendar];

SWIFT
//setting french locale
_calendar.locale=NSLocale(localeIdentifier: "fr_FR");
self.view.addSubview(_calendar)

Copyright 2001 - 2016 Syncfusion Inc.

82

SfCalendar

Localization

C#
sfCalendar.Locale= new System.Globalization.CultureInfo("zh-CN");

7.9.1 Calendar Custom String Localization


Calendar has a built in support for localizing the Custom Strings in it by specifying the corresponding
strings key and value in the Localizable.strings in the application. For an example in calendar there is a
string No Events in calendar Month View Inline. To localize the string, specify the key (No Events)
and assign the corresponding localized string to it in Localizable.strings file. Please refer the following
code for French language.
OBJECTIVE-C
"No Events" = "Aucun vnement";

SWIFT
"No Events" = "Aucun vnement";

Copyright 2001 - 2016 Syncfusion Inc.

83

SfChart

Overview

Calendar search for the key in corresponding language Localizable.strings file and displays the
corresponding string in the calendar.

8 SfChart
8.1 Overview
Essential Chart for iOS provides the perfect way to visualize data with a high level of user interactivity
that focuses on development, productivity and simplicity of use. Essential Chart also provides a wide
variety of chart features that are used to visualize large quantities of data, flexible data binding and user
customization.

Essential Chart for iOS

8.1.1 Key features


Chart supports 16 different types of series, ranging from simple bar series to complex financial
charts. Each type of chart represents a unique style of representing data that is user-friendly and
has greater UI visualization.
Data can be plotted against multiple scales that help visualize the mixed types of data in a single
Chart.
Chart provides support to render multiple series at the same time, with options to compare and
visualize two different chart series, simultaneously.
User-friendly customization support. SfChart provides various options for you to customize
Chart features like axis, labels, legends, series and visualize them accordingly.

8.2 Getting Started


8.2.1 Create your first Chart in Objective C
This section provides a quick overview for working with Essential Chart for iOS. It walks you through the
entire process of creating a real-world Chart.
This section is to help you visualize the weather data for Washington, DC, during the period 1961-1990.
The raw sample data is given as follows.
Table 1: Weather Data Sample

Copyright 2001 - 2016 Syncfusion Inc.

84

SfChart

Getting Started

Month

High

Low

Precipitation

January

42

27

3.03

February

44

28

2.48

March

53

35

3.23

April

64

44

3.15

May

75

54

4.13

June

83

63

3.23

July

87

68

4.13

August

84

66

4.88

September

78

59

3.82

October

67

48

3.07

November

55

38

2.83

December

45

29

2.8

This is how the final output looks like on iOS devices.

8.2.1.1 Add Framework reference to Project


You can refer to the Add Framework reference to Project section from the following link to learn how to
refer the framework to your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
8.2.1.2 Add and configure the Chart
The following steps explain how you can create a Chart and configure its elements.

Copyright 2001 - 2016 Syncfusion Inc.

85

SfChart

Getting Started

1. Create an instance of SfChart.


2. Add the primary and secondary axes for the Chart as follows.
OBJECTIVE-C
[Objective-C]
- (void)viewDidLoad
{
[super viewDidLoad];
SFChart * _chart;
UIScreen *screen
= [UIScreen mainScreen];
NSUInteger margin
= MAX((screen.bounds.size.width screen.applicationFrame.size.width),
(screen.bounds.size.height - screen.applicationFrame.size.height));
CGRect chartRect
= CGRectMake(self.view.frame.origin.x,
self.view.frame.origin.y+margin,
self.view.frame.size.width, self.view.frame.size.height -margin);
//Initialize the chart with frame
_chart = [[SFChart alloc] initWithFrame:chartRect];
//Adding primary axis to chart.
SFCategoryAxis * axis1 = [[SFCategoryAxis alloc]init];
axis1.title.text
= @"Month";
_chart.primaryAxis
= axis1;
//Adding secondary axis to the chart.
SFNumericalAxis * axis2 = [[SFNumericalAxis alloc] init];
axis2.title.text
= @"Temperature";
_chart.secondaryAxis
= axis2;
}

3. A title for the Chart is set using the title property as follows.
C
[Objective-C]
//Adding the title for the chart.
_chart.title.text = @"Weather Analysis";

8.2.1.3 Add a Chart series


In this example is visualized the temperature over the months using a Spline Series. Before creating the
series, you have to create the data source representing the climate details.
In SfChart, the data source needs to be a collection of SfChartDataPoint objects. Create NSMutableArray
as an instance variable, with the name highTemperature. And add temperature data points to
highTemperaturevariable as follows.
C
[Objective-C]
highTemperature = [[NSMutableArray alloc]init];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@42]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@44]];

Copyright 2001 - 2016 Syncfusion Inc.

86

SfChart

Getting Started

[highTemperature
andYValue:@53]];
[highTemperature
andYValue:@64]];
[highTemperature
andYValue:@75]];
[highTemperature
andYValue:@83]];
[highTemperature
andYValue:@87]];
[highTemperature
andYValue:@84]];
[highTemperature
andYValue:@78]];
[highTemperature
andYValue:@67]];
[highTemperature
andYValue:@55]];
[highTemperature
andYValue:@45]];

addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"


addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"
addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"

In order to add data source to SfChart, you need to implement the SfChartDataSource protocol.
C
[Objective-C]
@interface ViewController : UIViewController<SFChartDataSource>
@end

8.2.1.3.1

The data source protocol contains four methods as follows:

chart:numberOfSeriesInChart: Returns an integer that represents the number of series to be


added to SfChart.
chart:seriesAtIndex: Returns a series object, like SfSeries, for the Chart at a particular index.
chart:numberOfDataPointsForSeriesAtIndex: Returns the number of data points required.
chart:dataPointAtIndex:forSeriesAtIndex: Returns each data point to be plotted in the series.
There is also an optional method.
chart:dataPointsForSeriesAtIndex: Returns an array of data points to be plotted in the series
based on series index.
The following code example is to implement the SfChartDataSource.
C
[Objective-C]
-(NSInteger) numberOfSeriesInChart:(SFChart *)chart
{
return 1;
}
-(SFSeries *) chart:(SFChart *)chart seriesAtIndex:(NSInteger)index
{
SFSplineSeries * series = [[SFSplineSeries alloc]init];

Copyright 2001 - 2016 Syncfusion Inc.

87

SfChart

Getting Started

series.label
= @"High";
return series;
}
-(NSInteger) chart:(SFChart *)chart
numberOfDataPointsForSeriesAtIndex:(NSInteger)index
{
return 12;
}
-(SFChartDataPoint *) chart:(SFChart *)chart
dataPointAtIndex:(NSInteger)index forSeriesAtIndex:(NSInteger)seriesIndex
{
return highTemperature[index];
}

Since the ViewController implements SfChartDataSource, you can set this ViewControllerinstance as a
data source for SfChart. Also, SfChart can be added as a sub-view of ViewControllers view as follows.
C
[Objective-C]
//Defining datasource for the SFChart.
_chart.dataSource = self;
//Adding the chart as a subview of view controller view.
[self.view addSubview:_chart];

8.2.1.4 Add Legend


Legend can be enabled in SfChart by setting the LegendVisible property to True as follows.
C
[Objective-C]
//Adding the legend to the chart.
_chart.legend.visible = true;

8.2.1.5 Add multiple series to the Chart


You can add two SfSplineSeries for displaying high and low temperatures and a SfColumnSeries for
displaying the precipitation.
Visualized so far, is the high temperature data over time. You can visualize other data such as low
temperature and precipitation. You need to add low temperature data points to the lowTemperature
variable and precipitation data points to the precipitation variable as follows.
C
[Objective-C]
lowTemperature = [[NSMutableArray alloc]init];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@27]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@28]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"
andYValue:@35]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
andYValue:@44]];

Copyright 2001 - 2016 Syncfusion Inc.

88

SfChart

Getting Started

[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"


andYValue:@54]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
andYValue:@63]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
andYValue:@68]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
andYValue:@66]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
andYValue:@59]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
andYValue:@48]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"
andYValue:@38]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"
andYValue:@29]];
precipitation = [[NSMutableArray alloc]init];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@3.03]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@2.48]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"
andYValue:@3.23]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
andYValue:@3.15]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"
andYValue:@4.13]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
andYValue:@3.23]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
andYValue:@4.13]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
andYValue:@4.88]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
andYValue:@3.82]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
andYValue:@3.07]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"
andYValue:@2.83]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"
andYValue:@2.8]];

From the data source implementation methods you need to change the number of series to be added to
SfChart as follows.
C
[Objective-C]
-(NSInteger) numberOfSeriesInChart:(SFChart *)chart
{
return 3;
}

Then you need to add SfSeries objects for low temperature and precipitation to SfChart using the
chart:seriesAtIndex method as follows.

Copyright 2001 - 2016 Syncfusion Inc.

89

SfChart

Getting Started

C
[Objective-C]
-(SFSeries *) chart:(SFChart *)chart seriesAtIndex:(NSInteger)index
{
if (index == 0)
{
SFColumnSeries * series = [[SFColumnSeries alloc]init];
series.label
= @"Precipitation";
return series;
}
else if (index == 1)
{
SFSplineSeries * series = [[SFSplineSeries alloc]init];
series.label
= @"Low";
return series;
}
else
{
SFSplineSeries * series = [[SFSplineSeries alloc]init];
series.label
= @"High";
return series;
}
}

Finally, you need to set low temperature data points and precipitation data points, to the series, based
on series index as follows.
C
[Objective-C]
-(SFChartDataPoint *) chart:(SFChart *)chart
dataPointAtIndex:(NSInteger)index forSeriesAtIndex:(NSInteger)seriesIndex
{
switch (seriesIndex)
{
case 1:
return lowTemperature[index];
break;
case 2:
return highTemperature[index];
break;
default:
return precipitation[index];
break;
}
}

8.2.1.6 Add multiple Y-axes


You can add a secondary axis, y-axis, to the chart by setting the yAxis property of SfSeries. In the above
code example, you can add axis to the series as follows.
C
[Objective-C]
if (index == 0)

Copyright 2001 - 2016 Syncfusion Inc.

90

SfChart
{
SFColumnSeries * series
series.label
SFNumericalAxis * axis
axis.opposedPosition
axis.showMajorGridLines
series.yAxis
return series;
}

Getting Started

=
=
=
=
=
=

[[SFColumnSeries alloc]init];
@"Precipitation";
[[SFNumericalAxis alloc] init];
true;
false;
axis;

The opposedPosition is set to True to place the secondary axis on the opposite side.
The following is the code example for creating the Chart.
C
[Objective-C]
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
{
NSMutableArray *highTemperature;
NSMutableArray *lowTemperature;
NSMutableArray *precipitation;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)viewDidLoad
{
lowTemperature = [[NSMutableArray alloc]init];
precipitation
= [[NSMutableArray alloc]init];
highTemperature = [[NSMutableArray alloc]init];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@42]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@44]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"
andYValue:@53]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
andYValue:@64]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"
andYValue:@75]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
andYValue:@83]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
andYValue:@87]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
andYValue:@84]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
andYValue:@78]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
andYValue:@67]];

Copyright 2001 - 2016 Syncfusion Inc.

91

SfChart

Getting Started

[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"


andYValue:@55]];
[highTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"
andYValue:@45]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@27]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@28]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"
andYValue:@35]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
andYValue:@44]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"
andYValue:@54]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
andYValue:@63]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
andYValue:@68]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
andYValue:@66]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
andYValue:@59]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
andYValue:@48]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"
andYValue:@38]];
[lowTemperature addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"
andYValue:@29]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jan"
andYValue:@3.03]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Feb"
andYValue:@2.48]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Mar"
andYValue:@3.23]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Apr"
andYValue:@3.15]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"May"
andYValue:@4.13]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jun"
andYValue:@3.23]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Jul"
andYValue:@4.13]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Aug"
andYValue:@4.88]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Sep"
andYValue:@3.82]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Oct"
andYValue:@3.07]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Nov"
andYValue:@2.83]];
[precipitation addObject: [[SFChartDataPoint alloc]initWithXValue:@"Dec"
andYValue:@2.8]];
[super viewDidLoad];
SFChart * _chart;
UIScreen *screen
= [UIScreen mainScreen];

Copyright 2001 - 2016 Syncfusion Inc.

92

SfChart

Getting Started

NSUInteger margin
= MAX((screen.bounds.size.width screen.applicationFrame.size.width),(screen.bounds.size.height screen.applicationFrame.size.height));
CGRect chartRect
= CGRectMake(self.view.frame.origin.x,
self.view.frame.origin.y+margin, self.view.frame.size.width,
self.view.frame.size.height -margin);
//Initialize the chart with frame
_chart = [[SFChart alloc] initWithFrame:chartRect];
//Adding primary axis to chart.
SFCategoryAxis * axis1 = [[SFCategoryAxis alloc]init];
axis1.title.text
= @"Month";
_chart.primaryAxis
= axis1;
//Adding secondary axis to the chart
SFNumericalAxis * axis2 = [[SFNumericalAxis alloc] init];
axis2.title.text
= @"Temperature";
_chart.secondaryAxis
= axis2;
//Adding the title for the chart
_chart.title.text
= @"Weather Analysis";
_chart.legend.visible
= true;
_chart.dataSource
= self;
[self.view addSubview:_chart];
}
-(NSInteger) numberOfSeriesInChart:(SFChart *)chart
{
return 3;
}
-(SFSeries *) chart:(SFChart *)chart seriesAtIndex:(NSInteger)index
{
if (index == 0)
{
SFColumnSeries * series = [[SFColumnSeries alloc]init];
series.label
= @"Precipitation";
SFNumericalAxis * axis = [[SFNumericalAxis alloc] init];
axis.opposedPosition
= true;
axis.showMajorGridLines = false;
series.yAxis
= axis;
return series;
}
else if (index == 1)
{
SFSplineSeries * series = [[SFSplineSeries alloc]init];
series.label
= @"Low";
return series;
}
else
{
SFSplineSeries * series = [[SFSplineSeries alloc]init];
series.label
= @"High";
return series;
}
}
-(NSInteger) chart:(SFChart *)chart
numberOfDataPointsForSeriesAtIndex:(NSInteger)index
{
return 12;
}

Copyright 2001 - 2016 Syncfusion Inc.

93

SfChart

Getting Started

-(SFChartDataPoint *) chart:(SFChart *)chart


dataPointAtIndex:(NSInteger)index forSeriesAtIndex:(NSInteger)seriesIndex
{
switch (seriesIndex)
{
case 2:
return highTemperature[index];
break;
case 1:
return lowTemperature[index];
break;
default:
return precipitation[index];
break;
}
}
@end

8.2.1.6.1

Output:

8.2.2 Create your first Chart in Swift


This section provides a quick overview for working with Essential Chart for iOS. It walks you through the
entire process of creating a real-world Chart.
This section is to help you visualize the weather data for Washington, DC, during the period 1961-1990.
The raw sample data is given as follows.
Month

High

Low

Precipitation

January

42

27

3.03

February

44

28

2.48

March

53

35

3.23

April

64

44

3.15

Copyright 2001 - 2016 Syncfusion Inc.

94

SfChart

Getting Started

May

75

54

4.13

June

83

63

3.23

July

87

68

4.13

August

84

66

4.88

September

78

59

3.82

October

67

48

3.07

November

55

38

2.83

December

45

29

2.8

This is how the final output looks like on iOS devices.

8.2.2.1 Add Framework reference to Project


You can refer to the Add Framework reference to Project section from the following link to learn how to
refer the framework to your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
8.2.2.2 Add and Configure the Chart
The following steps explain how you can create a Chart and configure its elements.

1. Create an instance of SfChart.


2. Add the primary and secondary axes for the Chart as follows.
SWIFT
[Swift]
override func viewDidLoad()
{
super.viewDidLoad()

Copyright 2001 - 2016 Syncfusion Inc.

95

SfChart

Getting Started

var chart : SFChart = SFChart();


var sampleFrame : CGRect = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y, self.view.bounds.size.width,
self.view.bounds.size.height);
//Set the frame for the chart.
chart.frame = sampleFrame;
//Adding primary axis to the chart.
var axis1 : SFCategoryAxis = SFCategoryAxis();
axis1.title.text
= "Month";
chart.primaryAxis
= axis1;
//Adding secondary axis to the chart.
var axis2 : SFNumericAxis
= SFNumericAxis();
axis2.title.text
= "Temperature";
chart.secondaryAxis
= axis2;
}

3. A title for the Chart is set using the title property as follows.
SWIFT
[Swift]
//Set the title for the Chart.
chart.title.text= "Weather Analysis";

8.2.2.3 Add a Chart series


In this example is visualized the temperature over the months using a Spline Series. Before creating the
series, you have to create the data source representing the climate details.
In SfChart, the data source needs to be a collection of SfChartDataPoint objects. Create NSMutableArray
as an instance variable, with the name highTemperature. And add temperature data points to
highTemperaturevariable as follows.
SWIFT
[Swift]
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(
highTemperature.addObject(SFChartDataPoint(

XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:
XValue:

"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",

andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:
andYValue:

42));
44));
53));
64));
75));
83));
87));
84));
78));
67));
55));
45));

In order to add data source to SfChart, you need to implement the SfChartDataSource protocol.
SWIFT
[Swift]
class ViewController: UIViewController, SFChartDataSource { }

Copyright 2001 - 2016 Syncfusion Inc.

96

SfChart

Getting Started

8.2.2.3.1

The data source protocol contains four methods as follows:

chart:numberOfSeriesInChart: Returns an integer that represents the number of series to be


added to SfChart.
chart:seriesAtIndex: Returns a series object, like SfSeries, for the chart at a particular index.
chart:numberOfDataPointsForSeriesAtIndex: Returns the number of data points required.
chart:dataPointAtIndex:forSeriesAtIndex: Returns each data point to be plotted in the series.
There is also an optional method.
chart:dataPointsForSeriesAtIndex: Returns an array of data points to be plotted in the series
based on series index.
The following code example is to implement the SfChartDataSource.
SWIFT
[Swift]
func numberOfSeriesInChart(chart: SFChart!) -> Int
{
return 1;
}
func chart(chart: SFChart!, seriesAtIndex index: Int) -> SFSeries!
{
var series : SFSplineSeries = SFSplineSeries();
series.label
= "Low";
return series;
}
func chart(chart: SFChart!, numberOfDataPointsForSeriesAtIndex index: Int) > Int
{
return 12;
}
func chart(chart: SFChart!, dataPointAtIndex index: Int, forSeriesAtIndex
seriesIndex: Int) -> SFChartDataPoint!
{
return highTemperature[index] as SFChartDataPoint;
}

Since the ViewController implements SfChartDataSource, you can set this ViewControllerinstance as a
data source for SfChart. Also, SfChart can be added as a sub-view of ViewControllers view as follows.
SWIFT
[Swift]
//Defining datasource for the SFChart.
chart.dataSource = self;
//Adding the chart as a subview of view controller view.
self.view.addSubview(chart);

Copyright 2001 - 2016 Syncfusion Inc.

97

SfChart

Getting Started

8.2.2.4 Add Legend


Legend can be enabled in SfChart by setting the LegendVisible property to True as follows.
SWIFT
[Swift]
chart.legend.visible = true;

8.2.2.5 Add Multiple Series to the Chart


You can add two SfSplineSeries for displaying high and low temperatures and a SfColumnSeries for
displaying the precipitation.
Visualized so far, is the high temperature data over time. You can visualize other data such as low
temperature and precipitation. You need to add low temperature data points to the lowTemperature
variable and precipitation data points to the precipitation variable as follows.
SWIFT
[Swift]
lowTemperature.addObject(SFChartDataPoint( XValue: "Jan", andYValue: 27));
lowTemperature.addObject(SFChartDataPoint( XValue: "Feb", andYValue: 28));
lowTemperature.addObject(SFChartDataPoint( XValue: "Mar", andYValue: 35));
lowTemperature.addObject(SFChartDataPoint( XValue: "Apr", andYValue: 44));
lowTemperature.addObject(SFChartDataPoint( XValue: "May", andYValue: 54));
lowTemperature.addObject(SFChartDataPoint( XValue: "Jun", andYValue: 63));
lowTemperature.addObject(SFChartDataPoint( XValue: "Jul", andYValue: 68));
lowTemperature.addObject(SFChartDataPoint( XValue: "Aug", andYValue: 66));
lowTemperature.addObject(SFChartDataPoint( XValue: "Sep", andYValue: 59));
lowTemperature.addObject(SFChartDataPoint( XValue: "Oct", andYValue: 48));
lowTemperature.addObject(SFChartDataPoint( XValue: "Nov", andYValue: 38));
lowTemperature.addObject(SFChartDataPoint( XValue: "Dec", andYValue: 29));
precipitation.addObject(SFChartDataPoint( XValue: "Jan", andYValue: 3.03));
precipitation.addObject(SFChartDataPoint( XValue: "Feb", andYValue: 2.48));
precipitation.addObject(SFChartDataPoint( XValue: "Mar", andYValue: 3.23));
precipitation.addObject(SFChartDataPoint( XValue: "Apr", andYValue: 3.15));
precipitation.addObject(SFChartDataPoint( XValue: "May", andYValue: 4.13));
precipitation.addObject(SFChartDataPoint( XValue: "Jun", andYValue: 3.23));
precipitation.addObject(SFChartDataPoint( XValue: "Jul", andYValue: 4.13));
precipitation.addObject(SFChartDataPoint( XValue: "Aug", andYValue: 4.88));
precipitation.addObject(SFChartDataPoint( XValue: "Sep", andYValue: 3.82));
precipitation.addObject(SFChartDataPoint( XValue: "Oct", andYValue: 3.07));
precipitation.addObject(SFChartDataPoint( XValue: "Nov", andYValue: 2.83));
precipitation.addObject(SFChartDataPoint( XValue: "Dec", andYValue: 2.8));

From the data source implementation methods you need to change the number of series to be added to
SfChart as follows.
SWIFT
[Swift]
func numberOfSeriesInChart(chart: SFChart!) -> Int
{
return 3;
}

Copyright 2001 - 2016 Syncfusion Inc.

98

SfChart

Getting Started

Then you need to add SfSeries objects for low temperature and precipitation to SfChart using the
chart:seriesAtIndex method as follows.
SWIFT
[Swift]
func chart(chart: SFChart!,
{
if(index == 0){
var series : SFColumnSeries
series.label
var axis : SFNumericalAxis
axis.opposedPosition
axis.showMajorGridLines
series.yAxis
return series;
}
else if(index == 1){
var series : SFSplineSeries
series.label
return series;
}
else{
var series : SFSplineSeries
series.label
return series;
}
}

seriesAtIndex index: Int) -> SFSeries!


=
=
=
=
=
=

SFColumnSeries();
"Precipitation";
SFNumericalAxis();
true;
false;
axis;

= SFSplineSeries();
= "High";

= SFSplineSeries();
= "Low";

Finally, you need to set low temperature data points and precipitation data points, to the series, based
on series index as follows.
SWIFT
[Swift]
func chart(chart: SFChart!, dataPointAtIndex index: Int, forSeriesAtIndex
seriesIndex: Int) -> SFChartDataPoint!
{
if(seriesIndex == 0){
return precipitation[index] as SFChartDataPoint;
}
else if(seriesIndex == 1){
return highTemperature[index] as SFChartDataPoint;
}
else{
return lowTemperature[index] as SFChartDataPoint;
}
}

8.2.2.6 Add multiple Y-axes


You can add a secondary axis, y-axis, to the chart by setting the yAxis property of SfSeries. In the above
code example, you can add axis to the series as follows.
SWIFT
[Swift]

Copyright 2001 - 2016 Syncfusion Inc.

99

SfChart
if(index == 0)
{
var series : SFColumnSeries
series.label
var axis : SFNumericalAxis
axis.opposedPosition
axis.showMajorGridLines
series.yAxis
return series;
}

Getting Started

=
=
=
=
=
=

SFColumnSeries();
"Precipitation";
SFNumericalAxis();
true;
false;
axis;

The opposedPosition is set to True to place the secondary axis on the opposite side.
The following is the code example for creating the Chart.
SWIFT
[Swift]
import UIKit
import SFChartUI
class ViewController: UIViewController, SFChartDataSource {
var highTemperature : NSMutableArray
= NSMutableArray();
var lowTemperature : NSMutableArray
= NSMutableArray();
var precipitation
: NSMutableArray
= NSMutableArray();
override func viewDidLoad()
{
super.viewDidLoad()
highTemperature.addObject(SFChartDataPoint( XValue: "Jan", andYValue: 42));
highTemperature.addObject(SFChartDataPoint( XValue: "Feb", andYValue: 44));
highTemperature.addObject(SFChartDataPoint( XValue: "Mar", andYValue: 53));
highTemperature.addObject(SFChartDataPoint( XValue: "Apr", andYValue: 64));
highTemperature.addObject(SFChartDataPoint( XValue: "May", andYValue: 75));
highTemperature.addObject(SFChartDataPoint( XValue: "Jun", andYValue: 83));
highTemperature.addObject(SFChartDataPoint( XValue: "Jul", andYValue: 87));
highTemperature.addObject(SFChartDataPoint( XValue: "Aug", andYValue: 84));
highTemperature.addObject(SFChartDataPoint( XValue: "Sep", andYValue: 78));
highTemperature.addObject(SFChartDataPoint( XValue: "Oct", andYValue: 67));
highTemperature.addObject(SFChartDataPoint( XValue: "Nov", andYValue: 55));
highTemperature.addObject(SFChartDataPoint( XValue: "Dec", andYValue: 45));
lowTemperature.addObject(SFChartDataPoint( XValue: "Jan", andYValue: 27));
lowTemperature.addObject(SFChartDataPoint( XValue: "Feb", andYValue: 28));
lowTemperature.addObject(SFChartDataPoint( XValue: "Mar", andYValue: 35));
lowTemperature.addObject(SFChartDataPoint( XValue: "Apr", andYValue: 44));
lowTemperature.addObject(SFChartDataPoint( XValue: "May", andYValue: 54));
lowTemperature.addObject(SFChartDataPoint( XValue: "Jun", andYValue: 63));
lowTemperature.addObject(SFChartDataPoint( XValue: "Jul", andYValue: 68));
lowTemperature.addObject(SFChartDataPoint( XValue: "Aug", andYValue: 66));
lowTemperature.addObject(SFChartDataPoint( XValue: "Sep", andYValue: 59));
lowTemperature.addObject(SFChartDataPoint( XValue: "Oct", andYValue: 48));
lowTemperature.addObject(SFChartDataPoint( XValue: "Nov", andYValue: 38));
lowTemperature.addObject(SFChartDataPoint( XValue: "Dec", andYValue: 29));
precipitation.addObject(SFChartDataPoint( XValue: "Jan", andYValue: 3.03));
precipitation.addObject(SFChartDataPoint( XValue: "Feb", andYValue: 2.48));
precipitation.addObject(SFChartDataPoint( XValue: "Mar", andYValue: 3.23));
precipitation.addObject(SFChartDataPoint( XValue: "Apr", andYValue: 3.15));
precipitation.addObject(SFChartDataPoint( XValue: "May", andYValue: 4.13));
precipitation.addObject(SFChartDataPoint( XValue: "Jun", andYValue: 3.23));

Copyright 2001 - 2016 Syncfusion Inc.

100

SfChart

Getting Started

precipitation.addObject(SFChartDataPoint( XValue: "Jul", andYValue: 4.13));


precipitation.addObject(SFChartDataPoint( XValue: "Aug", andYValue: 4.88));
precipitation.addObject(SFChartDataPoint( XValue: "Sep", andYValue: 3.82));
precipitation.addObject(SFChartDataPoint( XValue: "Oct", andYValue: 3.07));
precipitation.addObject(SFChartDataPoint( XValue: "Nov", andYValue: 2.83));
precipitation.addObject(SFChartDataPoint( XValue: "Dec", andYValue: 2.8));
var chart
: SFChart = SFChart();
var sampleFrame
: CGRect = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y, self.view.bounds.size.width,
self.view.bounds.size.height);
//Set the frame for the chart.
chart.frame
= sampleFrame;
//Adding primary axis to the chart.
var axis1 : SFCategoryAxis = SFCategoryAxis();
axis1.title.text
= "Month";
chart.primaryAxis
= axis1;
//Adding secondary axis to the chart.
var axis2 : SFNumericalAxis = SFNumericalAxis();
axis2.title.text
= "Temperature";
chart.secondaryAxis
= axis2;
//Set the title for the Chart.
chart.title.text
= "Weather Analysis";
chart.legend.visible
= true;
chart.dataSource
= self;
self.view.addSubview(chart);
}
func addDataPoint(month: NSString!, high: NSInteger!, low: NSInteger!, ppt:
NSDecimalNumber!)
{
highTemperature.addObject(SFChartDataPoint( XValue: month, andYValue:
high));
lowTemperature.addObject(SFChartDataPoint( XValue: month, andYValue: low));
precipitation.addObject(SFChartDataPoint( XValue: month, andYValue: ppt));
}
override func didReceiveMemoryWarning()
{
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSeriesInChart(chart: SFChart!) -> Int
{
return 3;
}
func chart(chart: SFChart!, seriesAtIndex index: Int) -> SFSeries!
{
if(index == 0){
var series : SFColumnSeries = SFColumnSeries();
series.label
= "Precipitation";
var axis : SFNumericalAxis = SFNumericalAxis();
axis.opposedPosition
= true;
axis.showMajorGridLines
= false;
series.yAxis
= axis;
return series;
}
else if(index == 1){
var series : SFSplineSeries = SFSplineSeries();
series.label
= "High";

Copyright 2001 - 2016 Syncfusion Inc.

101

SfChart

Getting Started

return series;
}
else{
var series : SFSplineSeries = SFSplineSeries();
series.label
= "Low";
return series;
}
}
func chart(chart: SFChart!, numberOfDataPointsForSeriesAtIndex index: Int) > Int
{
return 12;
}
func chart(chart: SFChart!, dataPointAtIndex index: Int, forSeriesAtIndex
seriesIndex: Int) -> SFChartDataPoint!
{
if(seriesIndex == 0){
return precipitation[index] as SFChartDataPoint;
}
else if(seriesIndex == 1){
return highTemperature[index] as SFChartDataPoint;
}
else{
return lowTemperature[index] as SFChartDataPoint;
}
}
}

8.2.2.6.1

Output:

8.2.3 Create your first Chart in Xamarin.iOS


This section provides a quick overview for working with Essential Chart for Xamarin.iOS. It walks you
through the entire process of creating a real-world Chart.
This section is to help you visualize the weather data for Washington, DC, during the period 1961-1990.
The raw sample data is given as follows.

Copyright 2001 - 2016 Syncfusion Inc.

102

SfChart

Getting Started

Table 3: Weather Data Sample


Month

High

Low

Precipitation

January

42

27

3.03

February

44

28

2.48

March

53

35

3.23

April

64

44

3.15

May

75

54

4.13

June

83

63

3.23

July

87

68

4.13

August

84

66

4.88

September

78

59

3.82

October

67

48

3.07

November

55

38

2.83

December

45

29

2.8

This is how the final output looks like on iOS devices.

Copyright 2001 - 2016 Syncfusion Inc.

103

SfChart

Getting Started

8.2.3.1 Reference Essential Studio Components in your Solution


After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation
folders, typically:
{Syncfusion Installed location}\Essential Studio\{version number}\lib
Note: Assemblies are available in unzipped package location in Mac.
You have to add the following assembly reference to the iOS classic project
ios\Syncfusion.SfChart.iOS.dll
and below assembly reference to the iOS unified project.
ios-unifed\Syncfusion.SfChart.iOS.dll
8.2.3.2 Add and Configure Chart
The following steps explain how to create a Chart and configure its elements.

1. Create an instance of SfChart.


C#
[C#]
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
//Initialize the Chart with required frame. This frame can be any rectangle,
which bounds inside the view.
SFChart chart = new SFChart ();
chart.Frame
= this.View.Frame;
}

2.Add the primary and secondary axes for the Chart as follows.
C#
[C#]
//Adding Primary Axis for the Chart.
SFCategoryAxis primaryAxis = new SFCategoryAxis ();
primaryAxis.Title.Text
= "Month";
chart.PrimaryAxis
= primaryAxis;
//Adding Secondary Axis for the Chart.
SFNumericalAxis secondaryAxis = new SFNumericalAxis ();
secondaryAxis.Title.Text
= "Temperature";
chart.SecondaryAxis
= secondaryAxis;

3.A title for the Chart is set using the Title property as follows.
C#
[C#]
//Define the title for the Chart.
chart.Title.Text = "Weather Analysis";

Copyright 2001 - 2016 Syncfusion Inc.

104

SfChart

Getting Started

8.2.3.3 Add a Chart series


In this example is visualized the temperature over the months using a Spline Series. Before creating the
series, you have to create the data source representing the climate details.
In SFChart, series, the data source must be the collection of SfChartDataPointobjects. Add the following
class by inheriting from SfChartDatSource, for generating the data points.
C#
[C#]
/// <summary>
/// Class acts as a data model for the chart by inheriting
'SFChartDataSource'.
/// </summary>
public class ChartDataModel : SFChartDataSource
{
NSMutableArray highTemperature;
NSMutableArray lowTemperature;
NSMutableArray precipitation;
public ChartDataModel ()
{
highTemperature
= new NSMutableArray ();
lowTemperature
= new NSMutableArray ();
precipitation
= new NSMutableArray ();
AddDataPointsForChart ("Jan", 42, 27, 3.03);
AddDataPointsForChart ("Feb", 44, 28, 2.48);
AddDataPointsForChart ("Mar", 53, 35, 3.23);
AddDataPointsForChart ("Apr", 64, 44, 3.15);
AddDataPointsForChart ("May", 75, 54, 4.13);
AddDataPointsForChart ("Jun", 83, 63, 3.23);
AddDataPointsForChart ("Jul", 87, 68, 4.13);
AddDataPointsForChart ("Aug", 84, 66, 4.88);
AddDataPointsForChart ("Sep", 78, 59, 3.82);
AddDataPointsForChart ("Oct", 67, 48, 3.07);
AddDataPointsForChart ("Nov", 55, 38, 2.83);
AddDataPointsForChart ("Dec", 45, 29, 2.80);
}
void AddDataPointsForChart (String month, Double high, Double low, Double
ppt)
{
highTemperature.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (high)));
lowTemperature.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (low)));
precipitation.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (ppt)));
}
}

Then you need to override the following four methods to generate series for the Chart.
NumberOfSeriesInChart- Returns an integer that represents the number of series to be added to
SfChart.
GetSeries- Returns a series object, like the SfSeries, for the Chart at a particular index.
GetDataPoint- Returns each data point to be plotted in the series.

Copyright 2001 - 2016 Syncfusion Inc.

105

SfChart

Getting Started
GetNumberOfDataPoints- Returns the number of data points required.

There is also an optional method.


GetDataPoints- Returns an array of data points to be plotted in the series based on series index.
The following is the code example to implement the SfChartDataSource.
C#
[C#]
[Export ("numberOfSeriesInChart:")]
public override int NumberOfSeriesInChart (SFChart chart)
{
return 3; //returns no of series required for the chart.
}
[Export ("chart:seriesAtIndex:")]
public override SFSeries GetSeries (SFChart chart, int index)
{
//returns the series for the chart.
SFSplineSeries series = new SFSplineSeries ();
series.Label
= "High";
return series;
}
[Export ("chart:dataPointAtIndex:forSeriesAtIndex:")]
public override SFChartDataPoint GetDataPoint (SFChart chart, int index, int
seriesIndex)
{
//returns the datapoint for each series.
return highTemperature.GetItem<SFChartDataPoint> (index);
}
[Export ("chart:numberOfDataPointsForSeriesAtIndex:")]
public override int GetNumberOfDataPoints (SFChart chart, int index)
{
return 12;
//No of datapoints needed for each series.
}

Since the ChartDataModel class implements SfChartDataSource, you can create the new instance of
ChartDataModel class and then set the instance of ChartDataModel to data source for SfChart. Also,
SfChart can be added as sub-view of View Controllers view as follows.
C#
[C#]
//Defining the data source for the Chart.
ChartDataModel dataModel = new ChartDataModel ();
chart.DataSource
= dataModel as SFChartDataSource;
//Adding our Chart as a sub view.
this.View.AddSubview (chart);

8.2.3.4 Add Legend


Legend can be enabled in SfChart by setting the Legend Visible property to True as follows.
C#
Copyright 2001 - 2016 Syncfusion Inc.

106

SfChart

Getting Started

[C#]
//Adding legend to the Chart.
chart.Legend.Visible = true;

8.2.3.5 Add Multiple Series to the Chart


You can add two SfSplineSeries for displaying high and low temperatures and a SfColumnSeries for
displaying the precipitation.
Visualized so far, is the high temperature data over time. You can visualize other data such as low
temperature and precipitation.
C#
[C#]
[Export ("chart:seriesAtIndex:")]
public override SFSeries GetSeries (SFChart chart, int index)
{
//returns the series for the chart.
if (index == 1)
{
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "High";
return series;
}
else if (index == 2)
{
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "Low";
return series;
}
else
{
SFColumnSeries series = new SFColumnSeries ();
series.Label
= "Precipitation";
return series;
}
}

From the data source implementation methods you need to change the number of series to be added to
SfChart as follows.
C#
[C#]
[Export ("numberOfSeriesInChart:")]
public override int NumberOfSeriesInChart (SFChart chart)
{
return 3; //returns no of series required for the chart.
}

Then you need to add SfSeries objects for low temperature and precipitation to SfChart by using the
chart:seriesAtIndex method as follows.
C#

Copyright 2001 - 2016 Syncfusion Inc.

107

SfChart

Getting Started

[C#]
[Export ("chart:seriesAtIndex:")]
public override SFSeries GetSeries (SFChart chart, int index)
{
//returns the series for the chart.
if (index == 1)
{
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "High";
return series;
}
else if (index == 2)
{
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "Low";
return series;
}
else
{
SFColumnSeries series
= new SFColumnSeries ();
series.Label
= "Precipitation";
SFNumericalAxis axis
= new SFNumericalAxis ();
axis.OpposedPosition
= true;
axis.ShowMajorGridLines = false;
series.YAxis = axis;
return series;
}
}

Finally, you need to set low temperature data points and precipitation data points, to the series, based
on series index as follows.
C#
[C#]
[Export ("chart:dataPointAtIndex:forSeriesAtIndex:")]
public override SFChartDataPoint GetDataPoint (SFChart chart, int index, int
seriesIndex)
{
//returns the datapoint for each series.
if (seriesIndex == 1)
{
return highTemperature.GetItem<SFChartDataPoint> (index);
}
else if (seriesIndex == 2)
{
return lowTemperature.GetItem<SFChartDataPoint> (index);
}
else
{
return precipitation.GetItem<SFChartDataPoint> (index);
}
}

Copyright 2001 - 2016 Syncfusion Inc.

108

SfChart

Getting Started

8.2.3.6 Add Multiple Axes to the Chart


You can add a secondary axis, y-axis, to the chart by setting the yAxis property of SfSeries. In the above
code example, you can add axis to the series as follows.
C#
[C#]
// Adding the SFColumnSeries
SFColumnSeries series
=
series.Label
=
SFNumericalAxis axis
=
axis.OpposedPosition
=
axis.ShowMajorGridLines
=
series.YAxis
=

with different scale


new SFColumnSeries ();
"Precipitation";
new SFNumericalAxis ();
true;
false;
axis;

The opposedPosition is set to True to place the secondary axis on the opposite side.
The following is the code example for creating the Chart.
C#
[C#]
public partial class GettingStarted_iOSViewController : UIViewController
{
public GettingStarted_iOSViewController (IntPtr handle) : base (handle)
{
}
public override void DidReceiveMemoryWarning ()
{
// Releases the view if it doesn't have a superview.
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
//Initialize the Chart with required frame. This frame can be any rectangle,
which bounds inside the view.
SFChart chart
= new SFChart ();
chart.Frame
= this.View.Frame;
//Define the title for the Chart.
chart.Title.Text
= "Weather Analysis";
//Adding legend to the Chart.
chart.Legend.Visible = true;
//Adding Primary Axis for the Chart.
SFCategoryAxis primaryAxis = new SFCategoryAxis ();
primaryAxis.Title.Text
= "Month";
chart.PrimaryAxis
= primaryAxis;
//Adding Secondary Axis for the Chart.
SFNumericalAxis secondaryAxis = new SFNumericalAxis ();
secondaryAxis.Title.Text
= "Temperature";
chart.SecondaryAxis
= secondaryAxis;
//Defining the data source for the Chart.
ChartDataModel dataModel
= new ChartDataModel ();
chart.DataSource
= dataModel as SFChartDataSource;
//Adding our Chart as a sub view.

Copyright 2001 - 2016 Syncfusion Inc.

109

SfChart

Getting Started

this.View.AddSubview (chart);
// Perform any additional setup after loading the view, typically from a
nib.
}
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
}
public override void ViewDidAppear (bool animated)
{
base.ViewDidAppear (animated);
}
public override void ViewWillDisappear (bool animated)
{
base.ViewWillDisappear (animated);
}
public override void ViewDidDisappear (bool animated)
{
base.ViewDidDisappear (animated);
}
#endregion
}
/// <summary>
/// Class acts as a data model for the chart by inheriting
'SFChartDataSource'.
/// </summary>
public class ChartDataModel : SFChartDataSource
{
NSMutableArray highTemperature;
NSMutableArray lowTemperature;
NSMutableArray precipitation;
public ChartDataModel ()
{
highTemperature
= new NSMutableArray ();
lowTemperature
= new NSMutableArray ();
precipitation
= new NSMutableArray ();
AddDataPointsForChart ("Jan", 42, 27, 3.03);
AddDataPointsForChart ("Feb", 44, 28, 2.48);
AddDataPointsForChart ("Mar", 53, 35, 3.23);
AddDataPointsForChart ("Apr", 64, 44, 3.15);
AddDataPointsForChart ("May", 75, 54, 4.13);
AddDataPointsForChart ("Jun", 83, 63, 3.23);
AddDataPointsForChart ("Jul", 87, 68, 4.13);
AddDataPointsForChart ("Aug", 84, 66, 4.88);
AddDataPointsForChart ("Sep", 78, 59, 3.82);
AddDataPointsForChart ("Oct", 67, 48, 3.07);
AddDataPointsForChart ("Nov", 55, 38, 2.83);
AddDataPointsForChart ("Dec", 45, 29, 2.80);
}
/// <summary>
/// Method to populate the array required for all the series.
/// </summary>
/// <param name="month">Month.</param>
/// <param name="high">High Temperature.</param>
/// <param name="low">Low Temperature.</param>
/// <param name="ppt">Precipitation.</param>

Copyright 2001 - 2016 Syncfusion Inc.

110

SfChart

Getting Started

void AddDataPointsForChart (String month, Double high, Double low, Double


ppt)
{
highTemperature.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (high)));
lowTemperature.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (low)));
precipitation.Add (new SFChartDataPoint (NSObject.FromObject (month),
NSObject.FromObject (ppt)));
}
[Export ("numberOfSeriesInChart:")]
public override int NumberOfSeriesInChart (SFChart chart)
{
return 3;
//returns no of series required for the chart.
}
[Export ("chart:seriesAtIndex:")]
public override SFSeries GetSeries (SFChart chart, int index)
{
//returns the series for the chart.
if (index == 1) {
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "High";
return series;
}
else if (index == 2) {
SFSplineSeries series
= new SFSplineSeries ();
series.Label
= "Low";
return series;
}
else {
SFColumnSeries series
= new SFColumnSeries ();
series.Label
= "Precipitation";
SFNumericalAxis axis
= new SFNumericalAxis ();
axis.OpposedPosition
= true;
axis.ShowMajorGridLines
= false;
series.YAxis = axis;
return series;
}
}
[Export ("chart:dataPointAtIndex:forSeriesAtIndex:")]
public override SFChartDataPoint GetDataPoint (SFChart chart, int index, int
seriesIndex)
{
//returns the datapoint for each series.
if (seriesIndex == 1) {
return highTemperature.GetItem<SFChartDataPoint> (index);
} else if (seriesIndex == 2) {
return lowTemperature.GetItem<SFChartDataPoint> (index);
} else {
return precipitation.GetItem<SFChartDataPoint> (index);
}
}
[Export ("chart:numberOfDataPointsForSeriesAtIndex:")]
public override int GetNumberOfDataPoints (SFChart chart, int index)
{
return 12;

Copyright 2001 - 2016 Syncfusion Inc.

111

SfChart

Axis

//No of datapoints needed for each series.


}
}

8.2.3.7

Output:

8.3 Axis
Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a
horizontal (X) axis.
Vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale:
Category
Numeric
Date time

8.3.1 Category Axis


Category axis displays text labels instead of numbers.
OBJECTIVE-C
SFCategoryAxis *xAxis = [[SFCategoryAxis alloc]init];
chart.primaryAxis
= xAxis;

SWIFT
var xAxis : SFCategoryAxis = SFCategoryAxis();
chart.primaryAxis
= xAxis;

Copyright 2001 - 2016 Syncfusion Inc.

112

SfChart

Axis

C#
SFCategoryAxis xAxis = new SFCategoryAxis ();
chart.PrimaryAxis
= xAxis;

8.3.1.1 Placing labels between ticks


Labels in category axis can be placed between the ticks by setting labelPlacement to
SFChartLabelPlacementBetweenTicks. Default value of labelPlacement property is
SFChartLabelPlacementOnTicks i.e. labels will be placed on the ticks by default.
OBJECTIVE-C
xAxis.labelPlacement = SFChartLabelPlacementBetweenTicks;

Copyright 2001 - 2016 Syncfusion Inc.

113

SfChart

Axis

SWIFT
xAxis.labelPlacement = SFChartLabelPlacement.BetweenTicks;

C#
xAxis.LabelPlacement = SFChartLabelPlacement.BetweenTicks;

8.3.1.2 Displaying labels after a fixed interval


To display labels after a fixed interval n, you can set interval property of SFAxis as n. Default value of
interval is 1 i.e. all the labels will be displayed by default.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

114

SfChart

Axis

xAxis.interval = @2;

SWIFT
xAxis.interval = 2;

C#
xAxis.Interval = new NSNumber (2);

8.3.2 Numeric Axis


Numeric axis uses numerical scale and displays numbers as labels.

Copyright 2001 - 2016 Syncfusion Inc.

115

SfChart

Axis

OBJECTIVE-C
SFNumericalAxis *xAxis = [[SFNumericalAxis alloc]init];
chart.primaryAxis
= xAxis;

SWIFT
var xAxis
: SFNumericalAxis = SFNumericalAxis();
chart.primaryAxis
= xAxis;

C#
SFNumericalAxis xAxis = new SFNumericalAxis ();
chart.PrimaryAxis
= xAxis;

Copyright 2001 - 2016 Syncfusion Inc.

116

SfChart

Axis

8.3.2.1 Customizing numeric range


To customize the range of an axis, you can use the minimum and maximum properties of
SFNumericalAxis. By default, range will be calculated automatically based on the provided data.
OBJECTIVE-C
SFNumericalAxis *yAxis
chart.secondaryAxis
yAxis.minimum
yAxis.maximum

=
=
=
=

[[SFNumericalAxis alloc]init];
yAxis;
@10;
@50;

SWIFT
var yAxis: SFNumericalAxis = SFNumericalAxis();

Copyright 2001 - 2016 Syncfusion Inc.

117

SfChart
chart.secondaryAxis
yAxis.minimum
yAxis.maximum

Axis
= yAxis;
= 10;
= 50;

C#
SFNumericalAxis yAxis
chart.SecondaryAxis
yAxis.Minimum
yAxis.Maximum

= new SFNumericalAxis ();


= yAxis;
= new NSNumber (10);
= new NSNumber (50);

Copyright 2001 - 2016 Syncfusion Inc.

118

SfChart

Axis

8.3.2.2 Customizing numeric interval


Axis interval can be customized using the interval property of SFAxis. By default, interval will be
calculated based on the minimum and maximum value of the provided data.
OBJECTIVE-C
yAxis.interval = @10;

SWIFT
yAxis.interval = 10;

C#
yAxis.Interval = new NSNumber (10);

Copyright 2001 - 2016 Syncfusion Inc.

119

SfChart

Axis

8.3.2.3 Apply padding to the range


Padding can be applied to the minimum and maximum extremes of the axis range by using
rangePadding property. Numeric axis supports the following types of padding.
None
Round
Additional
Normal
None
When the value of rangePadding property is SFChartNumericalPaddingNone, padding will not be
applied to the axis. This is also the default value of rangePadding for horizontal axis.

Copyright 2001 - 2016 Syncfusion Inc.

120

SfChart

Axis

OBJECTIVE-C
yAxis.rangePadding = SFChartNumericalPaddingNone;

SWIFT
yAxis.rangePadding = SFChartNumericalPadding.None;

C#
yAxis.RangePadding = SFChartNumericalPadding.None;

Round

Copyright 2001 - 2016 Syncfusion Inc.

121

SfChart

Axis

When the value of rangePadding property is SFChartNumericalPaddingRound, axis range will be


rounded to the nearest possible value divided by the interval.
OBJECTIVE-C
yAxis.rangePadding = SFChartNumericalPaddingRound;

SWIFT
yAxis.rangePadding = SFChartNumericalPadding.Round;

C#
yAxis.RangePadding = SFChartNumericalPadding.Round;

Copyright 2001 - 2016 Syncfusion Inc.

122

SfChart

Axis

Additional
When the value of rangePadding property is SFChartNumericalPaddingAdditional, axis range will be
rounded and an interval of the axis will be added as padding to the minimum and maximum values of
the range.
OBJECTIVE-C
yAxis.rangePadding = SFChartNumericalPaddingAdditional;

SWIFT
yAxis.rangePadding = SFChartNumericalPadding.Additional;

Copyright 2001 - 2016 Syncfusion Inc.

123

SfChart

Axis

C#
yAxis.RangePadding = SFChartNumericalPadding.Additional;

Normal
When the value of rangePadding property is SFChartNumericalPaddingNormal, range will be
calculated for the axis based on the best readability of the data. This is also the default for vertical axis.
OBJECTIVE-C
yAxis.rangePadding = SFChartNumericalPaddingNormal;

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

124

SfChart

Axis

yAxis.rangePadding = SFChartNumericalPadding.Normal;

C#
yAxis.RangePadding = SFChartNumericalPadding.Normal;

8.3.3 Date Time Axis


Date time axis uses date time scale and displays date time values as axis labels in specified format.
OBJECTIVE-C
SFDateTimeAxis *xAxis = [[SFDateTimeAxis alloc]init];
chart.primaryAxis
= xAxis;

Copyright 2001 - 2016 Syncfusion Inc.

125

SfChart

Axis

SWIFT
var xAxis : SFDateTimeAxis = SFDateTimeAxis ();
chart.primaryAxis
= xAxis;

C#
SFDateTimeAxis xAxis = new SFDateTimeAxis ();
chart.PrimaryAxis
= xAxis;

8.3.3.1 Customizing date time range


To customize the range of an axis, you can use the minimum and maximum properties of
SFDateTimeAxis. By default, range will be calculated automatically based on the provided data.

Copyright 2001 - 2016 Syncfusion Inc.

126

SfChart

Axis

OBJECTIVE-C
SFDateTimeAxis *xAxis
NSDateFormatter *dateformatter
dateformatter.dateFormat
xAxis.minimum
dateFromString:@"01/01/2010"];
xAxis.maximum
dateFromString:@"01/01/2015"];
chart.primaryAxis

=
=
=
=

[[SFDateTimeAxis alloc]init];
[[NSDateFormatter alloc]init];
@"MM/dd/yyy";
[dateformatter

= [dateformatter
= xAxis;

SWIFT
var xAxis : SFDateTimeAxis
= SFDateTimeAxis ();
var dateformatter : NSDateFormatter = NSDateFormatter ();
dateformatter.dateFormat
= "MM/dd/yyyy";
xAxis.minimum
=
dateformatter.dateFromString("01/01/2010");
xAxis.maximum
=
dateformatter.dateFromString("01/01/2015");
chart.primaryAxis
= xAxis;

C#
chart.PrimaryAxis = new DateTimeAxis()
{
Minimum = new DateTime(2010, 1, 1),
Maximum = new DateTime(2015, 12, 30)
};

Copyright 2001 - 2016 Syncfusion Inc.

127

SfChart

Axis

8.3.3.2 Date time intervals


Date time intervals can be customized using interval and intervalType properties of the
SFDateTimeAxis. For example, setting interval as 2 and intervalType as
SFChartDateTimeDeltaTypeYears will consider 2 years as interval.
Essential Chart supports the following types of interval for date time axis
Years
Months
Days
Hours
Minutes
Seconds

Copyright 2001 - 2016 Syncfusion Inc.

128

SfChart

Axis
Milliseconds

OBJECTIVE-C
xAxis.intervalType = SFChartDateTimeDeltaTypeMonths;
xAxis.interval
= @6;

SWIFT
xAxis.intervalType = SFChartDateTimeIntervalType.Months;
xAxis.interval
= 6;

C#
xAxis.IntervalType = SFChartDateTimeIntervalType.Months;
xAxis.Interval
= new NSNumber (6);

Copyright 2001 - 2016 Syncfusion Inc.

129

SfChart

Axis

8.3.3.3 Apply padding to the range


Padding can be applied to the minimum and maximum extremes of the range by using rangePadding
property. Date time axis supports the following types of padding:
None
Round
Additional
None
When the value of rangePadding property is SFChartDateTimePaddingNone, padding will not be
applied to the axis. This is also the default value of rangePadding.

Copyright 2001 - 2016 Syncfusion Inc.

130

SfChart

Axis

OBJECTIVE-C
xAxis.rangePadding = SFChartDateTimePaddingNone;

SWIFT
xAxis.rangePadding = SFChartDateTimePadding.None;

C#
xAxis.RangePadding = SFChartDateTimePadding.None;

Round

Copyright 2001 - 2016 Syncfusion Inc.

131

SfChart

Axis

When the value of rangePadding property is SFChartDateTimePaddingRound, axis range will be


rounded to the nearest possible date time value.
OBJECTIVE-C
xAxis.rangePadding = SFChartDateTimePaddingRound;

SWIFT
xAxis.rangePadding = SFChartDateTimePadding.Round;

C#
xAxis.RangePadding = SFChartDateTimePadding.Round;

Copyright 2001 - 2016 Syncfusion Inc.

132

SfChart

Axis

Additional
When the value of rangePadding property is SFChartDateTimePaddingAdditional, range will be
rounded and date time interval of the axis will be added as padding to the minimum and maximum
extremes of the range.
OBJECTIVE-C
xAxis.rangePadding = SFChartDateTimePaddingAdditional;

SWIFT
xAxis.rangePadding = SFChartDateTimePadding.Additional;

Copyright 2001 - 2016 Syncfusion Inc.

133

SfChart

Axis

C#
xAxis.RangePadding = SFChartDateTimePadding.Additional;

8.3.4 Common axis features


Customization of features such as axis title, labels, grid lines and tick lines are common to all the axes.
Each of these features are explained in this section.
8.3.4.1 Axis Visibility
Axis visibility can be controlled using the isVisible property of axis. Default value of isVisible property is
true.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

134

SfChart

Axis

chart.secondaryAxis.visible = false;

SWIFT
chart.secondaryAxis.visible = false;

C#
chart.SecondaryAxis.Visible = false;

Copyright 2001 - 2016 Syncfusion Inc.

135

SfChart

Axis

8.3.4.2 Axis title


The title property in axis provides options to customize the text and font of axis title. Axis does not
display title by default. The title can be customized using following properties,

text used to set the title for axis.


color used to change the color of the label.
backgroundColor used to change the label background color.
borderColor used to change the border color.
borderWidth used to change the width of the border.
font used to change the text size, font family and font weight.
margin - used to change the margin size for labels.
Following code snippet illustrates how to enable and customize the axis title.
OBJECTIVE-C
chart.primaryAxis.title.text
chart.primaryAxis.title.backgroundColor
chart.primaryAxis.title.borderColor
chart.primaryAxis.title.borderWidth
chart.primaryAxis.title.font
chart.primaryAxis.title.margin

=
=
=
=
=
=

@"Month";
[UIColor lightGrayColor];
[UIColor redColor];
2;
[UIFont systemFontOfSize:20];
UIEdgeInsetsMake(3, 3, 3, 3);

=
=
=
=
=
=
=

"Month";
UIColor.blueColor();
UIColor.lightGrayColor();
UIColor.redColor();
2;
UIFont.boldSystemFontOfSize(20);
UIEdgeInsetsMake(3, 3, 3, 3);

=
=
=
=
=
=
=

new NSString ("Month");


UIColor.Blue;
UIFont.BoldSystemFontOfSize(20);
UIColor.LightGray;
UIColor.Red;
2;
UIEdgeInsets (3, 3, 3, 3);

SWIFT
chart.primaryAxis.title.text
chart.primaryAxis.title.color
chart.primaryAxis.title.backgroundColor
chart.primaryAxis.title.borderColor
chart.primaryAxis.title.borderWidth
chart.primaryAxis.title.font
chart.primaryAxis.title.margin

C#
chart.PrimaryAxis.Title.Text
chart.PrimaryAxis.Title.Color
chart.PrimaryAxis.Title.Font
chart.PrimaryAxis.Title.BackgroundColor
chart.PrimaryAxis.Title.BorderColor
chart.PrimaryAxis.Title.BorderWidth
chart.PrimaryAxis.Title.Margin

Copyright 2001 - 2016 Syncfusion Inc.

136

SfChart

Axis

8.3.4.3 Label customization


The labelStyle property of axis provides options to customize the font-family, color, size and fontweight of axis labels. The axis labels can be customized using following properties:

color used to change the color of the labels.


backgroundColor used to change the label background color.
borderColor used to change the border color.
borderWidth used to change the thickness of the border.
gont used to change the text size, font family and font weight.
margin - used to change the margin size for labels.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

137

SfChart

Axis

chart.primaryAxis.labelStyle.font = [UIFont boldSystemFontOfSize:20];


chart.primaryAxis.labelStyle.color = [UIColor redColor];

SWIFT
chart.primaryAxis.labelStyle.font = UIFont.boldSystemFontOfSize(20);
chart.primaryAxis.labelStyle.color = UIColor.redColor();

C#
chart.PrimaryAxis.LabelStyle.Font = UIFont.BoldSystemFontOfSize (20);
chart.PrimaryAxis.LabelStyle.Color = UIColor.Red;

Copyright 2001 - 2016 Syncfusion Inc.

138

SfChart

Axis

8.3.4.4 Label and tick positioning


Axis labels and ticks can be positioned inside or outside the chart area by using labelsPosition and
tickPosition properties of SFAxis. By default labels and ticks will be positioned outside the chart area.
OBJECTIVE-C
chart.primaryAxis.majorTickStyle.tickPosition =
SFChartAxisElementPositionInside;
chart.primaryAxis.labelStyle.labelsPosition
=
SFChartAxisElementPositionInsid;

SWIFT
chart.primaryAxis.labelStyle.labelsPosition
=
SFChartAxisElementPosition.Inside;
chart.primaryAxis.majorTickStyle.tickPosition =
SFChartAxisElementPosition.Inside;

C#
chart.PrimaryAxis.LabelStyle.LabelsPosition
=
SFChartAxisElementPosition.Inside;
chart.PrimaryAxis.MajorTickStyle.TickPosition =
SFChartAxisElementPosition.Inside;

Copyright 2001 - 2016 Syncfusion Inc.

139

SfChart

Axis

8.3.4.5 Edge labels placement


Labels with long text at the edges of an axis may appear partially outside the chart. The
edgeLabelsDrawingMode property can be used to avoid the partial appearance of labels at the
corners.
OBJECTIVE-C
chart.primaryAxis.edgeLabelsDrawingMode =
SFChartAxisEdgeLabelsDrawingModeShift;

SWIFT
chart.primaryAxis.edgeLabelsDrawingMode =
SFChartAxisEdgeLabelsDrawingMode.Shift;

Copyright 2001 - 2016 Syncfusion Inc.

140

SfChart

Axis

C#
chart.PrimaryAxis.EdgeLabelsDrawingMode =
SFChartAxisEdgeLabelsDrawingMode.Shift;

8.3.4.6 Grid lines customization


The showMajorGridLines and showMinorGridLines properties are used to control the visibility of grid
lines. majorGridLineStyle and minorGridLineStyle properties in axis are used to customize the major
grid lines and minor grid lines of an axis respectively. They provide options to change the width, dashes,
color of grid lines. By default minor grid lines will not be visible.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

141

SfChart

Axis

yAxis.showMajorGridLines
= true;
yAxis.showMinorGridLines
= true;
yAxis.minorTicksPerInterval = 1;

SWIFT
yAxis.showMajorGridLines
= true;
yAxis.showMinorGridLines
= true;
yAxis.minorTicksPerInterval = 1;

C#
yAxis.ShowMajorGridLines
= true;
yAxis.ShowMinorGridLines
= true;
yAxis.MinorTicksPerInterval
= 1;

Copyright 2001 - 2016 Syncfusion Inc.

142

SfChart

Axis

8.3.4.7 Tick lines customization


The MajorTickStyle and MinorTickStyle properties in axis are used to customize the major tick lines of
an axis and minor tick lines of an axis respectively. They provide options to change the width, size, color
and visibility of tick lines. By default minor tick lines will not be visible.
OBJECTIVE-C
SFNumericalAxis *yAxis
chart.secondaryAxis
yAxis.majorTickStyle.lineSize
yAxis.majorTickStyle.lineWidth
yAxis.majorTickStyle.lineColor
yAxis.showMinorGridLines
yAxis.minorTicksPerInterval
yAxis.minorTickStyle.lineSize

Copyright 2001 - 2016 Syncfusion Inc.

=
=
=
=
=
=
=
=

[[SFNumericalAxis alloc]init];
yAxis;
@7;
@3;
[UIColor redColor];
true;
1;
@5;

143

SfChart
yAxis.minorTickStyle.lineWidth
yAxis.minorTickStyle.lineColor

Axis
= @2;
= [UIColor greenColor];

SWIFT
var yAxis : SFNumericalAxis
chart.secondaryAxis
yAxis.majorTickStyle.lineSize
yAxis.majorTickStyle.lineWidth
yAxis.majorTickStyle.lineColor
yAxis.showMinorGridLines
yAxis.minorTicksPerInterval
yAxis.minorTickStyle.lineSize
yAxis.minorTickStyle.lineWidth
yAxis.minorTickStyle.lineColor

=
=
=
=
=
=
=
=
=
=

SFNumericalAxis();
yAxis;
7;
3;
UIColor.redColor();
true;
1;
5;
2;
UIColor.greenColor();

=
=
=
=
=
=
=
=
=
=

new SFNumericalAxis ();


yAxis;
new NSNumber (7);
new NSNumber (3);
UIColor.Red;
true;
1;
new NSNumber (5);
new NSNumber (2);
UIColor.Green;

C#
SFNumericalAxis yAxis
chart.SecondaryAxis
yAxis.MajorTickStyle.LineSize
yAxis.MajorTickStyle.LineWidth
yAxis.MajorTickStyle.LineColor
yAxis.ShowMinorGridLines
yAxis.MinorTicksPerInterval
yAxis.MinorTickStyle.LineSize
yAxis.MinorTickStyle.LineWidth
yAxis.MinorTickStyle.LineColor

Copyright 2001 - 2016 Syncfusion Inc.

144

SfChart

Axis

8.3.4.8 Inversing axis


Axis can be inversed using the isInversed property of axis. Default value of isInversed property is false.
OBJECTIVE-C
chart.secondaryAxis.isInversed = true;

SWIFT
chart.secondaryAxis.isInversed = true;

C#
chart.SecondaryAxis.IsInversed = true;

Copyright 2001 - 2016 Syncfusion Inc.

145

SfChart

Axis

8.3.4.9 Placing axes at the opposite side


The opposedPosition property of axis can be used to place the axis at the opposite side of its default
position. Default value of opposedPosition property is false.
OBJECTIVE-C
chart.secondaryAxis.opposedPosition = true;

SWIFT
chart.secondaryAxis.opposedPosition = true;

Copyright 2001 - 2016 Syncfusion Inc.

146

SfChart

Axis

C#
chart.SecondaryAxis.OpposedPosition = true;

8.3.4.10 Maximum number of labels per 100 pixels


By default, a maximum of 3 labels are displayed for each 100 pixels in axis. The maximum number of
labels that should be present within 100 pixels length can be customized using the maximumLabels
property of an axis. This property is applicable only for automatic range calculation and will not work if
you set value for interval property of an axis.
OBJECTIVE-C
chart.secondaryAxis.maximumLabels = 5;

Copyright 2001 - 2016 Syncfusion Inc.

147

SfChart

Axis

SWIFT
chart.secondaryAxis.maximumLabels = 5;

C#
Chart.SecondaryAxis.MaximumLabels = 5;

8.3.5 Smart Axis Labels


Axis labels may overlap with each other based on chart dimensions and label size. The
labelsIntersectAction property of axis is useful in avoiding the overlapping of axis labels with each
other. Default value of labelsIntersectAction is SFChartAxisLabelsIntersectActionNone. Other

Copyright 2001 - 2016 Syncfusion Inc.

148

SfChart

Axis

available values of labelsIntersectAction are SFChartAxisLabelsIntersectActionMultipleRows and


SFChartAxisLabelsIntersectActionHide.
OBJECTIVE-C
chart.primaryAxis.labelsIntersectAction =
SFChartAxisLabelsIntersectActionMultipleRows;

SWIFT
chart.primaryAxis.labelsIntersectAction =
SFChartAxisLabelsIntersectAction.MultipleRows;

C#
chart.PrimaryAxis.LabelsIntersectAction =
AxisLabelsIntersectAction.MultipleRows;

Copyright 2001 - 2016 Syncfusion Inc.

149

SfChart

Chart Series

8.4 Chart Series


In order to add data source to SfChart, you need to implement the SfChartDataSource protocol which
contains four methods and an optional method. This has been explained briefly in the Add a Chart
series section of the Getting Started document.

8.4.1 Multiple Series


You can add multiple series to Series property of SfChart class.
OBJECTIVE-C
- (SFSeries *)chart:(SFChart *)chart seriesAtIndex:(NSInteger)index
{
if(index == 0)
{

Copyright 2001 - 2016 Syncfusion Inc.

150

SfChart
SFColumnSeries *series1
series1.label
return series1;
}
else if (index == 1)
{
SFColumnSeries *series2
series2.label
return series2;
}
else
{
SFColumnSeries *series3
series3.label
return series3;
}
}

Chart Series
= [[SFColumnSeries alloc]init];
= @"Gold";

= [[SFColumnSeries alloc]init];
= @"Silver";

= [[SFColumnSeries alloc]init];
= @"Bronze";

SWIFT
func chart(chart: SFChart!, seriesAtIndex index: Int) -> SFSeries!
{
if (index == 0)
{
var series1 : SFColumnSeries = SFColumnSeries();
series1.label
= "Gold";
return series1;
}
else if (index == 1)
{
var series2 : SFColumnSeries = SFColumnSeries();
series2.label
= "Silver";
return series2;
}
else
{
var series3 : SFColumnSeries = SFColumnSeries();
series3.label
= "Bronze";
return series3;
}
}

C#
public override SFSeries
{
if (index == 0)
{
SFColumnSeries series1 =
series1.Label
=
return series1;
}
else if (index == 1)
{
SFColumnSeries series2 =
series2.Label
=

GetSeries (SFChart chart, nint index)

new SFColumnSeries ();


new NSString ("Gold");

new SFColumnSeries ();


new NSString ("Silver");

Copyright 2001 - 2016 Syncfusion Inc.

151

SfChart

Chart Series

return series2;
}
else
{
SFColumnSeries series3 = new SFColumnSeries ();
series3.Label
= new NSString ("Bronze");
return series3;
}
}

8.4.2 Combination Series


SFChart allows you to render the combination of different types of series.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

152

SfChart

Chart Series

- (SFSeries *)chart:(SFChart *)chart seriesAtIndex:(NSInteger)index


{
if(index == 0)
{
SFColumnSeries *series1 = [[SFColumnSeries alloc]init];
series1.label
= @"Unit Sold";
return series1;
}
else
{
SFLineSeries *series2 = [[SFLineSeries alloc]init];
series2.label
= @"Total Transaction";
return series2;
}
}

SWIFT
func chart(chart: SFChart!, seriesAtIndex index: Int) -> SFSeries!
{
if (index == 0)
{
var series1 : SFColumnSeries = SFColumnSeries();
series1.label = "Unit Sold";
return series1;
}
else
{
var series2 : SFLineSeries = SFLineSeries();
series2.label = "Total Transaction";
return series2;
}
}

C#
public override SFSeries GetSeries (SFChart chart, nint index)
{
if (index == 0)
{
SFColumnSeries series1 = new SFColumnSeries ();
series1.Label
= new NSString ("Unit Sold");
return series1;
}
else
{
SFLineSeries series2 = new SFLineSeries ();
series2.Label
= new NSString ("Total Transaction");
return series2;
}
}

Copyright 2001 - 2016 Syncfusion Inc.

153

SfChart

Chart Series

Limitation of Combination Chart


Bar, StackingBar, and StackingBar100 cannot be combined with the other Cartesian type series.
Cartesian type series cannot be combined with accumulation series (pie, doughnut, funnel, and
pyramid).
When the combination of Cartesian and accumulation series types are added to the Series property, the
series which are similar to the first series will be rendered and other series will be ignored. Following
code snippet illustrates this.
OBJECTIVE-C
- (SFSeries *)chart:(SFChart *)chart seriesAtIndex:(NSInteger)index
{

Copyright 2001 - 2016 Syncfusion Inc.

154

SfChart

Chart Series

if(index == 0)
{
SFLineSeries *series1 = [[SFLineSeries alloc]init];
series1.label
= @"Unit Sold";
return series1;
}
else
{
SFPieSeries *series2 = [[SFPieSeries alloc]init];
series2.label
= @"Total Transaction";
return series2;
}
}

SWIFT
func chart(chart: SFChart!, seriesAtIndex index: Int) -> SFSeries!
{
if (index == 0)
{
var series1 : SFLineSeries = SFLineSeries();
series1.label = "Unit Sold";
return series1;
}
else
{
var series2 : SFPieSeries = SFPieSeries();
series2.label = "Total Transaction";
return series2;
}
}

C#
public override SFSeries GetSeries (SFChart chart, nint index)
{
if (index == 0)
{
SFLineSeries series1 = new SFLineSeries ();
series1.Label
= new NSString ("Unit Sold");
return series1;
}
else
{
SFPieSeries series2 = new SFPieSeries ();
series2.Label
= new NSString ("Total Transaction");
return series2;
}
}

Copyright 2001 - 2016 Syncfusion Inc.

155

SfChart

Chart Types

8.5 Chart Types


8.5.1 Line Chart
To render a line chart, create an instance of LineSeries and add to the Series collection property of
SfChart. You can use the following properties to customize the appearance.

Color used to change the color of the line.


StrokeWidth used to change the stroke width of the line.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

156

SfChart

Chart Types

SWIFT

C#
SfChart chart = new SfChart();
...
LineSeries lineSeries = new LineSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(lineSeries);

![](charttypesimages/charttypesimg1.png)

8.5.2 Area Chart


To render an area chart, create an instance of AreaSeries and add to the Series collection property of
SfChart. You can use the following properties to customize the appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
AreaSeries areaSeries = new AreaSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(areaSeries);

![](charttypesimages/charttypesimg2.png)

Copyright 2001 - 2016 Syncfusion Inc.

157

SfChart

Chart Types

8.5.3 Spline Area Chart


To render a spline area chart, create an instance of SplineAreaSeries and add to the Series collection
property of SfChart. You can use the following properties to customize the spline area appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
SplineAreaSeries splineAreaSeries = new SplineAreaSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(splineAreaSeries);

![](charttypesimages/charttypesimg3.png)

8.5.4 Stacked Area Chart


To render a stacked area chart, create an instance of StackingAreaSeries and add to the Series
collection property of SFChart. You can use the following properties to customize the stacked area
appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

158

SfChart

Chart Types

C#
SfChart chart = new SfChart();
...
StackingAreaSeries stackingAreaSeries1 = new StackingAreaSeries()
{
ItemsSource = Data1,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingAreaSeries stackingAreaSeries2 = new StackingAreaSeries()
{
ItemsSource = Data2,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingAreaSeries stackingAreaSeries3 = new StackingAreaSeries()
{
ItemsSource = Data3,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(stackingAreaSeries1);
chart.Series.Add(stackingAreaSeries2);
chart.Series.Add(stackingAreaSeries3);

![](charttypesimages/charttypesimg4.png)

8.5.5 100% Stacked Area Chart


To render a 100% stacked area chart, create an instance of StackingArea100Series and add to the
Series collection property of SfChart. You can use the following properties to customize the 100%
stacked area appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
StackingArea100Series stackingArea100Series1 = new StackingArea100Series()
{
ItemsSource = Data1,

Copyright 2001 - 2016 Syncfusion Inc.

159

SfChart

Chart Types

XBindingPath = "Year",
YBindingPath = "Value"
};
StackingArea100Series stackingArea100Series2 = new StackingArea100Series()
{
ItemsSource = Data2,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingArea100Series stackingArea100Series3 = new StackingArea100Series()
{
ItemsSource = Data3,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(stackingArea100Series1);
chart.Series.Add(stackingArea100Series2);
chart.Series.Add(stackingArea100Series3);

![](charttypesimages/charttypesimg5.png)

8.5.6 Column Chart


To render a column chart, create an instance of ColumnSeries and add to the Series collection
property of SFChart. You can use the following properties to customize the appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
ColumnSeries columnSeries = new ColumnSeries()
{
ItemsSource = Data,
XBindingPath = "Country",
YBindingPath = "Value"
};
chart.Series.Add(columnSeries);

![](charttypesimages/charttypesimg6.png)

Copyright 2001 - 2016 Syncfusion Inc.

160

SfChart

Chart Types

8.5.7 Range Column Chart


To render a range column chart, create an instance of RangeColumnSeries and add to the Series
collection property of SfChart.
Since the RangeColumnSeries requires two Y values for a point, your data should contain high and low
values. High and low value specifies the maximum and minimum range of the point.
There are two ways you can provide data to RangeColumn chart,
1.You can use ChartDataPoint's three parameter constructor to pass x value, high and low values to
RangeColumnSeries,
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
ObservableCollection<ChartDataPoint> data = new
ObservableCollection<ChartDataPoint>()
{
new ChartDataPoint("Jan", 1.8, 7.6 ),
new ChartDataPoint("Feb", 3, 10),
new ChartDataPoint("Mar", 1.7, 7.5),
new ChartDataPoint("Apr", 4.5, 7.8),
new ChartDataPoint("May", 5, 11.4),
new ChartDataPoint("Jun", 4.2, 10.1),
};
RangeColumnSeries rangeColumnSeries = new RangeColumnSeries()
{
ItemsSource = data
};
chart.Series.Add(rangeColumnSeries);

2.Or else you can use High and Low properties of RangeColumnSeries to map the high and low values
from custom object to chart.
OBJECTIVE-C

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

161

SfChart

Chart Types

C#
SfChart chart = new SfChart();
...
RangeColumnSeries rangeColumnSeries = new RangeColumnSeries()
{
ItemsSource = Data,
XBindingPath = "Month",
High = "Value1",
Low = "Value2"
};
chart.Series.Add(rangeColumnSeries);

Following properties are used to customize the range column segment appearance,

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
![](charttypesimages/charttypesimg7.png)

8.5.8 Stacked Column Chart


To render a stacked column chart, create an instance of StackingColumnSeries and add to the Series
collection property of SfChart. You can use the following properties to customize the stacked column
segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
StackingColumnSeries stackingColumnSeries1 = new StackingColumnSeries()
{
ItemsSource = Data1,
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingColumnSeries stackingColumnSeries2 = new StackingColumnSeries()
{

Copyright 2001 - 2016 Syncfusion Inc.

162

SfChart

Chart Types

ItemsSource = Data2,
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingColumnSeries stackingColumnSeries3 = new StackingColumnSeries()
{
ItemsSource = Data3,
XBindingPath = "Month",
YBindingPath = "Value"
};
chart.Series.Add(stackingColumnSeries1);
chart.Series.Add(stackingColumnSeries2);
chart.Series.Add(stackingColumnSeries3);

![](charttypesimages/charttypesimg8.png)

8.5.9 100% Stacked Column Chart


To render a 100% stacked column chart, create an instance of StackingColumn100Series and add to
the Series collection property of SfChart. You can use the following properties to customize the series
appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
StackingColumn100Series stackingColumn100Series1 = new
StackingColumn100Series()
{
ItemsSource = Data1,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingColumn100Series stackingColumn100Series2 = new
StackingColumn100Series()
{
ItemsSource = Data2,
XBindingPath = "Year",
YBindingPath = "Value"
};

Copyright 2001 - 2016 Syncfusion Inc.

163

SfChart

Chart Types

StackingColumn100Series stackingColumn100Series3 = new


StackingColumn100Series()
{
ItemsSource = Data3,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(stackingColumn100Series1);
chart.Series.Add(stackingColumn100Series2);
chart.Series.Add(stackingColumn100Series3);

![](charttypesimages/charttypesimg9.png)

8.5.10 Bar Chart


To render a bar chart, create an instance of BarSeries and add to the Series collection property of
SfChart. You can use the following properties to customize the bar segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
BarSeries barSeries = new BarSeries ()
{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(barSeries);

![](charttypesimages/charttypesimg10.png)

8.5.11 Stacked Bar Chart


To render a stacked bar chart, create an instance of StackingBarSeries and add to the Series collection
property of SfChart. You can use the following properties to customize the stacked bar segment
appearance.

Color used to change the color of the series.

Copyright 2001 - 2016 Syncfusion Inc.

164

SfChart

Chart Types

StrokeWidth used to change the stroke width of the series.


StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
StackingBarSeries stackingBarSeries1 = new StackingBarSeries()
{
ItemsSource = Data1,
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingBarSeries stackingBarSeries2 = new StackingBarSeries()
{
ItemsSource = Data2,
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingBarSeries stackingBarSeries3 = new StackingBarSeries()
{
ItemsSource = Data3,
XBindingPath = "Month",
YBindingPath = "Value"
};
chart.Series.Add(stackingBarSeries1);
chart.Series.Add(stackingBarSeries2);
chart.Series.Add(stackingBarSeries3);

![](charttypesimages/charttypesimg11.png)

8.5.12 100% Stacked Bar Chart


To render a 100% stacked bar chart, create an instance of StackingBar100Series and add to the Series
collection property of SfChart. You can use the following properties to customize the series appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

165

SfChart

Chart Types

SWIFT

C#
SfChart chart = new SfChart();
...
StackingBar100Series stackingBar100Series1 = new StackingBar100Series()
{
ItemsSource = Data1,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingBar100Series stackingBar100Series2 = new StackingBar100Series()
{
ItemsSource = Data2,
XBindingPath = "Year",
YBindingPath = "Value"
};
StackingBar100Series stackingBar100Series3 = new StackingBar100Series()
{
ItemsSource = Data3,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(stackingBar100Series1);
chart.Series.Add(stackingBar100Series2);
chart.Series.Add(stackingBar100Series3);

![](charttypesimages/charttypesimg12.png)

8.5.13 Spline Chart


To render a spline chart, create an instance of SplineSeries and add to the Series collection property of
SfChart. You can use the following properties to customize the spline segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
OBJECTIVE-C

SWIFT

C#

Copyright 2001 - 2016 Syncfusion Inc.

166

SfChart

Chart Types

SfChart chart = new SfChart();


...
SplineSeries splineSeries = new SplineSeries()
{
ItemsSource = Data,
XBindingPath = "Month",
YBindingPath = "Value"
};
chart.Series.Add(splineSeries);

![](charttypesimages/charttypesimg13.png)

8.5.14 Fast Line Chart


FastLineSeries is a line chart, but it loads faster than LineSeries. You can use this when there are large
number of points to be loaded in chart. To render a fast line chart, create an instance of FastLineSeries
and add to the Series collection property of SfChart. You can use the following properties to customize
the fast line segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
FastLineSeries fastLineSeries = new FastLineSeries()
{
ItemsSource = Data,
XBindingPath = "XValue",
YBindingPath = "YValue"
};
chart.Series.Add(fastLineSeries);

![](charttypesimages/charttypesimg14.png)
8.5.14.1 Dashed Lines
StrokeDashArray property of the FastLineSeries is used to render fast line series with dashes.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

167

SfChart

Chart Types

SWIFT

C#
FastLineSeries fastLineSeries = new FastLineSeries()
{
ItemsSource = Data,
XBindingPath = "Month",
YBindingPath = "Value"
};
fastLineSeries.StrokeDashArray = new double[2] { 2, 3 };

![](charttypesimages/charttypesimg15.png)

8.5.15 Bubble Chart


To render a bubble chart, create an instance of BubbleSeries and add to the Series collection property
of SfChart.
Bubble chart requires 3 fields (X, Y and Size) to plot a point. Here Size is used to specify the size of each
bubble segment.
There are two ways you can provide data to bubble chart,
1.You can use ChartDataPoint's three parameter constructor to pass x, y and size values to
BubbleSeries,
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
ObservableCollection<ChartDataPoint> data = new
ObservableCollection<ChartDataPoint>()
{
new ChartDataPoint(64, 14.4, 20),
new ChartDataPoint(71, 2, 15),
new ChartDataPoint(74, 7, 30),
new ChartDataPoint(80, 4, 22),
new ChartDataPoint(82, 10.3, 28),
new ChartDataPoint(94, 1, 8),
new ChartDataPoint(96, 6, 18),
new ChartDataPoint(98, 12.3, 28),
};
BubbleSeries bubbleSeries = new BubbleSeries()

Copyright 2001 - 2016 Syncfusion Inc.

168

SfChart

Chart Types

{
ItemsSource = data
};
chart.Series.Add(bubbleSeries);

2.Or else you can use YBindingPath and Size properties of BubbleSeriesto map the Y value and size
from custom object to chart.
OBJECTIVE-C

OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
BubbleSeries bubbleSeries = new BubbleSeries()
{
ItemsSource = Data,
XBindingPath = "XValue",
BindingPath = "YValue",
XBindingPath = "Size
};
chart.Series.Add(bubbleSeries);

Following properties are used to customize the bubble segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
MinimumRadius used to change the minimum size of the series.
MaximumRadius used to change the maximum size of the series.
![](charttypesimages/charttypesimg16.png)

8.5.16 Scatter Chart


To render a scatter chart, create an instance of ScatterSeries and add to the Series collection property
of SfChart. You can use the following properties to customize the scatter segment appearance.

Color used to change the color of the series.

Copyright 2001 - 2016 Syncfusion Inc.

169

SfChart

Chart Types

StrokeWidth used to change the stroke width of the series.


StrokeColor used to change the stroke color of the series.
ScatterWidth used to change the width of the series.
ScatterHeight used to change the height of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
ScatterSeries scatterSeries = new ScatterSeries ()
{
ItemsSource = Data,
ScatterHeight = 15,
ScatterWidth = 15,
XBindingPath = "Year",
YBindingPath = "Value"
};
chart.Series.Add(scatterSeries);

![](charttypesimages/charttypesimg17.png)

8.5.17 OHLC Chart


To render an OHLC chart, create an instance of HiLoOpenCloseSeries and add to the Series collection
property of SfChart.
OHLC chart requires five values (X, Open, High, Low and Close) to plot a point.
There are two ways you can provide data to an OHLC chart,
1.You can use ChartDataPoint's five parameter constructor to pass x, open, high, low and close values to
HiLoOpenCloseSeries,
OBJECTIVE-C

SWIFT

C#

Copyright 2001 - 2016 Syncfusion Inc.

170

SfChart

Chart Types

SfChart chart = new SfChart();


...
ObservableCollection<ChartDataPoint> data = new
ObservableCollection<ChartDataPoint>()
{
new ChartDataPoint("2010", 873.8, 878.85, 855.5, 860.5),
new ChartDataPoint("2011", 861, 868.4, 835.2, 843.45),
new ChartDataPoint("2012", 846.15, 853, 838.5, 847.5),
new ChartDataPoint("2013", 846, 860.75, 841, 855),
new ChartDataPoint("2014", 841, 845, 827.85, 838.65)
};
HiLoOpenCloseSeries hiLoOpenCloseSeries = new HiLoOpenCloseSeries()
{
ItemsSource = data
};
chart.Series.Add(hiLoOpenCloseSeries);

2.Or else you can use Open,High,Low and Close properties of HiLoOpenCloseSeries to map Open,
High, Low and Close values from custom object to chart.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
HiLoOpenCloseSeries hiLoOpenCloseSeries = new HiLoOpenCloseSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
Open = "Value1",
High = "Value2",
Low = "Value3",
Close = "Value4"
};
chart.Series.Add(hiLoOpenCloseSeries);

You can use the following properties to customize the HiLoOpenCloseSeries segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
![](charttypesimages/charttypesimg18.png)

Copyright 2001 - 2016 Syncfusion Inc.

171

SfChart

Chart Types

8.5.17.1 Bull and Bear Color


In OHLC chart, BullFillColor property is used to specify a fill color for the segments that indicates an
increase in stock price in the measured time interval and BearFillColor property is used to specify a fill
color for the segments that indicates a decrease in stock price in the measured time interval.
OBJECTIVE-C

SWIFT

C#
HiLoOpenCloseSeries hiLoOpenCloseSeries = new HiLoOpenCloseSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
Open = "Value1",
High = "Value2",
Low = "Value3",
Close = "Value4",
BearFillColor = Color.Blue,
BullFillColor = Color.Purple
};

![](charttypesimages/charttypesimg19.png)

8.5.18 Candle Chart


To render a candle chart, create an instance of CandleSeries and add to the Series collection property
of SfChart.
Candle chart requires five values (X, Open, High, Low and Close) to plot a point.
There are two ways you can provide data to an candle chart,
1.You can use ChartDataPoint's five parameter constructor to pass x, open, high, low and close values to
CandleSeries,
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();

Copyright 2001 - 2016 Syncfusion Inc.

172

SfChart

Chart Types

...
ObservableCollection<ChartDataPoint> data = new
ObservableCollection<ChartDataPoint>()
{
new ChartDataPoint("2010", 873.8, 878.85, 855.5, 860.5),
new ChartDataPoint("2011", 861, 868.4, 835.2, 843.45),
new ChartDataPoint("2012", 846.15, 853, 838.5, 847.5),
new ChartDataPoint("2013", 846, 860.75, 841, 855),
new ChartDataPoint("2014", 841, 845, 827.85, 838.65)
};
CandleSeries candleSeries = new CandleSeries ()
{
ItemsSource = data
};
chart.Series.Add(candleSeries);

2.Or else you can use Open,High,Low and Close property of CandleSeries to map Open, High, Low and
Close values from custom object to chart.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
CandleSeries candleSeries = new CandleSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
Open = "Value1",
High = "Value2",
Low = "Value3",
Close = "Value4"
};
chart.Series.Add(candleSeries);

You can use the following properties to customize the candle segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
![](charttypesimages/charttypesimg20.png)

Copyright 2001 - 2016 Syncfusion Inc.

173

SfChart

Chart Types

8.5.18.1 Bull and Bear Color


In Candle chart, BullFillColor property is used to specify a fill color for the segments that indicates an
increase in stock price in the measured time interval and BearFillColor property is used to specify a fill
color for the segments that indicates a decrease in stock price in the measured time interval.
OBJECTIVE-C

SWIFT

C#
CandleSeries candleSeries = new CandleSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
Open = "Value1",
High = "Value2",
Low = "Value3",
Close = "Value4",
BearFillColor = Color.Blue,
BullFillColor = Color.Purple
};

![](charttypesimages/charttypesimg21.png)

8.5.19 Pie Chart


To render a pie chart, create an instance of PieSeries and add to the Series collection property of
SfChart. You can use the following properties to customize the pie segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...

Copyright 2001 - 2016 Syncfusion Inc.

174

SfChart

Chart Types

PieSeries pieSeries = new PieSeries()


{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value"
};
chart.Series.Add(pieSeries);

![](charttypesimages/charttypesimg22.png)
8.5.19.1 Changing the pie size
You can use CircularCoefficient property to change the diameter of the pie chart with respect to the
plot area. It ranges from 0 to 1 and the default value is 0.8.
OBJECTIVE-C

SWIFT

C#
PieSeries pieSeries = new PieSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
CircularCoefficient = 0.5
};

![](charttypesimages/charttypesimg23.png)
8.5.19.2 Exploding a pie segment
You can explode a pie segment using ExplodeIndex property and specify the explode radius using
ExplodeRadius property of PieSeries.
OBJECTIVE-C
<chart:PieSeries ExplodeIndex="1" ItemsSource ="{Binding Data}"
XBindingPath="Expense" YBindingPath="Value"/>

SWIFT

C#
PieSeries pieSeries = new PieSeries()
{

Copyright 2001 - 2016 Syncfusion Inc.

175

SfChart

Chart Types

ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
ExplodeIndex = 1
};

![](charttypesimages/charttypesimg24.png)
8.5.19.3 Exploding all the segments
Using ExplodeAll property of PieSeries, you can explode all the pie segments.
OBJECTIVE-C

SWIFT

C#
PieSeries pieSeries = new PieSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
ExplodeAll = true
};

![](charttypesimages/charttypesimg25.png)
8.5.19.4 Sector of Pie
SfChart allows you to render all the data points/segments in semi-pie, quarter-pie or in any sector using
StartAngle and EndAngle properties.
OBJECTIVE-C

SWIFT

C#
PieSeries pieSeries = new PieSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
StartAngle = 180,

Copyright 2001 - 2016 Syncfusion Inc.

176

SfChart

Chart Types

EndAngle = 360
};

![](charttypesimages/charttypesimg26.png)

8.5.20 Doughnut Chart


To render a doughnut chart, create an instance of DoughnutSeries and add to the Series collection
property of SfChart. You can use the following properties to customize the doughnut segment
appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value"
};
chart.Series.Add(doughnutSeries);

![](charttypesimages/charttypesimg27.png)
8.5.20.1 Changing Doughnut inner radius
You can change the doughnut chart inner radius using DoughnutCoefficient with respect to the plot
area. It ranges from 0 to 1 and the default value is 0.4.
OBJECTIVE-C

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

177

SfChart

Chart Types

C#
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
DoughnutCoefficient = 0.6
};

![](charttypesimages/charttypesimg28.png)
8.5.20.2 Changing the doughnut size
You can use the CircularCoefficient property to change the diameter of the doughnut chart with
respect to the plot area. It ranges from 0 to 1 and the default value is 0.8.
OBJECTIVE-C

SWIFT

C#
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
CircularCoefficient = 0.5
};

![](charttypesimages/charttypesimg29.png)
8.5.20.3 Exploding a doughnut segment
Exploding a specific doughnut segment, you have to set the index to be exploded using ExplodeIndex
property of the series.
OBJECTIVE-C

SWIFT

C#
DoughnutSeries doughnutSeries = new DoughnutSeries()

Copyright 2001 - 2016 Syncfusion Inc.

178

SfChart

Chart Types

{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
ExplodeIndex = 1
};

![](charttypesimages/charttypesimg30.png)
8.5.20.4 Exploding all the segments
To explode all the segments, you have to enable ExplodeAll property of the series.
OBJECTIVE-C

SWIFT

C#
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",
ExplodeAll = true
};

![](charttypesimages/charttypesimg31.png)
8.5.20.5 Sector of Doughnut
SfChart allows you to render all the data points/segments in semi-doughnut, quarter- doughnut or in
any sector using StartAngle and EndAngle properties.
OBJECTIVE-C

SWIFT

C#
DoughnutSeries doughnutSeries = new DoughnutSeries()
{
ItemsSource = Data,
XBindingPath = "Expense",
YBindingPath = "Value",

Copyright 2001 - 2016 Syncfusion Inc.

179

SfChart

Chart Types

StartAngle = 180,
EndAngle = 360
};

![](charttypesimages/charttypesimg32.png)

8.5.21 Pyramid Chart


To render a pyramid chart, create an instance of PyramidSeries and add to the Series collection
property of SfChart. You can use the following properties to customize the pyramid segment
appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
PyramidSeries pyramidSeries = new PyramidSeries()
{
ItemsSource = Data,
XBindingPath = "Country",
YBindingPath = "Value"
};
chart.Series.Add(pyramidSeries);

![](charttypesimages/charttypesimg33.png)
8.5.21.1 Pyramid Mode
You can render the pyramid series as linear or surface mode. In linear mode, height of the pyramid
segment is based on the Y value and in surface mode, area of the pyramid segment is based on the Y
values. The default value of PyramidMode property is Linear.
OBJECTIVE-C

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

180

SfChart

Chart Types

C#
PyramidSeries pyramidSeries = new PyramidSeries ()
{
ItemsSource = Data,
XBindingPath = "Country",
YBindingPath = "Value",
PyramidMode = ChartPyramidMode.Surface
};

![](charttypesimages/charttypesimg34.png)
8.5.21.2 Gap between the segments
You can control the gap between the two segments using GapRatio property. Its ranges from 0 to 1.
OBJECTIVE-C

SWIFT

C#
PyramidSeries pyramidSeries = new PyramidSeries()
{
ItemsSource = Data,
XBindingPath = "Country",
YBindingPath = "Value",
GapRatio = 0.1
};

![](charttypesimages/charttypesimg35.png)
8.5.21.3 Exploding a pyramid segment
You can explode a pyramid segment using ExplodeIndex property, and ExplodeOffset property is used
to specify the exploded segments distance.
OBJECTIVE-C

SWIFT

C#
PyramidSeries pyramidSeries = new PyramidSeries()

Copyright 2001 - 2016 Syncfusion Inc.

181

SfChart

Chart Types

{
ItemsSource = Data,
XBindingPath = "Country",
YBindingPath = "Value",
ExplodeIndex = 2
};

![](charttypesimages/charttypesimg36.png)

8.5.22 Funnel Chart


To render a funnel chart, create an instance of FunnelSeries and add to the Series collection property
of SfChart. You can use the following properties to customize the funnel segment appearance.

Color used to change the color of the series.


StrokeWidth used to change the stroke width of the series.
StrokeColor used to change the stroke color of the series.
OBJECTIVE-C

SWIFT

C#
SfChart chart = new SfChart();
...
FunnelSeries funnelSeries = new FunnelSeries()
{
ItemsSource = Data,
XBindingPath = "Status",
YBindingPath = "Value"
};
chart.Series.Add(funnelSeries);

![](charttypesimages/charttypesimg37.png)
8.5.22.1 Gap between the segments
You can control the gap between the two segments using GapRatio property. Its ranges from 0 to 1.
OBJECTIVE-C

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

182

SfChart

Chart Types

C#
FunnelSeries funnelSeries = new FunnelSeries()
{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value",
GapRatio = 0.1
};

![](charttypesimages/charttypesimg38.png)
8.5.22.2 Exploding a funnel segment
You can explode a pyramid segment using ExplodeIndex property and ExplodeOffset property is used
to specify the exploded segments distance.
OBJECTIVE-C

SWIFT

C#
FunnelSeries funnelSeries = new FunnelSeries()
{
ItemsSource = Data,
XBindingPath = "Status",
YBindingPath = "Value",
ExplodeIndex = 1
};

![](charttypesimages/charttypesimg39.png)
8.5.22.3 Changing the minimum width of the funnel
You can change the minimum width of the funnel neck using MinWidth property of FunnelSeries.
Default value of MinWidth is 40.
OBJECTIVE-C

SWIFT

C#

Copyright 2001 - 2016 Syncfusion Inc.

183

SfChart

Data Markers

FunnelSeries funnelSeries = new FunnelSeries()


{
ItemsSource = Data,
XBindingPath = "Year",
YBindingPath = "Value",
MinWidth = 20
};

![](charttypesimages/charttypesimg40.png)

8.6 Data Markers


Data markers are used to provide information about the data points to the user. You can add a shape
and label to adorn each data point. This can be enabled using following code snippet,
OBJECTIVE-C
lineSeries.dataMarker.showLabel = true;
lineSeries.dataMarker.showMarker = true;

SWIFT
lineSeries.dataMarker.showLabel = true;
lineSeries.dataMarker.showMarker = true;

C#
lineSeries.DataMarker.ShowLabel
= true;
lineSeries.DataMarker.ShowMarker = true;

Copyright 2001 - 2016 Syncfusion Inc.

184

SfChart

Data Markers

8.6.1 Customizing Labels


The following properties are used to customize the data marker label appearance.

color used to change the color of the label.


backgroundColor used to change the label background color.
borderColor used to change the border color.
borderWidth used to change the thickness of the border.
font used to change the text size, font family and font weight.
margin - used to change the margin size for labels.
angle used to rotate the labels.
Following code snippet illustrates the customization of label and its background,
OBJECTIVE-C
lineSeries.dataMarker.labelStyle.color
lineSeries.dataMarker.labelStyle.borderColor
lineSeries.dataMarker.labelStyle.borderWidth
lineSeries.dataMarker.labelStyle.backgroundColor
lineSeries.dataMarker.labelStyle.angle
lineSeries.dataMarker.labelStyle.margin
5);

Copyright 2001 - 2016 Syncfusion Inc.

=
=
=
=
=
=

[UIColor blueColor];
[UIColor redColor];
2;
[UIColor cyanColor];
315;
UIEdgeInsetsMake(5, 5, 5,

185

SfChart
lineSeries.dataMarker.labelStyle.font
italicSystemFontOfSize:18];

Data Markers
= [UIFont

SWIFT
lineSeries.dataMarker.labelStyle.color
lineSeries.dataMarker.labelStyle.borderColor
lineSeries.dataMarker.labelStyle.borderWidth
lineSeries.dataMarker.labelStyle.backgroundColor
lineSeries.dataMarker.labelStyle.angle
lineSeries.dataMarker.labelStyle.margin
5);
lineSeries.dataMarker.labelStyle.font
UIFont.italicSystemFontOfSize(18);

=
=
=
=
=
=

UIColor.blueColor();
UIColor.redColor();
2;
UIColor.cyanColor();
315;
UIEdgeInsetsMake(5, 5, 5,

C#
lineSeries.DataMarker.LabelStyle.Color
lineSeries.DataMarker.LabelStyle.BorderColor
lineSeries.DataMarker.LabelStyle.BorderWidth
lineSeries.DataMarker.LabelStyle.BackgroundColor
lineSeries.DataMarker.LabelStyle.Angle
lineSeries.DataMarker.LabelStyle.Margin
lineSeries.DataMarker.LabelStyle.Font
UIFont.ItalicSystemFontOfSize (18);

Copyright 2001 - 2016 Syncfusion Inc.

=
=
=
=
=
=
=

UIColor.Blue;
UIColor.Red;
2;
UIColor.Cyan;
315;
5;

186

SfChart

Data Markers

8.6.2 Formatting Label Content


You can customize the content of the label using LabelContent property. Following are the two options
that are supported now,

SFChartLabelContentPercentage This will show the percentage value of corresponding data


point Y value, this is often used in pie, doughnut, funnel and pyramid series types.
SFChartLabelContentYValues This will show the corresponding Y value (Default).
OBJECTIVE-C
pieSeries.dataMarker.labelContent = SFChartLabelContentPercentage;

SWIFT
pieSeries.dataMarker.labelContent = SFChartLabelContent.Percentage;

C#
pieSeries.DataMarker.LabelContent = SFChartLabelContent.Percentage;

Copyright 2001 - 2016 Syncfusion Inc.

187

SfChart

Data Markers

8.6.3 Label Position


This feature is used to position the data marker labels at Center, Inner and Outer position of the actual
data point position. By default, labels are positioned based on the series types for better readability. You
can move the labels horizontally and vertically using offsetX and offsetY properties respectively.
The following screenshot illustrates the default position of data marker labels,

Copyright 2001 - 2016 Syncfusion Inc.

188

SfChart

Data Markers

The following code sample illustrates the center position of data marker labels,
OBJECTIVE-C
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPositionCenter;

SWIFT
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPosition.Center;

C#
series.DataMarker.LabelStyle.LabelPosition =
SFChartDataMarkerLabelPosition.Center;

Copyright 2001 - 2016 Syncfusion Inc.

189

SfChart

Data Markers

The following code sample illustrates the Inner position of data marker labels,
OBJECTIVE-C
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPositionInner;

SWIFT
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPosition.Inner;

C#
series.DataMarker.LabelStyle.LabelPosition =
SFChartDataMarkerLabelPosition.Inner;

Copyright 2001 - 2016 Syncfusion Inc.

190

SfChart

Data Markers

The following code sample illustrates the outer position of data marker labels,
OBJECTIVE-C
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPositionOuter;

SWIFT
series.dataMarker.labelStyle.labelPosition =
SFChartDataMarkerLabelPosition.Outer;

C#
series.DataMarker.LabelStyle.LabelPosition =
SFChartDataMarkerLabelPosition.Outer;

Copyright 2001 - 2016 Syncfusion Inc.

191

SfChart

Data Markers

8.6.4 Customizing Marker Shapes


Shapes can be added to chart data marker by setting the showMarker property to true. There are
different shapes you can set to the chart using MarkerType property such as rectangle, circle, diamond
etc. Following properties are used to customize marker appearance,

markerWidth - used to change the width of the marker


markerHeight - used to change the height of the marker
markerColor - used to change the color of the marker
markerBorderColor - used to change the border color of the shape
markerBorderWidth used to change the marker border thickness
The following code example shows how to enable marker and specify its types,
OBJECTIVE-C
lineSeries.dataMarker.showLabel
lineSeries.dataMarker.showMarker
lineSeries.dataMarker.markerType
lineSeries.dataMarker.markerWidth
lineSeries.dataMarker.markerHeight
lineSeries.dataMarker.markerColor
lineSeries.dataMarker.markerBorderColor

Copyright 2001 - 2016 Syncfusion Inc.

=
=
=
=
=
=
=

false;
true;
SFChartDataMarkerTypeHexagon;
20;
20;
[UIColor cyanColor];
[UIColor redColor];

192

SfChart

Data Markers

lineSeries.dataMarker.markerBorderWidth = 2;

SWIFT
lineSeries.dataMarker.showLabel
lineSeries.dataMarker.showMarker
lineSeries.dataMarker.markerType
lineSeries.dataMarker.markerWidth
lineSeries.dataMarker.markerHeight
lineSeries.dataMarker.markerColor
lineSeries.dataMarker.markerBorderColor
lineSeries.dataMarker.markerBorderWidth

=
=
=
=
=
=
=
=

false;
true;
SFChartDataMarkerType.Hexagon;
20;
20;
UIColor.cyanColor();
UIColor.redColor();
2;

=
=
=
=
=
=
=
=

false;
true;
SFChartDataMarkerType.Hexagon;
20;
20;
UIColor.Cyan;
UIColor.Red;
2;

C#
lineSeries.DataMarker.ShowLabel
lineSeries.DataMarker.ShowMarker
lineSeries.DataMarker.MarkerType
lineSeries.DataMarker.MarkerWidth
lineSeries.DataMarker.MarkerHeight
lineSeries.DataMarker.MarkerColor
lineSeries.DataMarker.MarkerBorderColor
lineSeries.DataMarker.MarkerBorderWidth

Copyright 2001 - 2016 Syncfusion Inc.

193

SfChart

Data Markers

8.6.5 Connector Line


This feature is used to connect label and data point using a line. It can be enabled for any chart types but
this is often used with Pie and Doughnut chart types. Following properties used to customize connector
line,

lineColor used to change the color of the line


lineWidth used to change the stroke thickness of the line
dashes used to set the dashes for the line
The following code illustrates how to specify the connector height and its angle,
OBJECTIVE-C
lineSeries.dataMarker.connectorLineStyle.connectorHeight
lineSeries.dataMarker.connectorLineStyle.connectorRotationAngle
lineSeries.dataMarker.connectorLineStyle.lineColor
blueColor];
lineSeries.dataMarker.connectorLineStyle.lineWidth
lineSeries.dataMarker.connectorLineStyle.dashes
arrayWithObjects:@2,@3,nil];

= 50;
= 175;
= [UIColor
= @3;
= [NSArray

SWIFT
Copyright 2001 - 2016 Syncfusion Inc.

194

SfChart
lineSeries.dataMarker.connectorLineStyle.connectorHeight
lineSeries.dataMarker.connectorLineStyle.connectorRotationAngle
lineSeries.dataMarker.connectorLineStyle.lineColor
UIColor.blueColor();
lineSeries.dataMarker.connectorLineStyle.lineWidth
lineSeries.dataMarker.connectorLineStyle.dashes

Data Markers
= 50;
= 175;
=
= 3;
= [2,3];

C#
lineSeries.DataMarker.ConnectorLineStyle.ConnectorHeight
lineSeries.DataMarker.ConnectorLineStyle.ConnectorRotationAngle
lineSeries.DataMarker.ConnectorLineStyle.LineColor
UIColor.Blue;
lineSeries.DataMarker.ConnectorLineStyle.LineWidth
NSObject[] dashes
= new NSObject[2];
dashes [0]
= (NSNumber)2;
dashes [1]
= (NSNumber)3;
lineSeries.DataMarker.ConnectorLineStyle.Dashes
NSArray.FromNSObjects (dashes);

= 50;
= 175;
=
= 3;

Note: For Pie and Doughnut series, you can set the Bezier curve for connector line using ConnectorType
property of Pie and Doughnut series.

Copyright 2001 - 2016 Syncfusion Inc.

195

SfChart

Legend

8.7 Legend
Legend contains list of chart series/data points in the chart. The information provided in each legend
item helps in identifying the corresponding data series in chart.
Following code example shows how to enable legend in a chart,
OBJECTIVE-C
chart.legend.visible = true;

SWIFT
chart.legend.visible = true;

C#
chart.Legend.Visible = true;

8.7.1 Customizing Labels


label property of SFSeries is used to define the label for the corresponding series legend item. The
following properties are used to customize the legend items label appearance.

Copyright 2001 - 2016 Syncfusion Inc.

196

SfChart

Legend

color used to change the color of the label.


font used to change the text size, font family and font weight.
margin - used to change the margin size for labels.
OBJECTIVE-C
chart.legend.labelStyle.color = [UIColor blueColor];
chart.legend.labelStyle.font
= [UIFont boldSystemFontOfSize:18];
chart.legend.labelStyle.margin = UIEdgeInsetsMake(0, 5, 0, 5);

SWIFT
chart.legend.labelStyle.color = UIColor.blueColor();
chart.legend.labelStyle.font
= UIFont.boldSystemFontOfSize(18);
chart.legend.labelStyle.margin = UIEdgeInsetsMake(0, 5, 0, 5);

C#
chart.Legend.LabelStyle.Color = UIColor.Blue;
chart.Legend.LabelStyle.Font
= UIFont.BoldSystemFontOfSize (18);
chart.Legend.LabelStyle.Margin = UIEdgeInsets (0, 5, 0, 5);

Copyright 2001 - 2016 Syncfusion Inc.

197

SfChart

Legend

8.7.2 Legend Icons


Legend icons are enabled by default, however, you can control its visibility using isIconVisible property.
Also you can specify the icon type using legendIcon property in SFSeries. iconWidth and iconHeight
properties are used to adjust the width and height of the legend icons respectively.
OBJECTIVE-C
chart.legend.isIconVisible
chart.legend.iconHeight
chart.legend.iconWidth
series.legendIcon

=
=
=
=

true;
20;
20;
SFChartLegendIconSeriesType;

SWIFT
Copyright 2001 - 2016 Syncfusion Inc.

198

SfChart

Legend

chart.legend.isIconVisible
chart.legend.iconHeight
chart.legend.iconWidth
series.legendIcon

=
=
=
=

true;
20;
20;
SFChartLegendIconSeriesType;

=
=
=
=

true;
20;
20;
SFChartLegendIcon.SeriesType;

C#
chart.Legend.IsIconVisible
chart.Legend.IconHeight
chart.Legend.IconWidth
series.LegendIcon

8.7.3 Legend Title


Following properties are used to define and customize the legend title.

text used to change the title text.


textColor used to change the color of the title text.
font used to change the text size, font family and font weight of the title.
edgeInsets used to change the margin size for title.
textAlignment used to change the alignment of the title text, it can be start, end and center.
backgroundColor used to change the title background color.
Copyright 2001 - 2016 Syncfusion Inc.

199

SfChart

Legend

borderColor used to change the border color.


borderWidth used to adjust the title border width.
OBJECTIVE-C
chart.legend.title.text
chart.legend.title.textColor
chart.legend.title.font
chart.legend.title.textAlignment
chart.legend.title.backgroundColor
chart.legend.title.borderColor
chart.legend.title.borderWidth

=
=
=
=
=
=
=

@"Years";
[UIColor redColor];
[UIFont boldSystemFontOfSize:18];
NSTextAlignmentCenter;
[UIColor grayColor];
[UIColor blueColor];
3;

=
=
=
=
=
=
=

"Years";
UIColor.redColor();
UIFont.boldSystemFontOfSize(18);
NSTextAlignment.Center;
UIColor.lightGrayColor();
UIColor.blueColor();
3;

=
=
=
=
=
=
=

new NSString ("Years");


UIColor.Red;
UIFont.BoldSystemFontOfSize (20);
UITextAlignment.Center;
UIColor.Gray;
UIColor.Blue;
3;

SWIFT
chart.legend.title.text
chart.legend.title.textColor
chart.legend.title.font
chart.legend.title.textAlignment
chart.legend.title.backgroundColor
chart.legend.title.borderColor
chart.legend.title.borderWidth

C#
chart.Legend.Title.Text
chart.Legend.Title.TextColor
chart.Legend.Title.Font
chart.Legend.Title.TextAlignment
chart.Legend.Title.BackgroundColor
chart.Legend.Title.BorderColor
chart.Legend.Title.BorderWidth

Copyright 2001 - 2016 Syncfusion Inc.

200

SfChart

Legend

8.7.4 Toggle the series visibility


You can control the visibility of the series by tapping on the legend item. You can enable this feature by
enabling toggleSeriesVisibility property.
OBJECTIVE-C
chart.legend.toggleSeriesVisibility = true;

SWIFT
chart.legend.toggleSeriesVisibility = true;

C#
chart.Legend.ToggleSeriesVisibility = true;

8.7.5 Positioning the Legend


You can position the legend anywhere inside the chart. Following properties are used to customize the
legend positions.

Copyright 2001 - 2016 Syncfusion Inc.

201

SfChart

Legend

dockPosition used to position the legend relatively. Options available are: Left, Right, Top,
Bottom and Floating. If the dock position is Floating, you can position the legend using x and y
coordinates.
offsetX used to move the legend on x coordinate by the given offset value, this will work only
if the dock position is Floating.
offsetY - used to move the legend on y coordinate by the given offset value, this will work only
if the dock position is Floating.
orientation - used to chage the legend items ordering direction. Options available are:
Horizontal and Vertical.
OBJECTIVE-C
[Objective-C]
chart.legend.dockPosition
chart.legend.offsetX
chart.legend.offsetY
chart.legend.orientation

=
=
=
=

SFChartLegendPosition.Float;
70;
90;
SFChartLegendOrientation.Vertical;

=
=
=
=

SFChartLegendPositionFloat;
70;
90;
SFChartLegendOrientationVertical;

=
=
=
=

SFChartLegendPosition.Float;
70;
90;
SFChartLegendOrientation.Vertical;

SWIFT
[Swift]
chart.legend.dockPosition
chart.legend.offsetX
chart.legend.offsetY
chart.legend.orientation

C#
[C#]
chart.Legend.DockPosition
chart.Legend.OffsetX
chart.Legend.OffsetY
chart.Legend.Orientation

Copyright 2001 - 2016 Syncfusion Inc.

202

SfCircularGauge

Overview

9 SfCircularGauge
9.1 Overview
Essential CircularGauge for iOS is ideal to visualize numeric values over a circular scale. The appearance
of the gauge can be fully
customized to seamlessly integrate with your applications. Essential CircularGauge is a perfect solution
for developers looking to add
advanced, feature rich CircularGauge to their applications.

9.1.1 Key Features


Scales - Supports rendering of multiple scales within the CircularGauge.
Ticks and Labels - Supports extensive appearance customization for Labels and Ticks in the Scale.

Copyright 2001 - 2016 Syncfusion Inc.

203

SfCircularGauge

Getting Started

Ranges - Supports highlighting the range of values in the gauge scale.


Pointers - Supports adding multiple pointers to the gauge.
Animation - Supports the animation of a pointer.
Headers - Supports the addition of custom label text in the required location of the gauge.

9.2 Getting Started


9.2.1 Create your first Circular Gauge in Objective C
Essential Gauge for iOS allows you to visualize numeric values over a circular scale. The appearance of
the gauge can be fully customized
to seamlessly integrate with your applications.
This section provides a quick overview for working with Essential Gauge for iOS. It walks through the
entire process of creating
a real world gauge.

CircularGauge

Copyright 2001 - 2016 Syncfusion Inc.

204

SfCircularGauge

Getting Started

9.2.1.1 Initialize the CircularGauge


Create a CircularGauge object in the View Controller and add CircularGauge as subview in viewdidload
override method.
You can create a CircularGauge object by using the following code example.
C
- (void)viewDidLoad {
[super viewDidLoad];
// creating new instance for circular Gauge
circularGauge = [[SFCircularGauge alloc] initWithFrame:self.view.frame];
[self.view addSubview: circularGauge ];
}

9.2.1.2 Insert a Scale to the Gauge


Next, add one of more scales.
C
// creating new instance for circular Gauge
SFCircularGauge _circularGauge =[[SFCircularGauge
alloc]initWithFrame:frame];
//adding new Scale
SFCircularScale *scale = [[SFCircularScale alloc]init];
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = [UIColor colorWithRed:0.82 green:0.275 blue:0.275
alpha:1];/*#d14646*/
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
[_circularGauge.scales addObject:scale];
self.control= _circularGauge;

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

205

SfCircularGauge

Getting Started

Added scale to the Gauge


9.2.1.3 Customize the ticks
You can customize the major and minor ticks using the Tick settings as follows.
C
// creating new instance for circular Gauge
SFCircularGauge _circularGauge =[[SFCircularGauge
alloc]initWithFrame:frame];
//adding new Scale
SFCircularScale *scale = [[SFCircularScale alloc]init];
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = [UIColor colorWithRed:0.82 green:0.275 blue:0.275
alpha:1];/*#d14646*/
scale.minorTicksPerInterval = 0;

Copyright 2001 - 2016 Syncfusion Inc.

206

SfCircularGauge

Getting Started

scale.labelOffset = 0.1;
//adding major ticks
SFTickSettings *majorTickSettings = [[SFTickSettings alloc]init];
majorTickSettings.color = [UIColor colorWithRed:0.267 green:0.267 blue:0.267
alpha:1] /*#444444*/;
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
SFTickSettings *minorTicksSettings = [[SFTickSettings alloc]init];
minorTicksSettings.color = [UIColor colorWithRed:0.267 green:0.267
blue:0.267 alpha:1]; /*#444444*/
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
[_circularGauge.scales addObject:scale];
self.control= _circularGauge;

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

207

SfCircularGauge

Getting Started

Tick Customization
9.2.1.4 Add Pointers to the Scale
Now, add needle pointer and range pointer and associate it with a scale.
C
// creating new instance for circular Gauge
SFCircularGauge _circularGauge =[[SFCircularGauge
alloc]initWithFrame:frame];
//adding new ScaleSFCircularScale *scale = [[SFCircularScale alloc]init];
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = [UIColor colorWithRed:0.82 green:0.275 blue:0.275
alpha:1];/*#d14646*/
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
//adding major ticks
SFTickSettings *majorTickSettings = [[SFTickSettings alloc]init];
majorTickSettings.color = [UIColor colorWithRed:0.267 green:0.267 blue:0.267
alpha:1] /*#444444*/;
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
SFTickSettings *minorTicksSettings = [[SFTickSettings alloc]init];
minorTicksSettings.color = [UIColor colorWithRed:0.267 green:0.267
blue:0.267 alpha:1]; /*#444444*/
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
//adding needle pointer
SFNeedlePointer *needlePointer = [[SFNeedlePointer alloc]init];
needlePointer.value = 70;
needlePointer.knobColor = [UIColor colorWithRed:0.169 green:0.749 blue:0.722
alpha:1] /*#2bbfb8*/;
needlePointer.knobRadius = 12;
needlePointer.pointerType = Bar;
needlePointer.width = 2;
needlePointer.lengthFactor = 0.7;
needlePointer.color = [UIColor grayColor];
[scale.pointers addObject:needlePointer];
//adding range pointer
SFRangePointer *rangePointer = [[SFRangePointer alloc]init];
rangePointer.value = 70;
rangePointer.width = 6;
rangePointer.color = [UIColor colorWithRed:0.169 green:0.749 blue:0.722
alpha:1] /*#2bbfb8*/;
[scale.pointers addObject:rangePointer];
[_circularGauge.scales addObject:scale];

Copyright 2001 - 2016 Syncfusion Inc.

208

SfCircularGauge

Getting Started

The following screenshot illustrates the output of the above code.

Added pointers to the Gauge


9.2.1.5 Add Header to the Gauge
You can add custom labels in the gauge and position it.
C
// creating new instance for circular Gauge
SFCircularGauge _circularGauge =[[SFCircularGauge
alloc]initWithFrame:frame];
//adding new Scale
SFCircularScale *scale = [[SFCircularScale alloc]init];
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;

Copyright 2001 - 2016 Syncfusion Inc.

209

SfCircularGauge

Getting Started

scale.rimColor = [UIColor colorWithRed:0.82 green:0.275 blue:0.275


alpha:1];/*#d14646*/
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
//adding major ticks
SFTickSettings *majorTickSettings = [[SFTickSettings alloc]init];
majorTickSettings.color = [UIColor colorWithRed:0.267 green:0.267 blue:0.267
alpha:1] /*#444444*/;
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
SFTickSettings *minorTicksSettings = [[SFTickSettings alloc]init];
minorTicksSettings.color = [UIColor colorWithRed:0.267 green:0.267
blue:0.267 alpha:1]; /*#444444*/
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
//adding needle pointer
SFNeedlePointer *needlePointer = [[SFNeedlePointer alloc]init];
needlePointer.value = 70;
needlePointer.knobColor = [UIColor colorWithRed:0.169 green:0.749 blue:0.722
alpha:1] /*#2bbfb8*/;
needlePointer.knobRadius = 12;
needlePointer.pointerType = Bar;
needlePointer.width = 2;
needlePointer.lengthFactor = 0.7;
needlePointer.color = [UIColor grayColor];
[scale.pointers addObject:needlePointer];
//adding range pointer
SFRangePointer *rangePointer = [[SFRangePointer alloc]init];
rangePointer.value = 70;
rangePointer.width = 6;
rangePointer.color = [UIColor colorWithRed:0.169 green:0.749 blue:0.722
alpha:1] /*#2bbfb8*/;
[scale.pointers addObject:rangePointer];
[_circularGauge.scales addObject:scale];
//adding new header
SFGaugeHeader *header = [[SFGaugeHeader alloc]init];
header.text = @"Speedometer";
header.textColor = [UIColor grayColor];
header.position = CGPointMake(140, 250);
[_circularGauge.headers addObject:header];
self.control= _circularGauge;

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

210

SfCircularGauge

Getting Started

Added Header to the Gauge

9.2.2 Create your first Circular Gauge in Swift


Essential Gauge for iOS allows you visualize numeric values over a circular scale. The appearance of the
gauge can be fully customized to seamlessly integrate with your applications.
This section provides a quick overview for working with Essential Gauge for iOS. It walks through the
entire process of creating a real world gauge.

Copyright 2001 - 2016 Syncfusion Inc.

211

SfCircularGauge

Getting Started

CircularGauge
9.2.2.1 Initialize the CircularGauge
Create a CircularGauge object in the View Controller and add CircularGauge as subview in viewdidload
override method.
You can create a CircularGauge object by using the following code example.
C
// creating new instance for circular Gauge
var _ circularGauge: SFCircularGauge = SFCircularGauge();
override func viewDidLoad()
{
super.viewDidLoad()
_ circularGauge.frame = self.view.bounds;
self.view.addSubview(_circularGauge);
}

9.2.2.2 Insert a Scale to the Gauge


Next, add one of more scales.

Copyright 2001 - 2016 Syncfusion Inc.

212

SfCircularGauge

Getting Started

C
// creating new instance for circular Gauge
var circularGauge : SFCircularGauge = SFCircularGauge();
//adding new Scale
var scale : SFCircularScale = SFCircularScale();
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = UIColor(red:0.82, green:0.275, blue:0.275, alpha:1);
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
circularGauge.scales.addObject(scale);

The following screenshot illustrates the output of the above code.

Added scale to the Gauge

Copyright 2001 - 2016 Syncfusion Inc.

213

SfCircularGauge

Getting Started

9.2.2.3 Customize the ticks


You can customize the major and minor ticks using the Tick settings as follows.
C
// creating new instance for circular Gauge
var circularGauge : SFCircularGauge = SFCircularGauge();
//adding new Scale
var scale : SFCircularScale = SFCircularScale();
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = UIColor(red:0.82, green:0.275, blue:0.275, alpha:1);
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
//adding major ticks
var majorTickSettings : SFTickSettings = SFTickSettings();
majorTickSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
var minorTicksSettings : SFTickSettings = SFTickSettings();
minorTicksSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
circularGauge.scales.addObject(scale);

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

214

SfCircularGauge

Getting Started

Tick Customization
9.2.2.4 Add Pointers to the Scale
Now, add needle pointer and range pointer and associate it with a scale.
C
// creating new instance for circular Gauge
var circularGauge : SFCircularGauge = SFCircularGauge();
//adding new Scale
var scale : SFCircularScale = SFCircularScale();
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = UIColor(red:0.82, green:0.275, blue:0.275, alpha:1);
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
//adding major ticks

Copyright 2001 - 2016 Syncfusion Inc.

215

SfCircularGauge

Getting Started

var majorTickSettings : SFTickSettings = SFTickSettings();


majorTickSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
var minorTicksSettings : SFTickSettings = SFTickSettings();
minorTicksSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
//adding needle pointer
var needlePointer : SFNeedlePointer = SFNeedlePointer();
needlePointer.value = 70;
needlePointer.knobColor = UIColor(red:0.169, green:0.749, blue:0.722,
alpha:1);
needlePointer.knobRadius = 12;
// needlePointer.pointerType = Bar;
needlePointer.width = 2;
needlePointer.lengthFactor = 0.7;
needlePointer.color = UIColor.grayColor();
scale.pointers.addObject(needlePointer);
//adding range pointer
var rangePointer : SFRangePointer = SFRangePointer();
rangePointer.value = 70;
rangePointer.width = 6;
rangePointer.color = UIColor(red:0.169, green:0.749, blue:0.722, alpha:1);
scale.pointers.addObject(rangePointer);
circularGauge.scales.addObject(scale);

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

216

SfCircularGauge

Getting Started

Added pointers to the Gauge


9.2.2.5 Add Header to the Gauge
You can add custom labels in the gauge and position it.
C
// creating new instance for circular Gauge
var circularGauge : SFCircularGauge = SFCircularGauge();
//adding new Scale
var scale : SFCircularScale = SFCircularScale();
scale.startValue = 0;
scale.endValue = 100;
scale.startAngle = 40;
scale.sweepAngle = 320;
scale.rimWidth = 6;
scale.interval = 10;
scale.showTicks = true;
scale.rimColor = UIColor(red:0.82, green:0.275, blue:0.275, alpha:1);
scale.minorTicksPerInterval = 0;
scale.labelOffset = 0.1;
//adding major ticks

Copyright 2001 - 2016 Syncfusion Inc.

217

SfCircularGauge

Getting Started

var majorTickSettings : SFTickSettings = SFTickSettings();


majorTickSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
majorTickSettings.size = 7;
majorTickSettings.offset = 0.041;
majorTickSettings.width=1.5;
scale.majorTickSettings = majorTickSettings;
//adding minor ticks
var minorTicksSettings : SFTickSettings = SFTickSettings();
minorTicksSettings.color = UIColor(red:0.267, green:0.267, blue:0.267,
alpha:1);
minorTicksSettings.size = 8;
minorTicksSettings.offset = 0.5;
scale.minorTickSettings = minorTicksSettings;
//adding needle pointer
var needlePointer : SFNeedlePointer = SFNeedlePointer();
needlePointer.value = 70;
needlePointer.knobColor = UIColor(red:0.169, green:0.749, blue:0.722,
alpha:1);
needlePointer.knobRadius = 12;
// needlePointer.pointerType = Bar;
needlePointer.width = 2;
needlePointer.lengthFactor = 0.7;
needlePointer.color = UIColor.grayColor();
scale.pointers.addObject(needlePointer);
//adding range pointer
var rangePointer : SFRangePointer = SFRangePointer();
rangePointer.value = 70;
rangePointer.width = 6;
rangePointer.color = UIColor(red:0.169, green:0.749, blue:0.722, alpha:1);
scale.pointers.addObject(rangePointer);
circularGauge.scales.addObject(scale);
//adding new header
var header : SFGaugeHeader = SFGaugeHeader();
header.text = "Speedometer";
header.textColor = UIColor.grayColor();
header.position = CGPointMake((frame.size.width)/2,
(frame.size.height)*0.6);
circularGauge.headers.addObject(header);

The following screenshot illustrates the output of the above code.

Copyright 2001 - 2016 Syncfusion Inc.

218

SfDigitalGauge

Overview

Added Header to the Gauge

10 SfDigitalGauge
10.1 Overview
The Digital Gauge control is used to display alphanumeric characters in digital (LED Display) mode.
Digital Gauge is used to display a range of values that uses characters in combination with numbers. The
Digital Gauge control for Android lets you visualize alpha and numeric values over a Digital Gauge frame.
Digital Gauge is used to display a range of values that use character in combination with numbers.

10.1.1 Key Features


Four Predefined CharacterTypes
Full Character Customization provided
Segments can be customized.
Special characters support has been provided

Copyright 2001 - 2016 Syncfusion Inc.

219

SfDigitalGauge

Getting Started

10.2 Getting Started


This section explains you the steps to configure a DigitalGauge control in a real-time scenario and also
provides a walk-through on some of the customization features available in DigitalGauge control.

10.2.1 Creating Your First DigitalGauge in ios


Illustration for the procedures to install the Syncfusion Essential Studio can be refered from Syncfusion
ios components installation, Syncfusion.SfDigitalGauge.ios.aar should be used to add digitalGauge
reference in the application.
10.2.1.1 Initializing DigitalGauge
Adding reference to digitalGauge.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

220

SfDigitalGauge

Getting Started

#import <SFDigitalGaugeUI/SFDigitalGaugeUI.h>

SWIFT
import SFDigitalGaugeUI

Create an instance for DigitalGauge control and adding to application.


OBJECTIVE-C
@interface ViewController()
{
SFDigitalGauge *digitalGauge;
}
- (void)viewDidLoad
{
[superviewDidLoad];
digitalGauge=[[SFDigitalGaugealloc]init];
[self.view addSubview:digitalGauge];
}

SWIFT
var digitalGauge: SFDigitalGauge = SFDigitalGauge ();
override func load(frame:CGRect)
{
super.viewDidLoad()
digitalGauge.frame=self.view.bounds;
self.view.addSubview(digitalGauge);
}

10.2.1.2 Configure the properties of DigitalGauge


OBJECTIVE-C
digitalGauge.value = Syncfusion;
digitalGauge.characterHeight = 36;
digitalGauge.characterWidth = 18;
digitalGauge.segmentWidth = 3;
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSeven;

SWIFT
digitalGauge.characterHeight = 36;
digitalGauge.characterWidth = 18;
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSeven;
digitalGauge.value = Syncfusion;

10.2.2 Creating Your First DigitalGauge in Xamarin.iOS


10.2.2.1 Referencing Essential Studio Components in Your Solution
After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation
folders, typically:

Copyright 2001 - 2016 Syncfusion Inc.

221

SfDigitalGauge

CharacterHeight

{Syncfusion Installed location}\Essential Studio {version number}\lib


You have to add the following assembly reference to the iOS classic project
ios\Syncfusion.SfDigitalGauge.iOS.dll
And below assembly reference to the iOS unified project.
ios-unifed\Syncfusion.SfDigitalGauge.iOS.dll
10.2.2.2 Add and Configure the DigitalGauge
Adding reference to DigitalGauge.
C#
using Syncfusion.SfDigitalGauge.iOS;

Create an instance of SfDigitalGauge.


C#
SFDigitalGauge digitalGauge = new SFDigitalGauge ();
this.AddSubview(digitalGauge);

10.2.2.3 Configure the properties of DigitalGauge


C#
digitalGauge.CharacterHeight = 36;
digitalGauge.CharacterWidth = 18;
digitalGauge.CharacterType =
SFDigitalGaugeCharacterType.SFDigitalGaugeCharacterTypeSegmentSeven;
digitalGauge.Value = Syncfusion;

10.3 CharacterHeight
The value of the Digital Characters is scaled by altering the height of the digital characters. It is achieved
by setting the characterHeight property in the Digital GaugeSets the height of character in digital gauge.
OBJECTIVE-C
digitalGauge.characterHeight = 36;

SWIFT
digitalGauge.characterHeight = 36;

C#
digitalGauge.CharacterHeight = 36;

Copyright 2001 - 2016 Syncfusion Inc.

222

SfDigitalGauge

CharacterType

10.4 CharacterType
The Digital Characters can be drawn in 4 different segments as follows.

1. Seven
2. Fourteen
3. Sixteen
4. EightCrossEightDotMatrix
Note: By default, SegmentSeven is the default CharacterType in the Digital Gauge.

10.4.1 Seven Segment


OBJECTIVE-C
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSeven;

SWIFT
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSeven;

C#
digitalGauge.CharacterType=CharacterTypes.SegmentSeven;

Copyright 2001 - 2016 Syncfusion Inc.

223

SfDigitalGauge

CharacterType

10.4.2 Fourteen Segment


OBJECTIVE-C
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentFourteen;

SWIFT
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentFourteen;

C#
digitalGauge.CharacterType=CharacterTypes.segmentFourteen;

Copyright 2001 - 2016 Syncfusion Inc.

224

SfDigitalGauge

CharacterType

10.4.3 Sixteen Segment


OBJECTIVE-C
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSixteen;

SWIFT
digitalGauge.characterType = SFDigitalGaugeCharacterTypeSegmentSixteen;

C#
digitalGauge.CharacterType=CharacterTypes.segmentSixteen;

10.4.4 EightCrossEightDotMatrix Segment


OBJECTIVE-C
digitalGauge.characterType =
SFDigitalGaugeCharacterTypeEightCrossEightDotMatrix;

SWIFT
digitalGauge.characterType =
SFDigitalGaugeCharacterTypeEightCrossEightDotMatrix;

C#
digitalGauge.CharacterType=CharacterTypes.EightCrossEightDotMatrix;

Copyright 2001 - 2016 Syncfusion Inc.

225

SfDigitalGauge

CharacterWidth

10.5 CharacterWidth
The value of the Digital Characters is scaled by altering the width of the digital characters. It is achieved
by setting the characterWidth property.
OBJECTIVE-C
digitalGauge.characterWidth = 18;

SWIFT
digitalGauge.characterWidth = 18;

C#
digitalGauge.CharacterWidth = 18;

Copyright 2001 - 2016 Syncfusion Inc.

226

SfDigitalGauge

Value

10.6 Value
The Digital Characters in the Digital Gauge is viewed in different types of segments. These digital
characters are set to the Digital Gauge through the Value property of type string.
OBJECTIVE-C
digitalGauge.value=Syncfusion;

SWIFT
digitalGauge.value=Syncfusion;

C#
digitalGauge.Value=Syncfusion;

Copyright 2001 - 2016 Syncfusion Inc.

227

SfLinearGauge

Overview

11 SfLinearGauge
11.1 Overview
Linear Gauge displays a range of values graphically along the linear scale. It can very well be designated
as the linear form of the Circular Gauge. It measures the values of the scales and can be presented in a
horizontal or vertical slider or meter. Linear Gauge is used to identify the quantitative values in analog
format. It is rendered as a canvas image. By using the Linear Gauge control, it is possible to render the
thermometer.

Linear Gauge

11.1.1 Use Cases


1. Used in thermometer.
2.
3.
4.
5.

Used in real world applications, such as volume control.


Used in industries to visualize pressure, temperature and many more.
Used in sensors like equipment.
Used to visualize the memory usage.

Copyright 2001 - 2016 Syncfusion Inc.

228

SfLinearGauge

Getting Started

11.1.2 Key Features


1. Ticks and Labels can be customized.
2. Multiple ranges can be added.
3. Pointers can be customized.
4. Scales can be customized.

11.1.3 Key Elements

Key Elements of Linear Gauge

11.2 Getting Started


A Linear Gauge is composed of MainScale, the central UI component. You can see a Linear Gauge in
XCode, when you click and drag the Linear Gauge icon from the Toolbox. The view of the Linear Gauge
can be changed by setting the Orientation property of the Linear Gauge. MainScale is a linear scale that
comprises of the following components:

11.2.1 Ticks
Linear Gauge scales are designed with two kinds of ticks:

1. Major Ticks- Primary scale indicators.


2. Minor Ticks- Secondary scale indicators that fall between the major ticks.

11.2.2 Labels
Labels are quantified to specify the numeric values for major ticks based upon the interval of the linear
scale.

11.2.3 Ranges
Linear scale contains one or more ranges. A range shows the start and end values of the inner divisions
within the linear scales whole range. Each range displays different zones or regions of the same metrics,
like high, low and average temperature range.

11.2.4 Pointers
Pointer is a key element of the linear scale that points to a value or measure on that scale. A linear scale
has one or more pointers that can be used to measure different values for different criteria. Each
pointer has a Value property that specifies the current value of the linear scale based upon its
measurement.

Copyright 2001 - 2016 Syncfusion Inc.

229

SfLinearGauge

Getting Started

11.2.5 Create your first Linear Gauge in Objective C


This section encompasses on how to create the Linear Gauge for your business requirements in mobility
that is to be shared as iOS application. You can also pass the required data to default Linear Gauge and
customize it according to your requirements. This example illustrates on how to create a Linear Gauge
representing the Memory usage.

Linear gauge
11.2.5.1 Create a Linear Gauge
Getting start to develop an application with Syncfusion iOS Linear Gauge is simple. Following steps
explain how to create and configure its elements,

1. Add the SfGaugeUI.framework to your viewcontroller, by adding the framework under the Link
Binary With Libraries.
Copyright 2001 - 2016 Syncfusion Inc.

230

SfLinearGauge

Getting Started

2. Import SFGauge.h in the viewcontroller header file (Say ViewController.h).


C
//Objective C
#import <SFGauge/SFGaugeUI.h>
//Objective C
- (void)viewDidLoad
{
[super viewDidLoad];
SFLinearGauge* _linearGauge;
UIScreen *screen
= [UIScreen mainScreen];
NSUInteger margin
= MAX((screen.bounds.size.width screen.applicationFrame.size.width),
(screen.bounds.size.height - screen.applicationFrame.size.height));
CGRect rect
= CGRectMake(self.view.frame.origin.x,
self.view.frame.origin.y+margin,
self.view.frame.size.width, self.view.frame.size.height -margin);
//Initialize the Gauge with frame
_ linearGauge = [[SFLinearGauge alloc] initWithFrame:rect];
}

11.2.5.2 Add a Scale


Add a scale for the LinearGauge. The memory usage is displayed in percentage. Before adding the scale
to the LinearGauge, create your own values to the scale. Assign the scale to the LinearGauge as
illustrated in the following code example.
C
//Objective C
SFLinearScale *scale=[[SFLinearScale alloc] init];
scale.interval=20;
scale.maximum = 100.0;
scale.minimum=0;
scale.showRim=true;
scale.showScaleLabel=true;
scale.minorTicksPerInterval=1;
scale.scaleBarColor=RGB(250,236,236);
scale.labelColor=RGB(84,84,84);;
scale.labelPostfix = @"%";
scale.labelOffset=0.03;

The above code illustrates the minimum and maximum value for the scale and assigning the size and
length of the scale. The interval denotes the gap between the Main ticks that is represented in the scale.
Likewise the MinorTicksPerInterval denotes the number of ticks that is to be present in between the
MajorTicks.
11.2.5.3 Add Ticks
There are two kinds of Ticks, majorticks and minorticks. Major ticks are the primary scale indicators and
minor ticks are the secondary scale indicators that fall between the major ticks. You can customize the
major ticks and minor ticks and can assign them to the scale using the following code example.
C
//Objective C

Copyright 2001 - 2016 Syncfusion Inc.

231

SfLinearGauge

Getting Started

//Major Ticks
SFLinearTickSettings *smajor=[[SFLinearTickSettings alloc] init];
smajor.length=12;
smajor.color=RGB(175,175,175);
smajor.thickness=1;
scale.majorTickSettings=smajor;
//Minor Ticks
SFLinearTickSettings *sminor=[[SFLinearTickSettings alloc] init];
sminor.length=10;
sminor.color=RGB(175,175,175);
sminor.thickness=1;
scale.minorTickSettings=sminor;

The above code example displays the majorticks and minor ticks for the scale that is assigned to the
Linear Gauge.
11.2.5.4 Add Pointers
Pointer is a key element of the linear scale that points a value or measure on that scale. A linear scale
can have one or more pointers that can be used to measure different values for different criteria. Each
pointer has a Value property that specifies the current value of the linear scale based upon its
measurement.
There are two types of Pointers, BarPointer and SymbolPointer. You can refer to the following code
example for adding the symbol pointers and bar pointer to the scale.
C
//Objective C
//SymbolPointer
SFSymbolPointer * needle2=[[SFSymbolPointer alloc] init];
needle2.color=RGB(65,77,79);
needle2.offset=0.3;
needle2.value=50;
needle2.lengthFactor=10;
needle2.thinkness=4;
//Bar Pointer
SFBarPointer * needle1=[[SFBarPointer alloc] init];
needle1.color=RGB(206,69,69);
needle1.value=needle2.value;
needle1.thinkness=5;
[scale.pointers addObject:needle1];

Now, the pointers are displayed at the defined value in the scale with the respective color and width.
Next, add this pointer to a collection and assign it to the scale.
C
//Objective C
[scale.pointers addObject:needle1];
[scale.pointers addObject:needle2];

Copyright 2001 - 2016 Syncfusion Inc.

232

SfLinearGauge

Getting Started

11.2.5.5 Add Range


Scale can contain one or more ranges. A range displays the start and end values of the inner divisions
within the linear scales whole range. Each range can display different zones or regions of the same
metrics: like high, low and average temperature range.
C
//Objective C
//Ranges
SFLinearRange *range1=[[SFLinearRange alloc] init];
range1.startValue=0;
range1.endValue=100;
range1.Color=RGB(234,248,249);
range1.offset=-0.3;
SFLinearRange *range2=[[SFLinearRange alloc] init];
range2.startValue=0;
range2.endValue=60;
range2.Color=RGB(50,184,198);
range2.offset=-0.3;

The above code example adds multiple range to a scale. Next, add these ranges to a collection and
assign them to the scale. Refer to the following code example.
C
//Objective C
[scale.ranges addObject:range1];
[scale.ranges addObject:range2];

Finally add this scale to Collection and assign it to the Linear Gauge using the following code example.
C
//Objective C
[_linearGauge.scales addObject:scale];

Now the scales are added successfully to the Linear Gauge. The following code is the complete code of
the Linear Gauge that you have created.
C
//Objective C
#import "LinearGauge.h"
//#import <SfGauge.iOS/SFLinearHeader.h>
#define RGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0
alpha:1.0]
@implementation LinearGauge
{
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
frame.origin.x+=60;
frame.origin.y+=60;
frame.size.height -=120;

Copyright 2001 - 2016 Syncfusion Inc.

233

SfLinearGauge

Getting Started

frame.size.width -= 120;
_linearGauge = [[SFLinearGauge alloc]initWithFrame:frame];
_linearGauge.backgroundColor=[UIColor whiteColor];
[self load];
}
return self;
}
-(void)load
{
SFLinearScale *scale=[[SFLinearScale alloc] init];
scale.interval=20;
scale.maximum = 100.0;
scale.minimum=0;
scale.showRim=true;
scale.showScaleLabel=true;
scale.minorTicksPerInterval=1;
scale.scaleBarColor=RGB(237,237,237);
scale.labelColor=RGB(84,84,84);;
scale.labelOffset=0;
//SymbolPointer
SFSymbolPointer * needle2=[[SFSymbolPointer alloc] init];
needle2.color=RGB(65,77,79);
needle2.offset=0.3;
needle2.value=50;
needle2.lengthFactor=10;
needle2.thinkness=4;
[scale.pointers addObject:needle2];
//Bar Pointer
SFBarPointer * needle1=[[SFBarPointer alloc] init];
needle1.color=RGB(206,69,69);
needle1.value=needle2.value;
needle1.thinkness=5;
[scale.pointers addObject:needle1];
//Major Ticks
SFLinearTickSettings *smajor=[[SFLinearTickSettings alloc] init];
smajor.length=12;
smajor.color=RGB(75,75,75);
smajor.thickness=1;
scale.majorTickSettings=smajor;
//Minor Ticks
SFLinearTickSettings *sminor=[[SFLinearTickSettings alloc] init];
sminor.length=10;
sminor.color=RGB(75,75,75);
sminor.thickness=1;
scale.minorTickSettings=sminor;
//Ranges
SFLinearRange *range1=[[SFLinearRange alloc] init];
range1.startValue=0;
range1.endValue=100;
range1.Color=RGB(50,136,198);
range1.offset=-0.3;
[scale.ranges addObject:range1];
SFLinearRange *range2=[[SFLinearRange alloc] init];
range2.startValue=0;
range2.endValue=60;
range2.Color=RGB(103,182,219);
range2.offset=-0.3;

Copyright 2001 - 2016 Syncfusion Inc.

234

SfLinearGauge

Getting Started

[scale.ranges addObject:range2];
_linearGauge.orientation=SFOrientationVertical;
[_linearGauge.scales addObject:scale];
self.control=_linearGauge ;
}
@end

Linear Gauge in iOS

11.2.6 Create your first Linear Gauge in Swift


This section explains on how to create the LinearGauge for your business requirements in mobility that
is to be shared as iOS application. You can also pass the required data to default LinearGauge and
customize it according to your requirements. This example illustrates on how to create a LinearGauge
representing the Memory usage.
Copyright 2001 - 2016 Syncfusion Inc.

235

SfLinearGauge

Getting Started

Linear gauge
11.2.6.1 Create a Linear Gauge
Getting start to develop an application with Syncfusion iOS Linear Gauge is simple. Following steps
explain how to create and configure its elements,

1. Add the SfGaugeUI.framework to your viewcontroller, by adding the framework under the Link
Binary with Libraries.
2. Import SFGauge.h in the viewcontroller header file (Say ViewController.h).
C
//Swift
import SFGaugeUI

Copyright 2001 - 2016 Syncfusion Inc.

236

SfLinearGauge

Getting Started

C
//Swift
var linearGauge

: SFLinearGauge

SFLinearGauge();

11.2.6.2 Add a Scale


Add a scale for the LinearGauge. The memory usage is displayed in percentage. Before adding the scale
to the LinearGauge, create your own values to the scale. Assign the scale to the LinearGauge as
illustrated in the following code example.
C
//Swift
var scale : SFLinearScale = SFLinearScale();
linearGauge.orientation=SFOrientationVertical;
scale.interval=20;
scale.maximum = 100.0;
scale.minimum=0;
scale.showRim=true;
scale.showScaleLabel=true;
scale.minorTicksPerInterval=1;
scale.scaleBarColor=UIColor(red:250/255, green:236/255,
blue:236/255,alpha:1.0);
scale.labelColor = UIColor(red:84/255, green:84/255, blue:84/255,alpha:1.0);
scale.labelOffset=0;
scale.labelPostfix = "%";

The above code illustrates the minimum and maximum value for the scale and assigning the size and
length of the scale. The interval denotes the gap between the Main ticks that is represented in the scale.
Likewise the MinorTicksPerInterval denotes the number of ticks that is to be present in between the
MajorTicks.
11.2.6.3 Add Ticks
There are two kinds of Ticks, majorticks and minorticks. Major ticks are the primary scale indicators and
minor ticks are the secondary scale indicators that fall between the major ticks. You can customize the
major ticks and minor ticks and can assign them to the scale by using the following code example.
C
//Swift
//Major Ticks
var smajor : SFLinearTickSettings = SFLinearTickSettings();
smajor.length=12;
smajor.color=UIColor(red:75/255, green:75/255, blue:75/255,alpha:1.0);
smajor.thickness=1;
scale.majorTickSettings=smajor;
//Minor Ticks
var sminor : SFLinearTickSettings = SFLinearTickSettings();
sminor.length=10;
sminor.color=UIColor(red:75/255, green:75/255, blue:75/255,alpha:1.0);
sminor.thickness=1;
scale.minorTickSettings=sminor;

Copyright 2001 - 2016 Syncfusion Inc.

237

SfLinearGauge

Getting Started

The above code example displays the majorticks and minor ticks for the scale that is assigned to the
Linear Gauge.
11.2.6.4 Add Pointers
Pointer is a key element of the linear scale that points a value or measure on that scale. A linear scale
can have one or more pointers that can be used to measure different values for different criteria. Each
pointer has a Value property that specifies the current value of the linear scale based upon its
measurement.
There are two types of Pointers, BarPointer and SymbolPointer. You can refer to the following code
example for adding the symbol pointers and bar pointer to the scale.
C
//Swift
//symbol pointer
var needle2 : SFSymbolPointer = SFSymbolPointer();
needle2.color=UIColor(red:65/255, green:77/255 , blue:79/255,alpha:1.0);
needle2.offset=0.2;
needle2.value=50;
needle2.lengthFactor=10;
needle2.thinkness=4;
//Bar Pointer
var needle1 : SFBarPointer = SFBarPointer();
needle1.color=UIColor(red:206/255, green:69/255, blue:69/255,alpha:1.0);
needle1.value=needle2.value;
needle1.thinkness=5;

Now, the pointers are displayed at the defined value in the scale with the respective color and width.
Next, add this pointer to a collection and assign it to the scale.
C
//Swift
scale.pointers.addObject(needle2);
scale.pointers.addObject(needle1);

11.2.6.5 Add Range


Scale can contain one or more ranges. A range displays the start and end values of the inner divisions
within the linear scales whole range. Each range can display different zones or regions of the same
metrics: like high, low and average temperature range.
C
//Swift
//Ranges
var range1 : SFLinearRange = SFLinearRange();
range1.startValue=0;
range1.endValue=100;
range1.Color=UIColor(red:234/255, green:248/255, blue:249/255,alpha:1.0);
range1.startWidth=10;
range1.endWidth=10;
range1.offset = -0.2;
var range2 : SFLinearRange = SFLinearRange();
range2.startValue=0;

Copyright 2001 - 2016 Syncfusion Inc.

238

SfLinearGauge

Getting Started

range2.endValue=60;
range2.Color=UIColor(red:50/255, green:184/255, blue:198/255,alpha:1.0);
range2.startWidth=10;
range2.endWidth=10;
range2.offset=CGFloat(-0.2);

The above code example adds multiple range to a scale. Next, add these ranges to a collection and
assign them to the scale. Refer to the following code example.
C
//Swift
scale.ranges.addObject(range1);
scale.ranges.addObject(range2);

Finally add this scale to Collection and assign it to the Linear Gauge using the following code example.
C
//Swift
linearGauge.scales.addObject(scale);

Now the scales are added successfully to the Linear Gauge. The following code is the complete code of
the Linear Gauge that you have created.
C
//Swift
import UIKit
import SFGaugeUI
var linearGauge
: SFLinearGauge
=
SFLinearGauge();
var needle2 : SFSymbolPointer = SFSymbolPointer();
class Linear: SampleView {
//
var _linearGauge
: SFLinearGauge
=
SFLinearGauge();
override func load(frame:CGRect){
linearGauge.frame
=
frame;
self.frame
=
frame;
self.control
=
linearGauge;
update();
}
override func dispose() {
//
_linearGauge
=
nil;
//
self.control
=
nil;
}
func update(){
var scale : SFLinearScale = SFLinearScale();
linearGauge.orientation=SFOrientationVertical;
scale.interval=20;
scale.maximum = 100.0;
scale.minimum=0;
scale.showRim=true;
scale.showScaleLabel=true;
scale.minorTicksPerInterval=1;
scale.scaleBarColor=UIColor(red:237/255, green:237/255,
blue:237/255,alpha:1.0);

Copyright 2001 - 2016 Syncfusion Inc.

239

SfLinearGauge

Getting Started

scale.labelColor = UIColor(red:84/255, green:84/255, blue:84/255,alpha:1.0);


scale.labelOffset=0;
needle2.color=UIColor(red:65/255, green:77/255 , blue:79/255,alpha:1.0);
needle2.offset=0.3;
needle2.value=50;
needle2.lengthFactor=10;
needle2.thinkness=4;
scale.pointers.addObject(needle2);
//Bar Pointer
var needle1 : SFBarPointer = SFBarPointer();
needle1.color=UIColor(red:206/255, green:69/255, blue:69/255,alpha:1.0);
needle1.value=needle2.value;
needle1.thinkness=5;
scale.pointers.addObject(needle1);
//Major Ticks
var smajor : SFLinearTickSettings = SFLinearTickSettings();
smajor.length=12;
smajor.color=UIColor(red:75/255, green:75/255, blue:75/255,alpha:1.0);
smajor.thickness=1;
scale.majorTickSettings=smajor;
//Minor Ticks
var sminor : SFLinearTickSettings = SFLinearTickSettings();
sminor.length=10;
sminor.color=UIColor(red:75/255, green:75/255, blue:75/255,alpha:1.0);
sminor.thickness=1;
scale.minorTickSettings=sminor;
//Ranges
var range1 : SFLinearRange = SFLinearRange();
range1.startValue=0;
range1.endValue=100;
range1.Color=UIColor(red:50/255, green:136/255, blue:198/255,alpha:1.0);
range1.startWidth=10;
range1.endWidth=10;
range1.offset = -0.3;
scale.ranges.addObject(range1);
var range2 : SFLinearRange = SFLinearRange();
range2.startValue=0;
range2.endValue=60;
range2.Color=UIColor(red:103/255, green:182/255, blue:219/255,alpha:1.0);
range2.startWidth=10;
range2.endWidth=10;
range2.offset=CGFloat(-0.3);
scale.ranges.addObject(range2);
linearGauge.scales.addObject(scale);
linearGauge.backgroundColor = UIColor.whiteColor();
}
}

Copyright 2001 - 2016 Syncfusion Inc.

240

SfLinearGauge

MainScale

Linear Gauge in iOS

11.3 MainScale
The MainScale is a linear scale that integrates ticks, labels and scale bar to specify the basic look and feel
of the Linear Gauge. It defines the overall minimum and maximum values, as well as the frequency of
labels and ticks through the interval of the scale. It can contain multiple ranges within a scale. It also
contains one or more pointers to point out the measures of the linear scale.

11.3.1 Customize MainScale


The range of the main scale can be mentioned by minimum and maximum of the linear scale. The width
and height of the linear scale are customized by using the scaleBarLength and scaleBarSize properties
respectively.
C

Copyright 2001 - 2016 Syncfusion Inc.

241

SfLinearGauge

Ticks

SFLinearScale *scale=[[SFLinearScale alloc] init];


scale.minimum =0;
scale.maximum =100;
scale.scaleBarSize =10;
scale.scaleBarLength =100;
[_gaugeView1.scales addObject:scale];

C
var scale : SFLinearScale = SFLinearScale();
scale.maximum = 100.0;
scale.minimum=0;
scale.scaleBarSize = 10;
scale.scaleBarLength = 100;
linearGauge.scales.addObject(scale);

Linear Gauge with Scale

11.4 Ticks
Ticks are of two types: major and minor. These ticks are arranged with respect to the specified
frequency, that is, the interval of the linear scale. The minor ticks are displayed by using
the minorTicksPerInterval property.

11.4.1 Customize Ticks


By using the TickSetting class you can personalize the color for major ticks and minor ticks by using the
color property. The thickness of the major ticks and minor ticks can be modified by using the
thickness property. Also the length of the major ticks and minor ticks can be modified by using the
length property.
C
SFLinearTickSettings *majorTicks=[[SFLinearTickSettings alloc] init];
majorTicks.length=12;
majorTicks.color=[UIColor grayColor];
majorTicks.thickness=2;
scale.majorTickSettings= majorTicks;
SFTickSettings *minorTicks=[[SFTickSettings alloc] init];
minorTicks.length=10;
minorTicks.color=[UIColor grayColor];
minorTicks.thickness=1;
scale.minorTickSettings= minorTicks;

Copyright 2001 - 2016 Syncfusion Inc.

242

SfLinearGauge

Labels

C
//Major Ticks
var smajor : SFLinearTickSettings
smajor.length=12;
smajor.color=UIColor(red:175/255,
smajor.thickness =2;
scale.majorTickSettings=smajor;
_//Minor Ticks_
var sminor : SFLinearTickSettings
sminor.length=10;
sminor.color=UIColor(red:175/255,
sminor.thickness =1;
scale.minorTickSettings=sminor;

= SFLinearTickSettings();
green:175/255, blue:175/255,alpha:1.0);

= SFLinearTickSettings();
green:175/255, blue:175/255,alpha:1.0);

11.5 Labels
Labels of the linear scale provide a numeric value to the major ticks that are specified according to the
range of the scale.

11.5.1 Customize Labels


The foreground of the label is customized by setting labelColor of the linear scale. You can personalize
the font size of the labels using the LabelFontSize property. The labels can be positioned far away from
the ticks by using the labelOffset property.
C
SFLinearScale *scale=[[SFLinearScale alloc] init];
scale.labelFontSize = 17;
scale.labelColor = =[UIColor redColor];
[_gaugeView1.scales addObject:scale];

C
var scale : SFLinearScale = SFLinearScale();
scale. labelFontSize =17;
scale. labelColor = UIColor(red:175/255, green:175/255,
blue:175/255,alpha:1.0);
linearGauge.scales.addObject(scale);

Linear Gauge with Labels

Copyright 2001 - 2016 Syncfusion Inc.

243

SfLinearGauge

Ranges

11.6 Ranges
Ranges of the linear scale are a collection of the linear range. A linear range is a visual element that
starts at a specified startValue and ends at a specified endValue within the linear scale. These start and
end values are mentioned with the help of SFLinearRange class.

11.6.1 Customize Range


The stroke of the range is personalized by changing color of the linear range. The appearance of linear
range is customized by setting the startWidth and endWidth properties. With the help of
the offset property, the linear range can be positioned with respect to the linear scale.
C
SFLinearRange *range1=[[SFLinearRange alloc] init];
range1.startValue=0;
range1.endValue=30;
range1.Color=[UIColor greenColor];
range1.startWidth =10;
range1.endWidth =10;
range1.offset=-0.4;
[scale.ranges addObject:range1];
SFLinearRange *range2=[[SFLinearRange alloc] init];
range2.startValue=30;
range2.endValue=60;
range2.Color=[UIColor yellowColor];
range2.startWidth =10;
range2.endWidth =10;
range2.offset=-0.4;
[scale.ranges addObject:range2];
SFLinearRange *range3=[[SFLinearRange alloc] init];
range3.startValue=60;
range3.endValue=100;
range3.Color=[UIColor yellowColor];
range3.startWidth =10;
range3.endWidth =10;
range3.offset=-0.4;
[scale.ranges addObject:range3];

C
_// adding first range_
var range1 : SFLinearRange = SFLinearRange();
range1.startValue=0;
range1.endValue=30;
range1.Color=UIColor(red:234/255, green:248/255, blue:249/255,alpha:1.0);
range1.startWidth=10;
range1.endWidth=10;
range1.offset = -0.4;
scale.ranges.addObject(range1);
_// adding second range_
var range2 : SFLinearRange = SFLinearRange();
range2.startValue=30;
range2.endValue=60;
range2.Color=UIColor(red:50/255, green:184/255, blue:198/255,alpha:1.0);
range2.startWidth=10;
range2.endWidth=10;
range2.offset=CGFloat(-0.2);

Copyright 2001 - 2016 Syncfusion Inc.

244

SfLinearGauge

Pointers

scale.ranges.addObject(range2);
_// adding third range_
var range3 : SFLinearRange = SFLinearRange();
range3.startValue=60;
range3.endValue=100;
range3.Color=UIColor(red:50/255, green:184/255, blue:198/255,alpha:1.0);
range3.startWidth=10;
range3.endWidth=10;
range3.offset=CGFloat(-0.2);
scale.ranges.addObject(range3);
linearGauge.scales.addObject(scale);

Linear Gauge with Multi-Ranges

11.7 Pointers
Multiple pointers are added to the Linear Gauge to point multiple values on the same linear scale. This is
useful for showing a low and a high value at the same time. Value of the pointer is set by the value
property. There are two types of pointers you can set it from. They are BarPointer and SymbolPointer.
Movement of the pointer can be animated by enabling the enableAnimation property.

11.7.1 Bar Pointer


Bar pointer is an accenting line or colored bar that is placed on the Linear Gauge to mark the values. Bar
pointers UI is customized by using the color and thickness properties.
C
SFBarPointer * barPointer=[[SFBarPointer alloc] init];
barPointer.color=[UIColor redColor];
barPointer.value=60;
[scale.pointers addObject:barPointer];

C
var barPointer: SFBarPointer = SFBarPointer();
barPointer.color=UIColor(red:206/255, green:69/255, blue:69/255,alpha:1.0);
barPointer.value=60;
scale.pointers.addObject(barPointer);

Copyright 2001 - 2016 Syncfusion Inc.

245

SfLinearGauge

Pointers

Linear Gauge with Bar Pointer

11.7.2 Symbol Pointer


In Symbol Pointer type, the value is pointed by a symbol on the scale. The Symbol Pointer class is
derived from Pointer class. You can modify the Symbol Pointers size by changing the thickness property.
The color of the Symbol Pointer is changed by using the color property in SymbolPointer class.
C
SFSymbolPointer * symbolPointer=[[SFSymbolPointer alloc] init];
symbolPointer.color=RGB(51,153,255);
symbolPointer.offset=0.5;
symbolPointer.value=50;
symbolPointer.lengthFactor=10;
[scale.pointers addObject:symbolPointer];

C
var symbolPointer: SFSymbolPointer = SFSymbolPointer();
symbolPointer.color=UIColor(red:65/255, green:77/255 ,
blue:79/255,alpha:1.0);
symbolPointer.offset=0.5;
symbolPointer.value=50;
symbolPointer.lengthFactor=10;
scale.pointers.addObject(symbolPointer);

Linear Gauge with Symbol Pointer

Copyright 2001 - 2016 Syncfusion Inc.

246

SfMaps

Overview

12 SfMaps
12.1 Overview
Essential Maps for iOS provides a graphical representation of geographical data. It is used to represent
the statistical data of a particular geographical area on Earth. Using pan and zoom, the maps can be
navigated. Maps supports enhanced data visualization with bubbles and labels using data bounded to
map.

12.1.1 Key Features


Layers - Maps are visualized through layers. It can accommodate one or more layers.
Map Elements Customization - Additional information on map can be visualized with
customized appearance using various set of elements, including shapes, bubbles, markers,
legend, labels and data items.
User Interaction - Options like zooming, panning and map selection enables the effective
interaction on map elements.

12.2 Getting Started


This section, you can learn how to configure a Maps control in a real-time scenario and also provides a
walk-through on some of the customization features available in Maps control.

12.2.1 Create your first Maps in Objective C


Control reference can be added to the application through frameworks, to know more about adding and
configuring the framework, refer this link.
12.2.1.1 Initializing Maps
Adding reference to Maps
OBJECTIVE-C
#import <SFMaps/SFMaps.h>

Create a Maps instance in Main Activity and set Maps as


a ContentView in onCreate() overridden method.
OBJECTIVE-C
- (void)viewOnCreate
{
[super viewOnCreate]
SFMaps * maps = [[SFMaps alloc]initWithFrame:self.view.frame];
[self.view addSubview:maps];
}

12.2.1.2 Loading Shapes to Maps


The Maps control supports reading and loading shape files. A shape file is a set of files which are stored
in a non-topological geometry and the attribute information for the spatial features and records in a
data set.

Copyright 2001 - 2016 Syncfusion Inc.

247

SfMaps

Getting Started

A shape file can be a set of files or a single file. Generally, the shape file contains the following files:
Main file (.shp)
dBASE file (.dbf)
These files need to be added in Asset folder.
OBJECTIVE-C
- (void)viewOnCreate
{
[super viewOnCreate]
SFMaps * maps = [[SFMaps alloc]initWithFrame:self.view.frame];
NSString * shapePath = [[NSBundle mainBundle] pathForResource:@"usa_state"
ofType:@"shp"];
SFShapeFileLayer * layer = [[SFShapeFileLayer alloc]init];
layer.uri = shapePath;
[maps.layers]
[self.view addSubview:maps];
}

Copyright 2001 - 2016 Syncfusion Inc.

248

SfMaps

Getting Started

12.2.1.3 Adding Marker to the Maps


Markers can be added into the shape layers. The below code snippets enables you to do so.
OBJECTIVE-C
[super viewOnCreate]
SFMaps * maps = [[SFMaps alloc]initWithFrame:self.view.frame];
NSString * shapePath = [[NSBundle mainBundle] pathForResource:@"usa_state"
ofType:@"shp"];
SFShapeFileLayer * layer = [[SFShapeFileLayer alloc]init];
SFMapMarker * marker = [[SFMapMarker alloc]initWithFrame:self.view.frame];
marker.label = "California";
marker.latitude = 37;
marker.longitude = -120;
layer.uri = shapePath;
[layer.SFMapMarker addObject:marker];
[self.view addSubview:maps];

Copyright 2001 - 2016 Syncfusion Inc.

249

SfMaps

Getting Started

12.2.2 Create your first Maps in Swift


12.2.2.1 Add and Configure the Maps
The following steps explain how you can create a Maps and configure its elements.
Adding reference to Maps
SWIFT
import SFMapsUI

Create a Maps instance in Main Activity and set Maps as


a ContentView in viewOnCreate() overridden method.
SWIFT
protected override func viewOnCreate(Bundle savedInstanceState)
{
super.viewOnCreate (savedInstanceState);

Copyright 2001 - 2016 Syncfusion Inc.

250

SfMaps

Getting Started

let maps : SfMaps = SfMaps();


self.view.addSubview(maps)
}

12.2.2.2 Loading Shapes to Maps


The Maps control supports reading and loading shape files. A shape file is a set of files which are stored
in a non-topological geometry and the attribute information for the spatial features and records in a
data set.
A shape file can be a set of files or a single file. Generally, the shape file contains the following files:
Main file (.shp)
dBASE file (.dbf)
These files need to be added in Asset folder.
SWIFT
protected override func viewOnCreate(Bundle savedInstanceState)
{
super.viewOnCreate (savedInstanceState);
let maps : SfMaps = SfMaps(this);
let layer : ShapeFileLayer = ShapeFileLayer(this);
layer.uri = "usa_state.shp";
maps.Layers.addObject(layer);
self.view.addSubview(maps)
}

Copyright 2001 - 2016 Syncfusion Inc.

251

SfMaps

Getting Started

12.2.2.3 Adding Marker to the Maps


Markers can be added into the shape layers. The below code snippets enables you to do so.
SWIFT
protected override func viewOnCreate(Bundle savedInstanceState)
{
super.viewOnCreate (savedInstanceState);
let maps : SfMaps = SfMaps(this);
let layer : ShapeFileLayer = ShapeFileLayer(this);
let marker : SFMapMarker = SFMapMarker(this);
marker.label = "California";
marker.latitude = 37;
marker.longitude = -120;
layer.uri = "usa_state.shp";
maps.Markers.addObject(marker);
maps.Layers.addObject(layer);
self.view.addSubview(maps)
}

Copyright 2001 - 2016 Syncfusion Inc.

252

SfMaps

Getting Started

12.2.3 Create your first Maps in Xamarin.iOS


12.2.3.1 Reference Essential Studio Components in your Solution
After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation
folders, typically:
{Syncfusion Installed location}\Essential Studio\{version number}\lib
Note: You can find assemblies in unzipped package location in Mac.
You have to add the following assembly references to the Xamarin.iOS project.
[iOS\Syncfusion.SfMaps.iOS.dll]
12.2.3.2 Initialize the Maps
Create a Maps object in the UIViewController and add Maps as SubView in ViewOnCreate override
method.
You can create a Maps object by using the following code example.
C#
public override void ViewOnCreate ()

Copyright 2001 - 2016 Syncfusion Inc.

253

SfMaps

Getting Started

{
base.ViewOnCreate ();
SFMap maps = new SFMap ();
View.AddSubview (maps);
}

12.2.3.3 Loading Shapes to Maps


The Maps control supports reading and loading shape files. A shape file is a set of files which are stored
in a non-topological geometry and the attribute information for the spatial features and records in a
data set.
A shape file can be a set of files or a single file. Generally, the shape file contains the following files:
Main file (.shp)
dBASE file (.dbf)
C#
public override void ViewOnCreate ()
{
base.ViewOnCreate ();
SFMap maps = new SFMap ();
SFShapeFileLayer layer = new SFShapeFileLayer ();
layer.Uri = (NSString)NSBundle.MainBundle.PathForResource ("usa_state",
"shp");
maps.Layers.Add (layer);
View.AddSubview (maps);
}

Copyright 2001 - 2016 Syncfusion Inc.

254

SfMaps

Getting Started

12.2.3.4 Adding Marker to the Maps


Markers can be added into the shape layers. The below code snippets enables you to do so.
C#
public override void ViewOnCreate ()
{
base.ViewOnCreate ();
SFMap maps = new SFMap ();
SFShapeFileLayer layer = new SFShapeFileLayer ();
SFMapMarker marker = new SFMapMarker ();
layer.Uri = (NSString)NSBundle.MainBundle.PathForResource ("usa_state",
"shp");
marker.label = "California";
marker.latitude = 37;
marker.longitude = -120;
maps.Markers.Add (marker);
maps.Layers.Add (layer);
View.AddSubview (maps);
}

Copyright 2001 - 2016 Syncfusion Inc.

255

SfMaps

Populate Data

12.3 Populate Data


In this section you can learn how to populate shape data for providing Data input to Map control and
usage of DataSource property.

12.3.1 Data Binding


The Maps control supports data binding with the dataSource property in the shape layers.
The following properties in shape layers is be used for binding datas in Maps control,
DataSource
ShapeIdPath
ShapeIdTableField
12.3.1.1 Data Source
The DataSource property accepts the collection values as input. For example, you can provide the list of
objects as input.

Copyright 2001 - 2016 Syncfusion Inc.

256

SfMaps

Populate Data

12.3.1.2 ShapeIdPath
The ShapeIdPath property is used to refer the data ID in DataSource. For example, population MapData
contains data ids Name and Population. The ShapeIdPath and the ShapeIdTableField properties are
related to each other (refer to ShapeIdTableField for more details).
12.3.1.3 ShapeIdTableField
The ShapeIdTableField property is similar to the ShapeIdPath that refers to the column name in the
data property of shape layers to identify the shape. When the values of the ShapeIdPath property in the
dataSource property and the value of ShapeIdTableField in the data property match, then the associated
object from the dataSource is bound to the corresponding shape.
Refer the following USA Election data as datasource is used for better understanding.
OBJECTIVE-C
{
//..
layer.shapeIdTableField ="STATE_NAME";
layer.shapeIdPath ="State";
layer.dataSource = GetDataSource ();
//..
}
JSONArray GetDataSource()
{
let array : JSONArray = JSONArray();
array.Put(getJsonObject("Alabama","Romney","9" ));
array.Put(getJsonObject("Alaska","Romney","3" ));
array.Put(getJsonObject("Arizona","Romney","11" ));
array.Put(getJsonObject("Arkansas","Romney","6" ));
array.Put(getJsonObject("California","Obama","55" ));
array.Put(getJsonObject("Colorado","Obama","9" ));
array.Put(getJsonObject("Connecticut","Obama","7" ));
array.Put(getJsonObject("Delaware","Obama","3" ));
array.Put(getJsonObject("District of Columbia","Obama","3" ));
array.Put(getJsonObject("Florida","Obama","29" ));
array.Put(getJsonObject("Georgia","Romney","16" ));
array.Put(getJsonObject("Hawaii","Obama","4" ));
array.Put(getJsonObject("Idaho","Romney","4" ));
array.Put(getJsonObject("Illinois","Obama","20" ));
array.Put(getJsonObject("Indiana","Romney","11" ));
array.Put(getJsonObject("Iowa","Obama","6" ));
array.Put(getJsonObject("Kansas","Romney","6" ));
array.Put(getJsonObject("Kentucky","Romney","8" ));
array.Put(getJsonObject("Louisiana","Romney","8" ));
array.Put(getJsonObject("Maine","Obama","4" ));
array.Put(getJsonObject("Maryland","Obama","10" ));
array.Put(getJsonObject("Massachusetts","Obama","11" ));
array.Put(getJsonObject("Michigan","Obama","16" ));
array.Put(getJsonObject("Minnesota","Obama","10" ));
array.Put(getJsonObject("Mississippi","Romney","6" ));
array.Put(getJsonObject("Missouri","Romney","10" ));
array.Put(getJsonObject("Montana","Romney","3" ));
array.Put(getJsonObject("Nebraska","Romney","5" ));
array.Put(getJsonObject("Nevada","Obama","6" ));
array.Put(getJsonObject("New Hampshire","Obama","4" ));
array.Put(getJsonObject("New Jersey","Obama","14" ));

Copyright 2001 - 2016 Syncfusion Inc.

257

SfMaps

Populate Data

array.Put(getJsonObject("New Mexico","Obama","5" ));


array.Put(getJsonObject("New York","Obama","29" ));
array.Put(getJsonObject("North Carolina","Romney","15" ));
array.Put(getJsonObject("North Dakota","Romney","3" ));
array.Put(getJsonObject("Ohio","Obama","18" ));
array.Put(getJsonObject("Oklahoma","Romney","7" ));
array.Put(getJsonObject("Oregon","Obama","7" ));
array.Put(getJsonObject("Pennsylvania","Obama","20" ));
array.Put(getJsonObject("Rhode Island","Obama","4" ));
array.Put(getJsonObject("South Carolina","Romney","9" ));
array.Put(getJsonObject("South Dakota","Romney","3" ));
array.Put(getJsonObject("Tennessee","Romney","11" ));
array.Put(getJsonObject("Texas","Romney","38" ));
array.Put(getJsonObject("Utah","Romney","6" ));
array.Put(getJsonObject("Vermont","Obama","3" ));
array.Put(getJsonObject("Virginia","Obama","13" ));
array.Put(getJsonObject("Washington","Obama","12" ));
array.Put(getJsonObject("West Virginia","Romney","5" ));
array.Put(getJsonObject("Wisconsin","Obama","10" ));
array.Put(getJsonObject("Wyoming","Romney","3" ));
return array;
}
JSONObject getJsonObject(String state,String candidate,double electors)
{
JSONObject obj= new JSONObject();
obj.Put ("State", state);
obj.Put ("Candidate", candidate);
obj.Put ("Electors", candidate);
return obj;
}

SWIFT
NSMutableArray GetDataSource()
{
let array : NSMutableArray = NSMutableArray();
array.Add(JsonObject("Alabama" , "Vegetables" , 42));
array.Add(JsonObject( "Alaska" , "Vegetables" , 0 ));
array.Add(JsonObject( "Arizona" , "Rice" , 36 ));
array.Add(JsonObject( "Arkansas" , "Vegetables" , 46 ));
array.Add(JsonObject( "California" , "Rice" , 24 ));
array.Add(JsonObject( "Colorado" , "Rice" , 31));
array.Add(JsonObject( "Connecticut" , "Grains" , 18 ));
array.Add(JsonObject( "Delaware" , "Grains" , 28 ));
array.Add(JsonObject( "District of Columbia" , "Grains" , 27 ));
array.Add(JsonObject( "Florida" , "Rice" , 48 ));
array.Add(JsonObject( "Georgia" , "Rice" , 44));
array.Add(JsonObject( "Hawaii" , "Grains" , 49 ));
array.Add(JsonObject( "Idaho" , "Grains" , 8 ));
array.Add(JsonObject( "Illinois" , "Vegetables" , 26 ));
array.Add(JsonObject( "Indiana" , "Grains" , 21 ));
array.Add(JsonObject( "Iowa" , "Vegetables" , 13 ));
array.Add(JsonObject( "Kansas" , "Rice" , 33 ));
array.Add(JsonObject( "Kentucky" , "Grains" , 32 ));
array.Add(JsonObject( "Louisiana" , "Rice" , 47 ));
array.Add(JsonObject( "Maine" , "Grains" , 3 ));

Copyright 2001 - 2016 Syncfusion Inc.

258

SfMaps

Populate Data

array.Add(JsonObject( "Maryland" , "Grains" , 30 ));


array.Add(JsonObject( "Massachusetts" , "Grains" , 14 ));
array.Add(JsonObject( "Michigan" , "Grains" , 50 ));
array.Add(JsonObject( "Minnesota" , "Wheat" , 10 ));
array.Add(JsonObject( "Mississippi" , "Vegetables" , 43 ));
array.Add(JsonObject( "Missouri" , "Vegetables" , 35 ));
array.Add(JsonObject( "Montana" , "Grains" , 2 ));
array.Add(JsonObject( "Nebraska" , "Rice" , 15 ));
array.Add(JsonObject( "Nevada" , "Wheat" , 22 ));
array.Add(JsonObject( "New Hampshire" , "Grains" , 12 ));
array.Add(JsonObject( "New Jersey" , "Vegetables" , 20 ));
array.Add(JsonObject( "New Mexico" , "Rice" , 41 ));
array.Add(JsonObject( "New York" , "Vegetables" , 16 ));
array.Add(JsonObject( "North Carolina" , "Rice" , 38 ));
array.Add(JsonObject( "North Dakota" , "Grains" , 4 ));
array.Add(JsonObject( "Ohio" , "Vegetables" , 25 ));
array.Add(JsonObject( "Oklahoma" , "Rice" , 37 ));
array.Add(JsonObject( "Oregon" , "Wheat" , 11 ));
array.Add(JsonObject( "Pennsylvania" , "Vegetables" , 17 ));
array.Add(JsonObject( "Rhode Island" , "Grains" , 19 ));
array.Add(JsonObject( "South Carolina" , "Rice" , 45 ));
array.Add(JsonObject( "South Dakota" , "Grains" , 5 ));
array.Add(JsonObject( "Tennessee" , "Vegetables" , 39 ));
array.Add(JsonObject( "Texas" , "Vegetables" , 40 ));
array.Add(JsonObject( "Utah" , "Rice" , 23 ));
array.Add(JsonObject( "Vermont" , "Grains" , 9 ));
array.Add(JsonObject( "Virginia" , "Rice" , 34 ));
array.Add(JsonObject( "Washington" , "Vegetables" , 1 ));
array.Add(JsonObject( "West Virginia" , "Grains" , 29 ));
array.Add(JsonObject( "Wisconsin" , "Grains" , 7 ));
array.Add(JsonObject( "Wyoming" , "Wheat" , 6 ));
return array;
}
NSDictionary getDictionary(string state,string candidate,int index)
{
object[] objects= new object[3];
object[] keys=new object[3];
keys.SetValue ("State", 0);
keys.SetValue ("index", 1);
keys.SetValue ("Candidate", 2);
objects.SetValue ((NSString)state, 0);
objects.SetValue (index, 1);
objects.SetValue (candidate, 2);
return NSDictionary.FromObjectsAndKeys (objects, keys);
}

C#
NSMutableArray GetDataSource()
{
NSMutableArray array = new NSMutableArray ();
array.Add(getDictionary("Alabama" , "Vegetables" , 42));
array.Add(getDictionary( "Alaska" , "Vegetables" , 0 ));
array.Add(getDictionary( "Arizona" , "Rice" , 36 ));
array.Add(getDictionary( "Arkansas" , "Vegetables" , 46 ));
array.Add(getDictionary( "California" , "Rice" , 24 ));

Copyright 2001 - 2016 Syncfusion Inc.

259

SfMaps

Populate Data

array.Add(getDictionary( "Colorado" , "Rice" , 31));


array.Add(getDictionary( "Connecticut" , "Grains" , 18 ));
array.Add(getDictionary( "Delaware" , "Grains" , 28 ));
array.Add(getDictionary( "District of Columbia" , "Grains" , 27 ));
array.Add(getDictionary( "Florida" , "Rice" , 48 ));
array.Add(getDictionary( "Georgia" , "Rice" , 44));
array.Add(getDictionary( "Hawaii" , "Grains" , 49 ));
array.Add(getDictionary( "Idaho" , "Grains" , 8 ));
array.Add(getDictionary( "Illinois" , "Vegetables" , 26 ));
array.Add(getDictionary( "Indiana" , "Grains" , 21 ));
array.Add(getDictionary( "Iowa" , "Vegetables" , 13 ));
array.Add(getDictionary( "Kansas" , "Rice" , 33 ));
array.Add(getDictionary( "Kentucky" , "Grains" , 32 ));
array.Add(getDictionary( "Louisiana" , "Rice" , 47 ));
array.Add(getDictionary( "Maine" , "Grains" , 3 ));
array.Add(getDictionary( "Maryland" , "Grains" , 30 ));
array.Add(getDictionary( "Massachusetts" , "Grains" , 14 ));
array.Add(getDictionary( "Michigan" , "Grains" , 50 ));
array.Add(getDictionary( "Minnesota" , "Wheat" , 10 ));
array.Add(getDictionary( "Mississippi" , "Vegetables" , 43 ));
array.Add(getDictionary( "Missouri" , "Vegetables" , 35 ));
array.Add(getDictionary( "Montana" , "Grains" , 2 ));
array.Add(getDictionary( "Nebraska" , "Rice" , 15 ));
array.Add(getDictionary( "Nevada" , "Wheat" , 22 ));
array.Add(getDictionary( "New Hampshire" , "Grains" , 12 ));
array.Add(getDictionary( "New Jersey" , "Vegetables" , 20 ));
array.Add(getDictionary( "New Mexico" , "Rice" , 41 ));
array.Add(getDictionary( "New York" , "Vegetables" , 16 ));
array.Add(getDictionary( "North Carolina" , "Rice" , 38 ));
array.Add(getDictionary( "North Dakota" , "Grains" , 4 ));
array.Add(getDictionary( "Ohio" , "Vegetables" , 25 ));
array.Add(getDictionary( "Oklahoma" , "Rice" , 37 ));
array.Add(getDictionary( "Oregon" , "Wheat" , 11 ));
array.Add(getDictionary( "Pennsylvania" , "Vegetables" , 17 ));
array.Add(getDictionary( "Rhode Island" , "Grains" , 19 ));
array.Add(getDictionary( "South Carolina" , "Rice" , 45 ));
array.Add(getDictionary( "South Dakota" , "Grains" , 5 ));
array.Add(getDictionary( "Tennessee" , "Vegetables" , 39 ));
array.Add(getDictionary( "Texas" , "Vegetables" , 40 ));
array.Add(getDictionary( "Utah" , "Rice" , 23 ));
array.Add(getDictionary( "Vermont" , "Grains" , 9 ));
array.Add(getDictionary( "Virginia" , "Rice" , 34 ));
array.Add(getDictionary( "Washington" , "Vegetables" , 1 ));
array.Add(getDictionary( "West Virginia" , "Grains" , 29 ));
array.Add(getDictionary( "Wisconsin" , "Grains" , 7 ));
array.Add(getDictionary( "Wyoming" , "Wheat" , 6 ));
return array;
}
NSDictionary getDictionary(string state,string candidate,int index)
{
object[] objects= new object[3];
object[] keys=new object[3];
keys.SetValue ("State", 0);
keys.SetValue ("index", 1);
keys.SetValue ("Candidate", 2);
objects.SetValue ((NSString)state, 0);
objects.SetValue (index, 1);

Copyright 2001 - 2016 Syncfusion Inc.

260

SfMaps

Customization

objects.SetValue (candidate, 2);


return NSDictionary.FromObjectsAndKeys (objects, keys);
}

12.4 Customization
Maps control supports color customization to determine the exact combination of colors for shapes
displayed in Maps and tooltip support to display additional information of shape data.

12.4.1 Shape Settings


The shapeSettings defines the basic customization settings of shapes in the map.

ShapeFill - It is used to set the fill color of the shapes in the map.
ShapeStroke - It is used to set the border color of the shape in the map.
ShapeStrokeThickness - It is used to set the border thickness of the shape in the map.
SelectedShapeColor - It is used to set the selection color for shapes in the map.
OBJECTIVE-C
SFShapeSetting * setting = [[SFShapeSetting
alloc]initWithFrame:self.view.frame];
setting.shapeFill = Color.ParseColor("#9CBF4E");
setting.selectedShapeColor = Color.ParseColor("#BC5353");
setting.shapeStroke = Color.White;
setting.shapeStrokeThickess = 1;
[layer.SFShapeSetting addObject:setting];
[self.view addSubview:map]

SWIFT
let setting : SFShapeSetting = SFShapeSetting();
setting.fill = UIColor.FromRGB (0x9C, 0xBF, 0x4E);
setting.selectedShapeColor = UIColor.FromRGB (0xBC, 0x53, 0x53);
setting.strokeColor = UIColor.White;
setting.strokeThickness = 0.5f;
layer.ShapeSettings.addObject(setting);

C#
SFShapeSetting setting = new SFShapeSetting ();
setting.Fill = UIColor.FromRGB (0x9C, 0xBF, 0x4E);
setting.SelectedShapeColor = UIColor.FromRGB (0xBC, 0x53, 0x53);
setting.StrokeColor = UIColor.White;
setting.StrokeThickness = 0.5f;
layer.ShapeSettings = setting;

Copyright 2001 - 2016 Syncfusion Inc.

261

SfMaps

Customization

12.4.2 Color Mapping


The Color Mapping support enables the customization of shape colors based on the underlying value of
shape received from bounded data.

ColorValuePath - It renders the field value that is to be fetched from data for each shape used
for determining the shape color.
ValuePath - It renders the field value that is to be fetched from data for each shape. This
support also provides a tree map-like impact on the map UI. The various types of Color Mapping
supported in maps are listed as follows.
12.4.2.1 Equal Color Mapping
The EqualColorMapping is used to differentiate the shapes fill based on its underlying value and color.
The properties of equalColorMapping is listed in the following table.
Property
Value

Type
String

Description
Gets or sets the value.

Copyright 2001 - 2016 Syncfusion Inc.

262

SfMaps
Color

Customization
String

Gets or sets the color for mapping.

OBJECTIVE-C
{
//..
layer.shapeIdTableField ="STATE_NAME";
layer.shapeIdPath ="State";
layer.dataSource = GetDataSource ();
SetColorMapping(layer.shapeSettings);
layer.shapeSettings.shapeColorValuePath ="Candidate";
//..
}
void viewSetColorMapping(ShapeSetting setting)
{
List<ColorMapping> colorMappings= new List<ColorMapping>();
SFEqualColorMapping * colorMapping1 = [[SFEqualColorMapping
alloc]initWithFrame:self.view.frame];
colorMapping1.value= "Obama";
colorMapping1.legendLabel= "Obama";
colorMapping1.color =Color.ParseColor("#316DB5");
[colorMappings addObject:colorMapping1];
SFEqualColorMapping * colorMapping2 = [[SFEqualColorMapping
alloc]initWithFrame:self.view.frame];;
colorMapping2.value= "Romney";
colorMapping2.legendLabel= "Romney";
colorMapping2.color =Color.ParseColor("#D84444");
[colorMappings addObject:colorMapping2];
[setting.ColorMapping addObject:colorMappings];
[self.view addSubview:map]
}

SWIFT
{
//..
SetColorMapping(layer.ShapeSettings);
layer.ShapeSettings.ColorValuePath =(NSString)"Candidate";
//..
}
protected override func viewSetColorMapping(SFShapeSetting setting)
{
let colorMappings : NSMutableArray = NSMutableArray();
let colorMapping1 : SFEqualColorMapping = SFEqualColorMapping();
colorMapping1.value= (NSString)"Obama";
colorMapping1.legendLabel= (NSString)"Obama";
colorMapping1.color = UIColor.FromRGB (0x31, 0x6D, 0xB5);
colorMappings.addObject(colorMapping1);
let colorMapping2 : SFEqualColorMapping = SFEqualColorMapping();
colorMapping2.value=(NSString) "Romney";
colorMapping2.legendLabel= (NSString)"Romney";
colorMapping2.color = UIColor.FromRGB (0xD8, 0x44, 0x44);
colorMappings.addObject(colorMapping2);
setting.ColorMappings = colorMappings;

Copyright 2001 - 2016 Syncfusion Inc.

263

SfMaps

Customization

self.view.addSubview(maps)
}

C#
{
//..
SetColorMapping(layer.ShapeSettings);
layer.ShapeSettings.ColorValuePath =(NSString)"Candidate";
//..
}
void SetColorMapping(SFShapeSetting setting)
{
NSMutableArray colorMappings = new NSMutableArray ();
SFEqualColorMapping colorMapping1= new SFEqualColorMapping();
colorMapping1.Value= (NSString)"Obama";
colorMapping1.LegendLabel= (NSString)"Obama";
colorMapping1.Color = UIColor.FromRGB (0x31, 0x6D, 0xB5);
colorMappings.Add(colorMapping1);
SFEqualColorMapping colorMapping2= new SFEqualColorMapping();
colorMapping2.Value=(NSString) "Romney";
colorMapping2.LegendLabel= (NSString)"Romney";
colorMapping2.Color = UIColor.FromRGB (0xD8, 0x44, 0x44);
colorMappings.Add(colorMapping2);
setting.ColorMappings = colorMappings;
}

Copyright 2001 - 2016 Syncfusion Inc.

264

SfMaps

Customization

12.4.2.2 Color Palette


When AutoFillColors property is set to true, shapes are filled with default colors from built-in palettes
or custom palette.
OBJECTIVE-C
layer.shapeSettings.autoFillColors = true;

SWIFT
layer.shapeSettings.autoFillColors = true;

C#
layer.ShapeSettings.AutoFillColors = true;

Copyright 2001 - 2016 Syncfusion Inc.

265

SfMaps

Map Elements

12.5 Map Elements


Map control contains a set of map elements such as shapes, bubbles, markers, legend, labels and data
items that can be visualized with the customized appearance showing additional information on the
map by using the databound datas.

12.5.1 Markers
Markers are notes used to leave some message on the map.
There are two ways to set marker for map.

1. Adding marker objects to map


2. Custom Marker
12.5.1.1 Adding Marker objects to the map
Without datasource, n number of markers can be added to shape layers with markers property. Each
marker object contains the following list of properties.

label - Text that displays some information about the annotation in text format.

Copyright 2001 - 2016 Syncfusion Inc.

266

SfMaps

Map Elements

latitude - Latitude point determine the Y-axis position of marker.


longitude - Longitude point determine the X-axis position of marker.
OBJECTIVE-C
SFMapMarker * marker = [[SFMapMarker alloc]initWithFrame:self.view.frame];
marker.label = "California";
marker.latitude = 37;
marker.longitude = -120;
[layer.SFMapMarker addObject:marker];
[self.view addSubview:maps];

SWIFT
let marker : SFMapMarker = SFMapMarker();
marker.latitude = 37;
marker.longitude = -120;
marker.label = @"California";
layer.Markers.addObject(marker);

C#
MapMarker marker = new MapMarker ();
marker.Label = "California";
marker.Latitude = 37;
marker.Longitude = -120;
layer.Markers.Add (marker);

Copyright 2001 - 2016 Syncfusion Inc.

267

SfMaps

Map Elements

12.5.1.2 Custom Marker


By default, it displays the label data at the specified latitude and longitude. You can also customize the
UI of the marker. DrawMarker is a overide method which is used to customize the UI of markers.
OBJECTIVE-C
public class CustomMarker : MapMarker
{
public CustomMarker (Android.Content.Context con)
{
context = con;
}
Android.Content.Context context;
public override void DrawMarker (PointF p0, Canvas p1)
{
Bitmap bitmap = BitmapFactory.DecodeResource (context.Resources,
Resource.Drawable.pin);
p1.DrawBitmap(bitmap,(float)p0.X-12,(float)p0.Y-35,new Paint());
}
}
//..

Copyright 2001 - 2016 Syncfusion Inc.

268

SfMaps

Map Elements

SFCustomMarker * california = [[SFCustomMarker


alloc]initWithFrame:self.view.frame];
california.latitude = 37;
california.longitude = -120;
[layer.SFMarkers addObject:california];
SFCustomMarker * newYork = [[SFCustomMarker
alloc]initWithFrame:self.view.frame];
newYork.latitude = 40.7127;
newYork.longitude = -74.0059;
[layer.SFMarkers addObject:newYork];
SFCustomMarker * iowa = [[SFCustomMarker
alloc]initWithFrame:self.view.frame];
iowa.latitude= 42;
iowa.longitude= -93;
[layer.SFMarkers addObject:iowa]
//..

SWIFT
public class CustomMarker : SFMapMarker
{
public override func GetView (CGPoint point)
{
let image : CustomMarker = UIImageView (new CGRect (point.X - 8, point.Y 25, 15, 23));
image.image = new UIImage ("pin.png");
return image;
}
}
//..
let california : CustomMarker = CustomMarker();
california.latitude = 37;
california.longitude = -120;
layer.Markers.addObject(california);
let newYork : CustomMarker = CustomMarker();
newYork.latitude = 40.7127;
newYork.longitude = -74.0059;
layer.Markers.addObject(newYork);
let iowa : CustomMarker = CustomMarker();
iowa.latitude= 42;
iowa.longitude= -93;
layer.Markers.addObject(iowa);
//..

C#
public class CustomMarker : MapMarker
{
public CustomMarker (Android.Content.Context con)
{
context = con;
}
Android.Content.Context context;
public override void DrawMarker (PointF p0, Canvas p1)
{

Copyright 2001 - 2016 Syncfusion Inc.

269

SfMaps

Map Elements

Bitmap bitmap = BitmapFactory.DecodeResource (context.Resources,


Resource.Drawable.pin);
p1.DrawBitmap(bitmap,(float)p0.X-12,(float)p0.Y-35,new Paint());
}
}
//..
CustomMarker california = new CustomMarker ();
california.Latitude = 37;
california.Longitude = -120;
layer.Markers.Add(california);
CustomMarker newYork=new CustomMarker ();
newYork.Latitude = 40.7127;
newYork.Longitude = -74.0059;
layer.Markers.Add(newYork);
CustomMarker iowa=new CustomMarker ();
iowa.Latitude= 42;
iowa.Longitude= -93;
layer.Markers.Add(iowa);
//..

Copyright 2001 - 2016 Syncfusion Inc.

270

SfMaps

Map Elements

12.5.2 Bubbles
Bubbles in the Maps control represent the underlying data values of the map. Bubbles are scattered
throughout the map shapes that contain bound values.
Bubbles are included when data binding and the BubbleMarkerSettings is set to the shape layers.
Property

Type

Description

MaxSize

String Get or sets the maximum height and width of the bubble.

MinSize

String Gets or sets the minimum height and width of the bubble.

ColorValuePath String

Get or sets the field value that is to be fetched from data for each bubble used
for determining the bubble color.

ValuePath

String Gets or sets the field value that is to be fetched from data for each bubble.

Color

String Gets or sets the fill color for bubbles.

12.5.2.1 Add Bubbles to the Map


To add bubbles to a map, the bubble marker setting is added to the shape file layer. Create the Model
and ViewModel as illustrated in the Data Binding topic and add the following code. Also set the
MaxSize, MinSize, and ValuePath properties as illustrated in the following code sample.
OBJECTIVE-C
{
//..
layer.shapeIdTableField ="STATE_NAME";
layer.shapeIdPath ="State";
layer.sataSource = GetDataSource ();
SFBubbleMarkerSetting * markerSetting = [[SFBubbleMarkerSetting
alloc]initWithFrame:self.view.frame];
markerSetting.showBubbles = true;
markerSetting.minSize =10;
markerSetting.maxSize =25;
markerSettingvaluePath="Population";
//..
}
JSONArray GetDataSource()
{
SFJSONArray * array = [[SFJSONArray alloc]initWithFrame:self.view.frame];
array.Put(getJsonObject("California",38332521,"CA"));
array.Put(getJsonObject("New York",19651127,"NY"));
array.Put(getJsonObject("Iowa",3090416,"IA"));
return array;
}
JSONObject getJsonObject(String state,double population,string name)
{
JSONObject obj= new JSONObject();
obj.Put ("State", state);
obj.Put ("Population", population);
obj.Put ("Name", name);
return obj;
}

Copyright 2001 - 2016 Syncfusion Inc.

271

SfMaps

Map Elements

SWIFT
{
//..
layer.dataSource = GetDataSource ();
let markerSetting : SFBubbleMarkerSetting = SFBubbleMarkerSetting();
markerSetting.showBubbles = true;
markerSetting.minSize =10;
markerSetting.maxSize =25;
markerSetting.valuePath=(NSString)"Population";
//..
}
NSMutableArray GetDataSource()
{
let array : NSMutableArray = NSMutableArray();
return array;
}
NSDictionary getDictionary(string state,double population,int index)
{
let objects : object[] = object[3];
let keys : object[] = object[3];
keys.setValue ("State", 0);
keys.setValue ("index", 1);
keys.setValue ("Population", 2);
objects.setValue ((NSString)state, 0);
objects.setValue (index, 1);
objects.setValue (population, 2);
return NSDictionary.FromObjectsAndKeys (objects, keys);
}

C#
{
//..
layer.ShapeIdTableField ="STATE_NAME";
layer.ShapeIdPath ="State";
layer.DataSource = GetDataSource ();
BubbleMarkerSetting markerSetting = new BubbleMarkerSetting();
markerSetting.ShowBubbles = true;
markerSetting.MinSize =10;
markerSetting.MaxSize =25;
markerSetting.ValuePath="Population";
//..
}
JSONArray GetDataSource()
{
JSONArray array = new JSONArray ();
array.Put(getJsonObject("California",38332521,"CA"));
array.Put(getJsonObject("New York",19651127,"NY"));
array.Put(getJsonObject("Iowa",3090416,"IA"));
return array;
}
JSONObject getJsonObject(String state,double population,string name)
{
JSONObject obj= new JSONObject();

Copyright 2001 - 2016 Syncfusion Inc.

272

SfMaps

Map Elements

obj.Put ("State", state);


obj.Put ("Population", population);
obj.Put ("Name", name);
return obj;
}

12.5.3 Legend
A legend is a key used on a map that contains swatches of symbols with descriptions. It provides
valuable information for interpreting what the map is displaying and can be represented in various
colors, shapes or other identifiers based on the data. It gives a breakdown of what each symbol
represents throughout the map.
12.5.3.1 Visibility
The Legends can be made visible by setting the ShowLegend property of LegendSettings to true.

12.5.4 Positioning of the Legend


Based on the margin values of X and Y-axes, the Map legends can be positioned with the support of
LegendPosition property in LegendSetting class

Copyright 2001 - 2016 Syncfusion Inc.

273

SfMaps

Map Elements

12.5.4.1 Legend Icon Size


The map legend icon size can be modified by using the IconHeight and IconWidth properties in

LegendSettings
Refer Equal color mapping code for legend support
OBJECTIVE-C
SFShapeSetting * setting = [[SFShapeSetting
alloc]initWithFrame:self.view.frame];
LegendSetting legendSetting = new LegendSetting ();
legendSetting.showLegend = true;
legendSetting.iconHeight = 20;
legendSetting.iconWidth = 20;
legendSetting.legendPosition = new Point (100, 400);
[layer.SFLegendSetting addObject:legendSetting];
[self.view addSubview:maps]

SWIFT
let legendSetting : SFMapLegendSettings = SFMapLegendSettings();
legendSetting.showLegend = true;
legendSetting.iconSize = new CoreGraphics.CGSize(20,20);
legendSetting.position = new CoreGraphics.CGPoint (100, 400);
layer.LegendSettings.addObject(legendSetting);

C#
LegendSetting legendSetting = new LegendSetting ();
legendSetting.ShowLegend = true;
legendSetting.IconHeight = 20;
legendSetting.IconWidth = 20;
legendSetting.LegendPosition = new Point (100, 400);
layer.LegendSetting = legendSetting;

Copyright 2001 - 2016 Syncfusion Inc.

274

SfMaps

User Interaction

12.6 User Interaction


Options like zooming, panning, and map selection enables the effective interaction on Map elements.

12.6.1 Map Selection


Each shape in the Map can be selected and deselected during interaction with the shapes.
The SelectedShapeColor property is used to get or set the selected shape color.
SelectionStrokeWidth property is used to customize the selected shape border.
You can select the shape by tapping the shape. The Selection is enabled by the EnableSelection
property of shape layer. When EnableSelection is set to false, the shapes cannot be selected.
OBJECTIVE-C
layer.enableSelection = true;
SFShapeSetting * setting = [[SFShapeSetting
alloc]initWithFrame:self.view.frame];
setting.selectedShapeColor = Color.ParseColor("#BC5353");
layer.shapeSettings = setting;

Copyright 2001 - 2016 Syncfusion Inc.

275

SfMaps

User Interaction

SWIFT
let layer : SFShapeFileLayer = SFShapeFileLayer();
layer.EnableSelection = true;
let setting : SFShapeSetting = SFShapeSetting();
setting.SelectedShapeColor = UIColor.FromRGB (0xBC, 0x53, 0x53);
layer.ShapeSettings.addObject(setting);

C#
layer.EnableSelection = true;
ShapeSetting setting = new ShapeSetting ();
setting.SelectedShapeColor = Color.ParseColor("#BC5353");
layer.ShapeSettings = setting;

12.6.2 Zooming
The zooming feature enables you to zoom in and out the Map to show in-depth information. It is
controlled by the level property of the Map. When the zoom level of the Map control is increased, the
Map is zoomed in. When the zoom level is decreased, then the Map is zoomed out.

Copyright 2001 - 2016 Syncfusion Inc.

276

SfMaps

User Interaction

The following properties are related to the zooming feature of the Maps control:

1. ZoomLevel
2. EnableZoom
3. MinZoom
4. MaxZoom
12.6.2.1 Level
The ZoomLevel property determines the Maps scale size when zooming. The default value of
ZoomLevel is 1.
Note: level cannot be less than 1
12.6.2.2 EnableZoom
The EnableZoom property enables or disables the zooming feature.
12.6.2.3 MinZoom
The MinZoom property is used to set the minimum zoom level of the Map.
12.6.2.4 MaxZoom
The MaxZoom property is used to set the maximum zoom level of the Map.
12.6.2.5 EnablePanning
The panning feature enables the Map navigation. The EnablePan property is used to enable or disable
the panning support.
OBJECTIVE-C
maps.minZoom = 1;
maps.maxZoom = 10;
maps.zoomLevel = 2;
maps.enbaleZoom = true;

SWIFT
maps.minZoom = 1;
maps.maxZoom = 10;
maps.zoomLevel = 2;
maps.enbaleZoom = true;

C#
maps.MinZoom = 1;
maps.MaxZoom = 10;
maps.ZoomLevel = 2;
maps.EnbaleZoom = true;

Copyright 2001 - 2016 Syncfusion Inc.

277

SfNavigationDrawer

Overview

13 SfNavigationDrawer
13.1 Overview
NavigationDrawer is a sliding panel menu to navigate between major modules of the application. The
Navigation Drawer is usually hidden and appears when you swipe the screen from any of the four edges
or tapping the app icon, if available.

NavigationDrawer

13.1.1 Use Case Scenarios


Navigation Drawers are used in applications where navigating to the major module or page is a basic
requirement. The Navigation Drawer is available in the following apps that signify the importance of
navigating through pages:

1. Facebook
Copyright 2001 - 2016 Syncfusion Inc.

278

SfNavigationDrawer

Getting Started

2. Play Store
3. e-Commerce Apps
4. Banking Apps

13.1.2 Key Features


Position - Specifies the rendering position for the Navigation Drawer. That is you can display it
from right or left or top or bottom edges
Transition - Specifies the transition type of the Navigation Drawer.

13.2 Getting Started


13.2.1 Create your first NavigationDrawer in Objective C
This section explains how to create a NavigationDrawer that lets you navigate to different pages by
selecting the desired page from the NavigationDrawer.
13.2.1.1 Add Framework reference to Project
You can refer to the following link to learn how to add framework to your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
NavigationDrawer is available in the following framework:
Framework: SFNavigationDrawer.UI
Refer to the following code to add the NavigationDrawer control:
C
SFNavigationDrawer _navigationDrawer = [[SFNavigationDrawer alloc] init];

13.2.1.2 Customizing a simple NavigationDrawer sample


To develop an application with NavigationDrawer is simple. The following steps explain how to create
and configure its properties.

1. Create an instance for the NavigationDrawer.


C
SFNavigationDrawer _navigationDrawer = [[SFNavigationDrawer alloc] init];

2. Create the ContentView for the NavigationDrawer.


C
contextView1 =[[UIView alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];
[self setPage:0];
HeaderView =[[UIView alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];
HeaderView.backgroundColor= RGB(47, 173, 227);
HeaderTitle=[[UILabel alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];

Copyright 2001 - 2016 Syncfusion Inc.

279

SfNavigationDrawer

Getting Started

HeaderTitle.text=@"HOME";
HeaderTitle.textColor=[UIColor whiteColor];
HeaderTitle.textAlignment = NSTextAlignmentCenter;
[HeaderView addSubview:HeaderTitle];
[contextView1 addSubview:HeaderView];
[self.view addSubview:contextView1];
contextView =[[UIView alloc]initWithFrame:CGRectMake(0, 50,
self.view.bounds.size.width, self.view.bounds.size.height)];
tab =[[TableMenuView alloc]init];
CGFloat wi=(self.view.bounds.size.width-30)/2;
CGFloat he=(self.view.bounds.size.height-200)/3;
dimg1 =[[UIButton alloc]initWithFrame:CGRectMake(10, 10, wi, he)];
[dimg1 setBackgroundImage:[UIImage imageNamed:@"user"]
forState:UIControlStateNormal];
[dimg1 addTarget:self action:@selector(buttonTouchedUpInside:)
forControlEvents:UIControlEventTouchUpInside];
[contextView addSubview:dimg1];
button=[[UIButton alloc] initWithFrame:CGRectMake(10, 15, 25, 17)];
[button setBackgroundImage:[UIImage imageNamed:@"burgericon.png"]
forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setHidden:false];
[button
setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
_navigationDrawer.contentView= contextView;

3. Create the DrawerView for the NavigationDrawer.


The DrawerView is a panel that is, the hidden content which is brought to view by manipulations like
panning or swiping through the edges. The DrawerView has three sections namely:
DrawerHeaderView
DrawerContentView
DrawerFooterView
C
tabelview1 = [[TableMenuView alloc] init ];
tabelview1.menuItems=@[@"Home",@"Profile", @"Inbox", @"Outbox",
@"Sent",@"Trash"];
tabelview1.customize=false;
tabelview1.main=mainPage;
UIView *center=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0,
_navigationDrawer.drawerHeight)];
[center addSubview:tabelview1.view];
tabelview1.view.frame=CGRectMake(0, 0, 200, _navigationDrawer.drawerHeight);
_navigationDrawer.drawerContentView=center;
UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200,
self.frame.size.height)];
content.backgroundColor = [UIColor whiteColor];
UIView *header=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
header.backgroundColor=RGB(47, 173, 227);

Copyright 2001 - 2016 Syncfusion Inc.

280

SfNavigationDrawer

Getting Started

lbl1 =[[UILabel alloc]initWithFrame:CGRectMake(0, 65,


_navigationDrawer.drawerWidth, 40)];
lbl1.text=@James Pollock;
[lbl1 setFont:[UIFont fontWithName:@"Helvetica" size:14]];
lbl1.textColor=[UIColor whiteColor];
lbl1.textAlignment=NSTextAlignmentCenter;
lbl1.center = header.center;
[header addSubview:lbl1];
img =[[UIImageView alloc]initWithFrame:CGRectMake(70, 15, 50,50)];
img.image=[UIImage imageNamed:@"User"];
[header addSubview:img];
_navigationDrawer.drawerHeaderView=header;

Copyright 2001 - 2016 Syncfusion Inc.

281

SfNavigationDrawer

Getting Started

NavigationDrawer Sample App

Copyright 2001 - 2016 Syncfusion Inc.

282

SfNavigationDrawer

Getting Started

13.2.2 Create your first NavigationDrawer in Swift


This section explains how to create a NavigationDrawer that lets you navigate to different pages by
selecting the desired page from the NavigationDrawer.
13.2.2.1 Add Framework reference to Project
NavigationDrawer is available in the following framework:
Framework: SFNavigationDrawer.UI
Refer to the following code to add the NavigationDrawer control:
C
var navigationDrawer:SFNavigationDrawer=SFNavigationDrawer();

13.2.2.2 Customizing a simple NavigationDrawer sample


To develop an application with NavigationDrawer is simple. The following steps explain how to create a
NavigationDrawer and configure its properties.

1. Create an instance for the NavigationDrawer.


C
var navigationDrawer:SFNavigationDrawer=SFNavigationDrawer();

2. Create the ContentView for the NavigationDrawer.


C
HeaderTitle.text="Home";
var wi:CGFloat=CGFloat();
wi = sliderView1.bounds.size.width;
var he:CGFloat=CGFloat();
he = sliderView1.bounds.size.height;
dimg1.frame = CGRectMake(10, 10, wi, he);
let image1 = UIImage(named: "menu.png") as UIImage!;
dimg1.setBackgroundImage(image1, forState: UIControlState.Normal);
mainpage.addSubview(dimg1);
navigationDrawer.contentView=mainPage;

3. Create the DrawerView for the NavigationDrawer.


The DrawerView is a panel, that is, the hidden content that is brought to view by manipulations like
panning or swiping through the edges. The DrawerView has three sections namely:
DrawerHeaderView
DrawerContentView
DrawerFooterView
C

Copyright 2001 - 2016 Syncfusion Inc.

283

SfNavigationDrawer

Getting Started

header.frame = CGRectMake(0, 0, navigationDrawer.drawerWidth, 100);


header.backgroundColor = UIColor(red:47/255.0, green:173/255.0,
blue:227/255.0, alpha:1.0);
lbl1.frame = CGRectMake(0, 65, navigationDrawer.drawerWidth, 40);
lbl1.text="James Pollock";
lbl1.font = UIFont(name: "Helvetica", size: 14);
lbl1.textColor=UIColor.whiteColor();
lbl1.textAlignment = NSTextAlignment.Center;
header.addSubview(lbl1);
navigationDrawer.drawerHeaderView = header;
footer.frame = CGRectMake(0, navigationDrawer.drawerHeight,
navigationDrawer.drawerWidth, 100);
footer.backgroundColor = UIColor(red:47/255.0, green:173/255.0,
blue:227/255.0, alpha:1.0);
footer.addSubview(lbl1);
navigationDrawer.drawerHeaderView = footer;
var center:UIView=UIView();
center.frame = CGRectMake(0, 200, navigationDrawer.drawerWidth,
navigationDrawer.drawerHeight-header.frame.height);
center.addSubview(tabelview1.view);
tabelview1.tableView.frame = CGRectMake(0, 0, navigationDrawer.drawerWidth,
navigationDrawer.drawerHeight-header.frame.height);
tabelview1.menuItems = ["Home","Profile", "Inbox", "Outbox",
"Sent","Trash"];
navigationDrawer.drawerContentView=center;
sliderView.addSubview(navigationDrawer.view);
navigationDrawer.ContentView = tableview1;

Copyright 2001 - 2016 Syncfusion Inc.

284

SfNavigationDrawer

Getting Started

NavigationDrawer Sample App

Copyright 2001 - 2016 Syncfusion Inc.

285

SfNavigationDrawer

TouchThreshold

13.3 TouchThreshold
Gets or sets the threshold value from the edges for easy panning from the edges. The default value of
TouchThreshold is 15.
C
_navigationDrawer.touchThreshold = 25;

C
navigationDrawer.touchThreshold = 25;

13.4 ContentView
ContentView is the main view of the NavigationDrawer where the desired items can be placed.
C
contextView1 =[[UIView alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];
[self setPage:0];
HeaderView =[[UIView alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];
HeaderView.backgroundColor= RGB(47, 173, 227);
HeaderTitle=[[UILabel alloc]initWithFrame:CGRectMake(0, 0,
self.view.bounds.size.width, 50)];
HeaderTitle.text=@"HOME";
HeaderTitle.textColor=[UIColor whiteColor];
HeaderTitle.textAlignment = NSTextAlignmentCenter;
[HeaderView addSubview:HeaderTitle];
[contextView1 addSubview:HeaderView];
[self.view addSubview:contextView1];
contextView =[[UIView alloc]initWithFrame:CGRectMake(0, 50,
self.view.bounds.size.width, self.view.bounds.size.height)];
tab =[[TableMenuView alloc]init];
CGFloat wi=(self.view.bounds.size.width-30)/2;
CGFloat he=(self.view.bounds.size.height-200)/3;
dimg1 =[[UIButton alloc]initWithFrame:CGRectMake(10, 10, wi, he)];
[dimg1 setBackgroundImage:[UIImage imageNamed:@"profile"]
forState:UIControlStateNormal];
[dimg1 addTarget:self action:@selector(buttonTouchedUpInside:)
forControlEvents:UIControlEventTouchUpInside];
[contextView addSubview:dimg1];
button=[[UIButton alloc] initWithFrame:CGRectMake(10, 15, 25, 17)];
[button setBackgroundImage:[UIImage imageNamed:@"burgericon.png"]
forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setHidden:false];
[button
setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
_navigationDrawer.contentView= contextView;

C
HeaderTitle.text="Home";
var wi:CGFloat=CGFloat();

Copyright 2001 - 2016 Syncfusion Inc.

286

SfNavigationDrawer

ContentView

wi = sliderView1.bounds.size.width;
var he:CGFloat=CGFloat();
he = sliderView1.bounds.size.height;
dimg1.frame = CGRectMake(10, 10, wi, he);
let image1 = UIImage(named: "menu.png") as UIImage!;
dimg1.setBackgroundImage(image1, forState: UIControlState.Normal);
mainpage.addSubview(dimg1);
navigationDrawer.contentView=mainPage;

Copyright 2001 - 2016 Syncfusion Inc.

287

SfNavigationDrawer

ContentView

ContentView

Copyright 2001 - 2016 Syncfusion Inc.

288

SfNavigationDrawer

DrawerContentView

13.5 DrawerContentView
The NavigationDrawer control contains the DrawerContentView that is a part of the DrawerView panel.
The DrawerContentView displays the navigation items, where you need to jump to.
C
tabelview1 = [[TableMenuView alloc] init ];
tabelview1.menuItems=@[@"Home",@"Profile", @"Inbox", @"Outbox",
@"Sent",@"Trash"];
tabelview1.customize=false;
tabelview1.main=mainPage;
UIView *center=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0,
_navigationDrawer.drawerHeight)];
[center addSubview:tabelview1.view];
tabelview1.view.frame=CGRectMake(0, 0, 200, _navigationDrawer.drawerHeight);
_navigationDrawer.drawerContentView=center;

C
var center:UIView=UIView();
center.frame = CGRectMake(0, 200, navigationDrawer.drawerWidth,
navigationDrawer.drawerHeight-header.frame.height);
center.addSubview(tabelview1.view);
tabelview1.tableView.frame = CGRectMake(0, 0, navigationDrawer.drawerWidth,
navigationDrawer.drawerHeight-header.frame.height);
tabelview1.menuItems = ["Home","Profile", "Inbox", "Outbox",
"Sent","Trash"];
navigationDrawer.drawerContentView=center;
sliderView.addSubview(navigationDrawer.view);
navigationDrawer.ContentView = tableview1;

13.6 DrawerHeaderView
Gets or sets the DrawerHeaderView of the DrawerView panel in the NavigationDrawer control.
C
UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200,
self.frame.size.height)];
content.backgroundColor = [UIColor whiteColor];
UIView *header=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
header.backgroundColor=RGB(47, 173, 227);
lbl1 =[[UILabel alloc]initWithFrame:CGRectMake(0, 65,
_navigationDrawer.drawerWidth, 40)];
lbl1.text=@James Pollock;
[lbl1 setFont:[UIFont fontWithName:@"Helvetica" size:14]];
lbl1.textColor=[UIColor whiteColor];
lbl1.textAlignment=NSTextAlignmentCenter;
lbl1.center = header.center;
[header addSubview:lbl1];
img =[[UIImageView alloc]initWithFrame:CGRectMake(70, 15, 50,50)];
img.image=[UIImage imageNamed:@"User"];
[header addSubview:img];
_navigationDrawer.drawerHeaderView=header;

C
Copyright 2001 - 2016 Syncfusion Inc.

289

SfNavigationDrawer

DrawerFooterView

header.frame = CGRectMake(0, 0, navigationDrawer.drawerWidth, 100);


header.backgroundColor = UIColor(red:47/255.0, green:173/255.0,
blue:227/255.0, alpha:1.0);
lbl1.frame = CGRectMake(0, 65, navigationDrawer.drawerWidth, 40);
lbl1.text="James Pollock";
lbl1.font = UIFont(name: "Helvetica", size: 14);
lbl1.textColor=UIColor.whiteColor();
lbl1.textAlignment = NSTextAlignment.Center;
header.addSubview(lbl1);
navigationDrawer.drawerHeaderView = header;

13.7 DrawerFooterView
Gets or sets the footer for the DrawerView panel in the NavigationDrawer control.
C
UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200,
self.frame.size.height)];
content.backgroundColor = [UIColor whiteColor];
UIView *footer = [[UIView alloc] initWithFrame:CGRectMake(0,
_navigationDrawer.drawerHeight - 100, 200, 80)];
footer.backgroundColor=[UIColor blueColor];
lb2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,
_navigationDrawer.drawerWidth, 40)];
lb2.text = @James Pollock";
[lb2 setFont:[UIFont fontWithName:@"Helvetica" size:14]];
lb2.textColor = [UIColor whiteColor];
lb2.textAlignment=NSTextAlignmentCenter;
lb2.center = footer.center;
[footer addSubview:lb2];
_navigationDrawer.drawerFooterView = footer;

C
footer.frame = CGRectMake(0, navigationDrawer.drawerHeight,
navigationDrawer.drawerWidth, 100);
footer.backgroundColor = UIColor(red:47/255.0, green:173/255.0,
blue:227/255.0, alpha:1.0);
lbl1.frame = CGRectMake(0, 65, navigationDrawer.drawerWidth, 40);
lbl1.text="James Pollock";
lbl1.font = UIFont(name: "Helvetica", size: 14);
lbl1.textColor=UIColor.whiteColor();
lbl1.textAlignment = NSTextAlignment.Center;
footer.addSubview(lbl1);
navigationDrawer.drawerHeaderView = footer;

Copyright 2001 - 2016 Syncfusion Inc.

290

SfNavigationDrawer

DrawerFooterView

DrawerView

Copyright 2001 - 2016 Syncfusion Inc.

291

SfNavigationDrawer

DrawerHeight

13.8 DrawerHeight
Gets or sets the height for the DrawerView panel in the NavigationDrawer control.
C
_navigationDrawer.drawerWidth = 200;

C
navigationDrawer.drawerWidth = 200;

13.9 DrawerWidth
Gets or sets the width for the DrawerView panel in the NavigationDrawer control.
C
_navigationDrawer.drawerHeight = 200;

C
_navigationDrawer.drawerHeight = 200;

13.10 Position
The Position property specifies the position of the DrawerView panel. The Position property has the
following four options:
Left
Right
Top
Bottom
The default position is Left.
C
_navigationDrawer.position = SFNavigationDrawerPositionLeft;

C
navigationDrawer.position = SFNavigationDrawerPositionLeft;

Copyright 2001 - 2016 Syncfusion Inc.

292

SfNavigationDrawer

Position

Position Left (Default)


The following code example shows how to set NavigationDrawer to the right.

Copyright 2001 - 2016 Syncfusion Inc.

293

SfNavigationDrawer

Position

C
_navigationDrawer.position = SFNavigationDrawerPositionRight;

C
navigationDrawer.position = SFNavigationDrawerPositionRight;

Copyright 2001 - 2016 Syncfusion Inc.

294

SfNavigationDrawer

Position

Postion Right
The following code example shows how to set NavigationDrawer at the top.

Copyright 2001 - 2016 Syncfusion Inc.

295

SfNavigationDrawer

Position

C
_navigationDrawer.position = SFNavigationDrawerPositionTop;

C
navigationDrawer.position = SFNavigationDrawerPositionTop;

Copyright 2001 - 2016 Syncfusion Inc.

296

SfNavigationDrawer

Position

Position Top
The following code example shows how to set NavigationDrawer at the bottom.

Copyright 2001 - 2016 Syncfusion Inc.

297

SfNavigationDrawer

Position

C
_navigationDrawer.position = SFNavigationDrawerPositionBottom;

C
navigationDrawer.position = SFNavigationDrawerPositionBottom;

Copyright 2001 - 2016 Syncfusion Inc.

298

SfNavigationDrawer

Position

Position - Bottom

Copyright 2001 - 2016 Syncfusion Inc.

299

SfNavigationDrawer

Transition

13.11 Transition
The Transition property specifies the animations for the DrawerView panel. The Transition property has
the following three options:
SlideOnTop
Push
Reveal
The default transition is SlideOnTop, that draws the DrawerContent on top of the main content.
C
_navigationDrawer.transition = SFNavigationDrawerTransitionSlideOnTop;

C
navigationDrawer.transition = SFNavigationDrawerTransitionSlideOnTop;

Copyright 2001 - 2016 Syncfusion Inc.

300

SfNavigationDrawer

Transition

Transition SlideOnTop (Default)

Copyright 2001 - 2016 Syncfusion Inc.

301

SfNavigationDrawer

Transition

The following code example shows how to set Transition as Push to NavigationDrawer. This transition
moves the Drawer and main content simultaneously.
C
_navigationDrawer.transition = SFNavigationDrawerTransitionPush;

C
navigationDrawer.transition = SFNavigationDrawerTransitionPush;

Copyright 2001 - 2016 Syncfusion Inc.

302

SfNavigationDrawer

Transition

Transition Push

Copyright 2001 - 2016 Syncfusion Inc.

303

SfNavigationDrawer

Transition

The following code example shows how to set Transition as Reveal to NavigationDrawer. In this
transition, the Drawer content is stable and the main content moves to reveal the drawer content.
C
_navigationDrawer.transition = SFNavigationDrawerTransitionReveal;

C
navigationDrawer.transition = SFNavigationDrawerTransitionReveal;

Copyright 2001 - 2016 Syncfusion Inc.

304

SfNavigationDrawer

Transition

Transition - Reveal

Copyright 2001 - 2016 Syncfusion Inc.

305

SfNumericTextBox

Overview

14 SfNumericTextBox
14.1 Overview
NumericTextBox is an advanced version of the UITextField control that restricts input to numeric values.
The control respects the UI culture and can be configured to display different formats like currency
format, scientific format, etc.

NumericTextBox Overview

14.1.1 Key Features


Number Formatting Input string can be formatted using format strings.
Culture Number format can be localized to any specific culture.
Null Value The control allows you to set null value.
Parsing Mode Value gets parsed based on this property.

14.2 Getting Started


14.2.1 Create your first NumericTextBox in Objective C
This section explains how to create the NumericTextBox that allows you to enter values in a highly
efficient way. You can also display number in the format of its mentioned culture. In this instance, how
to create a NumericTextBox and to use its several features have been demonstrated.
14.2.1.1 Add Framework reference to Project
You can refer to the following link to learn how to add framework to your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
NumericTextBox is available in the following framework:
Framework: SFNumericTextBox.UI
14.2.1.2 Refer to the following code to add the NumericTextBox control:
14.2.1.2.1 Create a NumericTextBox
To develop an application with the IOS NumericTextBox is simple. The following steps explain how to
create and configure its properties.

1. Create an instance for the SfNumericTextBox in the constructor and set that SfNumericTextBox
as content view of Activity.

Copyright 2001 - 2016 Syncfusion Inc.

306

SfNumericTextBox

Getting Started

C
@property (nonatomic, strong) SFNumericTextBox *numericTextBox1;
-(void)load{
_numericTextBox1=[[ SFNumericTextBox alloc]initWithFrame:CGRectMake(200,
120, 100, 40)];
}

14.2.1.2.2 Add value and format string


You can set initial value and number format for numerictextbox by using the value and formatString
properties in the NumericTextBox.
C
_numericTextBox1.value = 123.45;
_numericTextBox1.formatString = @"n";
_numericTextBox1.maximumNumberDecimalDigits = 2;

The above code example illustrates the value and formatstring properties of the Numeric TextBox. The
MaximumNumberDecimalDigits can be specified to determine digits after decimal place.

NumberFormat
14.2.1.3 Add ParsingMode
Value of the NumericTextBox gets parsed based on the ParsingMode property. ParsingMode is of type
Parsers, that is, enum of Double and Decimal.
C
_numericTextBox1.parserMode = SFNumericTextBoxParsersDecimal;

Copyright 2001 - 2016 Syncfusion Inc.

307

SfNumericTextBox

Getting Started

NumericTextBox - iOS

14.2.2 Create your first NumericTextBox in Swift


This section encompasses on how to create the NumericTextBox that lets you to enter values over a high
efficient way. You can also display number in the format of its mentioned culture. In this instance, how
to create a NumericTextBox and to use its several features have been demonstrated.
14.2.2.1 Add Framework reference to Project
NumericTextBox is available in the following framework:
Framework: SFNumericTextBox.UI
14.2.2.1.1 Refer to the following code to add the NumericTextBox control:
14.2.2.1.2 Create a NumericTextBox
To develop an application with the iOS NumericTextBox is simple. The following steps explain how to
create and configure its properties.

1. Create an instance for the SfNumericTextBox in the constructor and set that SfNumericTextBox
as content view of Activity.
C
var _numericTextBox1 : SFNumericTextBox = SFNumericTextBox();
_numericTextBox1.frame = CGRectMake(200, 120, 100, 40);

14.2.2.2 Add value and format string


You can set initial value and numberformat for NumericTextBox by using the value and formatString
properties in the NumericTextBox.

Copyright 2001 - 2016 Syncfusion Inc.

308

SfNumericTextBox

Getting Started

C
_numericTextBox1.value = 123.45;
_numericTextBox1.formatString = @"n";
_numericTextBox1.maximumNumberDecimalDigits = 2;

The above code example illustrates value and formatstring properties of the NumericTextBox. The
MaximumNumberDecimalDigits can be specified to determine digits after decimal place.

NumericText
14.2.2.3 Add ParsingMode
Value of the NumericTextBox gets parsed based on the ParsingMode property. ParsingMode is of type
Parsers, that is enum of Double and Decimal.
C
_numericTextBox1.parserMode = SFNumericTextBoxParsersDecimal;

Parsing mode Decimal

Copyright 2001 - 2016 Syncfusion Inc.

309

SfNumericTextBox

Number Formatting

NumericTextBox iOS

14.3 Number Formatting


Number formatting functionality allows formatting the text based on the FormatString of the control.
The control formats the display text on lost focus.

14.3.1 Format String


The FormatString property determines the format specifier by which the display text has to be
formatted.
Default Value of FormatString is N.
The following code example shows how to diplay numeric text with currency format.
C
_numericTextBox1.value = 123.45;
_numericTextBox1.formatString = @"c";

C
_numericTextBox1.value = 123.45;
_numericTextBox1.formatString = "c";

The various format strings are n, c, p and apart from these when any string is provided that is replicated
as Suffix.

Currency Format
The result string produced by these format specifiers are influenced by the settings in the Regional
Options control panel. Devices with different cultures or different numeric settings generate different
result strings.

14.4 CultureInfo
The CultureInfo property helps to localize the NumericTextBox. Text is formatted based on the specified
Culture.
The following code example shows how to localize the control to German culture.
C
_numericTextBox1.value = 1000;
_numericTextBox1.cultureInfo = [[NSLocale alloc]
initWithLocaleIdentifier:@"fr_FR"];

C
_numericTextBox1.value = 1000;
_numericTextBox1.cultureInfo = NSLocale(localeIdentifier: "fr_FR");

Copyright 2001 - 2016 Syncfusion Inc.

310

SfNumericTextBox

Nullable Value

French Culture
Note that the decimal separator and group separator are affected by the culture in this case.

14.4.1 Culture with formatting


NumericTextBox respects both Culture and FormatString while formatting Text. In the following code
example, French Culture and Currency format specifier have been set for Culture and FormatString
properties respectively.
C
_numericTextBox1.formatString = @"c";
_numericTextBox1.value = 1000;
_numericTextBox1.cultureInfo=[[NSLocale alloc]
initWithLocaleIdentifier:@"fr_FR"];

C
_numericTextBox1.formatString = "c";
_numericTextBox1.value = 1000;
_numericTextBox1.cultureInfo=NSLocale(localeIdentifier: "fr_FR");

Currency Format French Culture

14.5 Nullable Value


The control allows you to set Null Value. The AllowNull property needs to be set to make this behavior
work. By default the property value is false.
C
_numericTextBox1.allowNull = true;

C
_numericTextBox1.allowNull = true;

Null value

14.6 ParsingMode
Value of the NumericTextBox gets parsed based on ParsingMode property. ParsingMode is of type
Parsers, that is enum of Double and Decimal. DefaultValue for ParsingMode is Double.

Copyright 2001 - 2016 Syncfusion Inc.

311

SfNumericTextBox

WaterMark Text

C
_numericTextBox1.parserMode = SFNumericTextBoxParsersDecimal;

C
_numericTextBox1.parserMode = SFNumericTextBoxParsersDecimal;

ParsingMode - Decimal

14.7 WaterMark Text


The watermark text is used to display some information regarding the NumericEditBox. This watermark
is visible when EditText is empty or Null.
C
_numericTextBox1.watermark = @"Enter Principal";

C
_numericTextBox1.watermark = "Enter Principal";

WaterMark Text

14.8 Percent Display mode


With the PercentDisplayMode property, you can specify how to display numeric data in Percent mode. It
provides the following options:
Value: Displays the value with percentage symbol.
Compute: Displays the computed value with percentage symbol.
The following code example and screenshots illustrate the usage of the PercentDisplayMode property.
C
_numericTextBox1.percentDisplayMode=SFNumericTextBoxPercentDisplayModeComput
e;
_numericTextBox1.formatString = @"p";

C
_numericTextBox1.percentDisplayMode=SFNumericTextBoxPercentDisplayModeComput
e;
_numericTextBox1.formatString = "p";

Copyright 2001 - 2016 Syncfusion Inc.

312

SfRangeSlider

Overview

PercentDisplayMode - Compute

15 SfRangeSlider
15.1 Overview
SfRangeSlider control allows you to select the range of value within the specified minimum and
maximum limits.
The range can be selected by moving the Thumb control along a track.

Copyright 2001 - 2016 Syncfusion Inc.

313

SfRangeSlider

Getting Started

RangeSlider

15.2 Getting Started


15.2.1 Create your first RangeSlider in iOS by using objective C
This section encompasses on how to create the RangeSlider that lets you to choose values over a high
interactive way. You can also display special characters in different character types. In this instance, how
to create a RangeSlider and to use its several features have been demonstrated.

Copyright 2001 - 2016 Syncfusion Inc.

314

SfRangeSlider

Getting Started

RangeSlider overview
15.2.1.1 Create a Rangeslider
To develop an application with the iOS RangeSlider is simple. The following steps explain how to create
and configure its properties.

1. Create an instance for the SfRangeslider in the constructor and set that SfRangeslider as content
view of Activity.
C
#import <SFRangeSlider/Header.h>
@implementation ViewController
{
SFRangeSlider * _rangeslider;
}
- (void)viewDidLoad {
_rangeslider = [[SFRangeSlider alloc]initWithFrame:CGRectMake(20, 100,300,
100)]
[self.view addSubview:_rangeslider];
}

15.2.1.2 Add values and scale


You can set the minimum value for the slider by using the minimum and maximum in the Rangeslider. It
can be Numerical values.
C
_rangeslider.maximum=12;
_rangeslider.minimum=0;
_rangeslider.rangeStart=0;
_rangeslider.rangeEnd=6;

The above code example illustrates the minimum and maximum value for the slider. Likewise RangeStart
and Rangeend can be set that denotes
the start range and end range values while dual thumb is used. The ShowRange property is used to
switch between single thumb and double thumb.
15.2.1.3 Add Ticks and Labels for the RangeSlider
The ticks can be set by setting TickFrequency and TickPlacement. Likewise value labels can be set by
setting ShowValueLabel property to true.
The position of label can be varied by ValuePlacement property.
Copyright 2001 - 2016 Syncfusion Inc.

315

SfRangeSlider

Getting Started

C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementBottomRight;
_rangeslider.tickFrequency =2;
_rangeslider.valuePlacement =SFRangeSliderValuePlacementBottomRight;

The above code example illustrates on setting the Tick and ValuePlcaements. The TickFrequency
determines the interval between the ticks.
15.2.1.4 Add Snapping type for RangeSlider
The movement of the thumb can be varied in different ways. This is achieved by setting the SnapsTo
property.
C
_rangeslider.snapsTo=SFRangeSliderSnapsToTicks;

The movement of the thumb is based on Ticks / StepFrequency / none. When it is set to Tick, the Thumb
is moved to next / nearby tick and on setting to none,Thumb is moved independently.

Copyright 2001 - 2016 Syncfusion Inc.

316

SfRangeSlider

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

317

SfRangeSlider

Getting Started

Vertical orientation

15.2.2 Create your first RangeSlider in iOS by using Swift


This section encompasses on how to create the RangeSlider that lets you to choose values over a high
interactive way. You can also display special
characters in different character types.In this instance, how to create a RangeSlider and to use its
several features have been demonstrated.

RangeSlider overview in swift


15.2.2.1 Create a Rangeslider
To develop an application with the iOS RangeSlider is simple. The following steps explain how to create
and configure its properties.
C
import SFRangeSliderUI
var rangeSlider : SFRangeSlider = SFRangeSlider();
override func load() {
super.viewDidLoad()
self.addSubview (_rangeSlider);
}

Create an instance for the SfRangeslider in the constructor and set that SfRangeslider as content view of
Activity.
15.2.2.2 Add values and scale
You can set the minimum value for the slider by using the minimum and maximum in the Rangeslider. It
can be Numerical values.
C
_rangeslider.maximum= 12 ;
_rangeslider.minimum= 0;
_rangeslider.rangeStart= 0;
_rangeslider.rangeEnd= 12 ;

The above code example illustrates the minimum and maximum value for the slider. Likewise,
RangeStart and Rangeend can be set that denotes
the start range and end range values while dual thumb is used. The ShowRange property is used to
switch between single thumb and double thumb.

Copyright 2001 - 2016 Syncfusion Inc.

318

SfRangeSlider

Getting Started

15.2.2.3 Add Ticks and Labels for the RangeSlider


The ticks can be set by setting the TickFrequency and TickPlacement. Likewise, value labels can be set by
setting the ShowValueLabel property to
true. The position of label can be varied by the LabelPlacement property.
C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementBottomRight;
_rangeslider.tickFrequency= 2;
_rangeslider.valuePlacement=SFRangeSliderValuePlacementBottomRight;

The above code illustrates on setting the Tick and ValuePlcaements. The TickFrequency determines the
interval between the ticks.
15.2.2.4 Add Snapping type for RangeSlider
The movement of the thumb can be varied in different ways. This is achieved by setting the SnapsTo
property.
C
_rangeslider.snapsTo=SFRangeSliderSnapsToTicks;

The movement of the thumb is based on Ticks / StepFrequency / none. When it is set to Tick, the Thumb
is moved to next / nearby tick and on setting to none,Thumb is moved independently.

Copyright 2001 - 2016 Syncfusion Inc.

319

SfRangeSlider

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

320

SfRangeSlider

Minimum

Vertical orientation in swift

15.3 Minimum
Gets or sets the minimum possible value of the range.
C
_ rangeslider.minimum=0;

C
_ rangeslider.minimum=0;

15.4 Maximum
Gets or sets the maximum possible value of the range.
C
_rangeslider.maximum=12;

C
_rangeslider.maximum=12;

15.5 Ticks
It is possible to place tick marks along the track in a uniform manner. The position of tick marks can be
customized.

15.5.1 Tick Frequency


The Tick Frequency property is used to define the number of ticks along the track based on Minimum
and Maximum values.
C
_rangeslider.tickFrequency =2;

C
_rangeslider.tickFrequency =2;

TickFrequency with intervals

Copyright 2001 - 2016 Syncfusion Inc.

321

SfRangeSlider

Ticks

Note: When the SnapsTo property is set to Ticks, the TickFrequency is used to specify the interval
between snap points.

15.5.2 Step Frequency


When the SnapsTo property is set to StepValues, the StepFrequency property is used to specify the
interval between snap points.
C
_rangeslider.stepFrequency =1;

C
_rangeslider.stepFrequency =1;

15.5.3 Snaps To
The SnapsTo property determines whether the RangeSlider snaps to steps or ticks. Available options for
this property are

1. StepValues
2. Ticks
3. None
The StepValues and StepFrequency properties are used to specify the interval between snap points in
this case. When the SnapsTo property is set to Ticks, the TickFrequency property is used to specify the
interval between snap points and on setting the SnapsTo to None, the thumb is moved independent of
any values. The default option is Ticks.
Note: When the Thumb is released between two steps or the pointer is pressed between two steps,
then the value and Thumb automatically snaps to nearest value.
C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementBottomRight;

15.5.4 Tick Placement


The TickPlacement property determines where to draw tick marks in relation to the track. Available
options for this property are

1. BottomRight
2.
3.
4.
5.

Inline
None
Outside
TopLeft

The default option is Inline.

15.5.5 BottomRight
Tick marks can be placed either below the track in horizontal orientation or right of the track in vertical
orientation.

Copyright 2001 - 2016 Syncfusion Inc.

322

SfRangeSlider

Ticks

C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementBottomRight;

TickPlacement - BottomRight
Note: In Vertical Orientation, this option places the ticks to right side.

15.5.6 TopLeft
Tick marks are placed either above the track in horizontal orientation or left of the track in vertical
orientation.
C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementTopLeft;

C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementTopLeft;

TickPlacement - TopLeft
Note: In Vertical Orientation, this option places the ticks to left side.

15.5.7 Outside
Tick marks are placed on both sides of the track either in horizontal or vertical orientation.
C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementOutside;

C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementOutside;

Copyright 2001 - 2016 Syncfusion Inc.

323

SfRangeSlider

Range

TickPlacement - Outside

15.5.8 Inline
Ticks are placed along the track.
C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementInline;

C
_rangeslider.tickPlacement=SFRangeSliderTickPlacementInline;

TickPlacement - Inline

15.6 Range
The SfRangeSlider control supports to select range of value by using two Thumbs.

15.6.1 ShowRange
When ShowRange property is set to true, two Thumbs are placed in the track. One Thumb is used to
update the start of the range selection and another thumb is used to update the end of the range
selection.
C
_rangeslider.showRange=true;

C
_rangeslider.showRange=true;

Rangeslider with two thumbs

Copyright 2001 - 2016 Syncfusion Inc.

324

SfRangeSlider

Orientation

15.6.2 RangeStart
Gets or sets the start value of the range start.
C
_rangeslider.rangeStart=0;

15.6.3 RangeEnd
Gets or sets the end value of the range end.
C
_rangeslider.rangeEnd=6;

C
_rangeslider.rangeEnd=6;

15.7 Orientation
The Orientation property has the following two options.

1. Horizontal
2. Vertical
The default option is Horizontal.

Horzontal orientation
The following code example shows how to set Vertical Orientation to the SfRangeSlider.
C
_rangeslider.orientation=SFVerticalRange;

C
_rangeslider.orientation=SFVerticalRange;

Copyright 2001 - 2016 Syncfusion Inc.

325

SfRangeSlider

Direction Reversed

Vertical orientation

15.8 Direction Reversed


The direction of increasing value can be changed by using the IsDirectionReversed property. When this
property is set to True,the direction of
increasing value is towards left in the horizontal orientation and down in the vertical orientation. The
default value is false.
JS
_rangeslider.isDirectionalReversed=true;

C
_rangeslider.isDirectionalReversed=true;

Copyright 2001 - 2016 Syncfusion Inc.

326

SfRangeSlider

Label Support

Direction Reversed

15.9 Label Support


This feature allows you to display the labels for all the tick values when theShowValueLabels is set to
true.
Property

Description

ShowValueLabels

This property allows us to display labels for the ticks.

ValuePlacement

This property specifies the position of the label for all of the ticks.

15.9.1 ShowValueLabels
The default value of the ShowValueLabels property is false. When set to true, it displays the label for all
the ticks based on the ValuePlacement property.
C
_rangeslider.showValueLabel =true;

C
_rangeslider.showValueLabel =true;

15.9.2 ValuePlacement
The LabelPlacement property describes the position of the labels for all the ticks. Available options for
this property are:

1. BottomRight
2. TopLeft
The following code example shows the usage of the ValuePlacement property. The output is displayed in
the corresponding images.
C
_rangeslider.valuePlacement =SFRangeSliderValuePlacementTopLeft;

C
_rangeslider.valuePlacement =SFRangeSliderValuePlacementTopLeft;

Copyright 2001 - 2016 Syncfusion Inc.

327

SfRating

Overview

ValuePlacement - TopLeft
C
_rangeslider.valuePlacement =SFRangeSliderValuePlacementBottomRight;

C
rangeslider.valuePlacement =SFRangeSliderValuePlacementBottomRight;

ValuePlacement - BottomRight

16 SfRating
16.1 Overview
The Essential Android Rating control has a group of stars to indicate the rating with flexible precision.
Also provides various customization support on item size, item spacing and the number of displayed
items.

16.1.1 Key Features


Precision: Options to decide the accuracy level of rating.
Item Count: Support to determine the number of Rating items to be displayed.

16.2 Getting Started


This section explains you the steps to configure a rating control in a real-time scenario and also provides
a walk-through on some of the customization features available in Rating control.

16.2.1 Creating your first Rating in iOS


Illustration for the procedures to install the Syncfusion Essential Studio can be refered from Syncfusion
ios components installation, Syncfusion.SfRating.ios.aar should be used to add rating reference in the
application.

Copyright 2001 - 2016 Syncfusion Inc.

328

SfRating

Getting Started

16.2.1.1 Initializing Rating Control


Adding reference to Rating
OBJECTIVE-C
#import <SFRatingUI/SFRatingUI.h>

SWIFT
import SFRatingUI

Create an instance of SfRating and adding it to application.


OBJECTIVE-C
CGRect ratingFrame= CGRectMake(10, 300,400, 50);
SfRating sfRating = [[SFRating alloc] initWithFrame:ratingFrame];

SWIFT
var sfRating : SFRating = SFRating();

Configure the properties of Rating


OBJECTIVE-C
sfRating.itemCount=5;
sfRating.precision=SFRatingPrecisionStandard;
sfRating.toolTipPlacement=SFRatingToolTipPlacementNone;
sfRating.itemSize=30;
sfRating.value = 3;
sfRating.itemSpacing = 25;

SWIFT
sfRating.itemCount=5;
sfRating.precision=SFRatingPrecisionStandard;
sfRating.toolTipPlacement=SFRatingToolTipPlacementNone;
sfRating.itemSize=30;
sfRating.value = 3;
sfRating.itemSpacing = 25;

Copyright 2001 - 2016 Syncfusion Inc.

329

SfRating

Getting Started

16.2.1.2 Setting Value


The Value property sets the display value of the rating.
Note: By default, property value is 0.
OBJECTIVE-C
sfRating.Value=3;

SWIFT
_sfRating.value=3;

Copyright 2001 - 2016 Syncfusion Inc.

330

SfRating

Getting Started

16.2.1.3 Precision
To enable full, half and exact values of rating, set the Precision property.
OBJECTIVE-C
sfRating.Precision=Pecision.Standard;

SWIFT
_sfRating.Precision=Pecision.Standard;

16.2.2 Creating your First Rating in Xamarin.iOS


16.2.2.1 Referencing Essential Studio Components in Your Solution
After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation
folders,
{Syncfusion Installed location}\Essential Studio\12.4.0.24\lib
Add the following assembly references to the iOS project,
iOS\Syncfusion.SfRating.iOS.dll
16.2.2.2 Add and Configure the Rating Control
Create an instance of SfRating.
C#
SfRating sfRating = new SfRating ();

Configure the properties of Rating


C#
sfRating.ItemCount=5;
sfRating.Precision = SFRatingPrecision.Half;
sfRating.ToolTipPlacement= SFRatingToolTipPlacement.None;
sfRating.ItemSize=10;
sfRating.Readonly=true;
sfRating.Value=(nfloat)3.5;
sfRating.ItemSpacing = 5;

16.2.2.3 Setting Value


The Value property sets the display value of the rating.
Note: By default, property value is 0.
C#

Copyright 2001 - 2016 Syncfusion Inc.

331

SfRating

Precision Mode

sfRating.Value=3;

16.2.2.4 Precision
To enable full, half and exact values of rating, set the Precision property.
C#
sfRating.Precision = Precision.Standard;

16.3 Precision Mode


The precision mode defines the accuracy level of the rating control. It has Standard, Half and Exact
options.

16.3.1 Standard
The rating item will be filled completely based on the rating value.
OBJECTIVE-C
sfRating.precision=SFRatingPrecisionStandard;

SWIFT
sfRating.precision=SFRatingPrecisionStandard;

C#
sfRating.Precision=Precision.Standard;

16.3.2 Half
The rating item will be filled partially based on the rating value.
OBJECTIVE-C
sfRating.precision=SFRatingPrecisionHalf;

SWIFT
sfRating.precision=SFRatingPrecisionHalf;

C#
sfRating.Precision=Precision.Half;

Copyright 2001 - 2016 Syncfusion Inc.

332

SfRating

ToolTip

16.3.3 Exact
The rating item will be filled exactly based on the rating value.
OBJECTIVE-C
sfRating.precision=SFRatingPrecisionExact;

SWIFT
sfRating.precision=SFRatingPrecisionExact;

C#
sfRating.Precision=Precision.Exact;

16.4 ToolTip
16.4.1 ToolTipPlacement
Rating control provides tooltip support with rating value using TooltipPlacement property.
Note: By default, this property value is set to None.
16.4.1.1 TopLeft
The tooltip will display on top of the SfRating control.
OBJECTIVE-C
sfRating.toolTipPlacement=SFRatingToolTipPlacementTopLeft;

SWIFT
sfRating.toolTipPlacement=SFRatingToolTipPlacementTopLeft;

C#
sfRating.TooltipPlacement=TooltipPlacement.TopLeft;

![](images/leftTop.jpg)
16.4.1.2 BottomRight
The tooltip will display on bottom of the SfRating control.
OBJECTIVE-C
sfRating.toolTipPlacement=SFRatingToolTipPlacementBottomRight;

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

333

SfRating

ToolTip

sfRating.toolTipPlacement=SFRatingToolTipPlacementBottomRight;

C#
sfRating.TooltipPlacement=TooltipPlacement.BottomRight;

16.4.1.3 None
It is used to invisible the tool tip in the SfRating control.
OBJECTIVE-C
sfRating.toolTipPlacement=SFRatingToolTipPlacementNone;

SWIFT
sfRating.toolTipPlacement=SFRatingToolTipPlacementNone;

C#
sfRating.TooltipPlacement=TooltipPlacement.None;

16.4.2 Tooltip Precision


The ToolTipPrecision property sets the number precisions to be displayed after decimal point in tool
tip.
Note: The default value of ToolTip precision is 1.
OBJECTIVE-C
sfRating.TooltipPlacement=6;

SWIFT
sfRating.TooltipPlacement=6;

C#
sfRating.TooltipPlacement=6;

Copyright 2001 - 2016 Syncfusion Inc.

334

SfRating

Appearance and Styling

16.5 Appearance and Styling


16.5.1 Item Size
The ItemSize property sets the size of the rating items.
Note: By default, property value is 50.
OBJECTIVE-C
sfRating.itemSize = 20;

SWIFT
sfRating.itemSize= 20;

C#
sfRating.ItemSize=20;

16.5.2 Item Spacing


The ItemSpacing property sets the spacing between the rating items.
Note: By default, property value is 5.
OBJECTIVE-C
sfRating.itemSpacing = 20;

SWIFT
sfRating.itemSpacing = 20;

C#
sfRating.ItemSpacing=20;

16.5.3 Number of Items


The ItemCount property sets the number of rating items to be displayed.
Note: The default property value is 5.
OBJECTIVE-C
sfRating.itemCount = 4;

SWIFT
sfRating.itemCount = 4;

Copyright 2001 - 2016 Syncfusion Inc.

335

SfRating

Appearance and Styling

C#
sfRating.ItemCount=4;

16.5.4 Read Only


Rating control provides support for changeable or unchangeable values for Rating control. This is
achieved by the ReadOnly property. When this property is set to True, the Rating value becomes
unchangeable. By default, this property value is set to False.
OBJECTIVE-C
sfRating.readonly= true;

SWIFT
sfRating.readonly=true;

C#
sfRating.ReadOnly= true;

16.5.5 RatingSettings
OBJECTIVE-C
SFRatingSettings *sfRatingSetting = [[SFRatingSettings alloc]init];
sfRatingSetting.ratedFill=[UIColor colorWithRed:0.98 green:0.82 blue:0.04
alpha:1.0];
sfRatingSetting.ratedStroke=[UIColor colorWithRed:0.98 green:0.82 blue:0.04
alpha:1.0];
sfRatingSetting.ratedStrokeThickness=10;
sfRatingSetting.unRatedFill=[UIColor colorWithRed:0.98 green:0.82 blue:0.04
alpha:1.0];
sfRatingSetting.unRatedStrokeThickness=10;

SWIFT
var sfRatingSetting=SFRatingSettings();
sfRatingSetting.ratedFill=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);
sfRatingSetting.ratedStroke=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);
sfRatingSetting.ratedStrokeThickness=10;
sfRatingSetting.unRatedFill=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);
sfRatingSetting.unRatedStrokeThickness=10;

Copyright 2001 - 2016 Syncfusion Inc.

336

SfRating

Appearance and Styling

sfRating.RatingSettings=sfRatingSetting;

C#
SFRatingSettings sfRatingSetting = new SFRatingSettings ();
sfRatingSetting.RatedFill = UIColor.FromRGB (251,209,10);
sfRatingSetting.RatedStroke = UIColor.FromRGB (251,209,10);
sfRatingSetting.RatedStrokeThickness=10;
sfRatingSetting.UnRatedFill=UIColor.FromRGB (251,209,10);
sfRatingSetting.UnRatedStrokeThickness=10;

16.5.5.1 Rated Fill


The RatedFill property fills the rated area with the specified solid color in the SfRating control.
OBJECTIVE-C
sfRatingSetting.ratedFill = [UIColor colorWithRed:0.98 green:0.82 blue:0.04
alpha:1.0];

SWIFT
sfRatingSetting.ratedFill=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);

C#
sfRatingSettings.RatedFill=Color.FromHex("#fbd10a");

16.5.5.2 Rated Stroke


The RatedStroke property sets the stroke for the rated area with the specified solid color in the SfRating
control.
OBJECTIVE-C
sfRatingSetting.ratedStroke = [UIColor colorWithRed:0.98 green:0.82
blue:0.04 alpha:1.0];

SWIFT
sfRatingSetting.ratedStroke=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);

C#
sfRatingSettings.RatedStroke=Color.GREEN;

Copyright 2001 - 2016 Syncfusion Inc.

337

SfRating

Appearance and Styling

16.5.5.3 Rated Stroke Thickness


The RatedStrokeThickness property sets the stroke thickness for the rated area with the specified value
in the SfRating control.
OBJECTIVE-C
sfRatingSetting.ratedStrokeThickness=10;

SWIFT
sfRatingSetting.ratedStrokeThickness=10;

C#
sfRatingSettings.RatedStrokeThickness=3;

16.5.5.4 UnRated Fill


The UnRatedFill property fills the unrated area with the specified solid color in the SfRating control.
OBJECTIVE-C
sfRatingSetting.unRatedFill=[UIColor colorWithRed:0.98 green:0.82 blue:0.04
alpha:1.0];

SWIFT
sfRatingSetting.unRatedFill=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);

C#
sfRatingSettings.UnRatedFill=Color.GRAY;

16.5.5.5 UnRated Stroke


The UnRatedStroke property sets the stroke for the unrated area with the specified solid color in the
SfRating control.
OBJECTIVE-C
sfRatingSetting.unRatedStroke = [UIColor colorWithRed:0.98 green:0.82
blue:0.04 alpha:1.0];

SWIFT
sfRatingSetting.unRatedStroke=UIColor(red:0.98, green:0.82, blue:0.04,
alpha:1.0);

Copyright 2001 - 2016 Syncfusion Inc.

338

SfSchedule

Overview

C#
sfRatingSettings.UnRatedStroke=Color.BLACK;

16.5.5.6 UnRated Stroke Thickness


The UnRatedStrokeThickness property sets the stroke thickness for the unrated area with the specified
value in the SfRating control.
OBJECTIVE-C
sfRatingSetting.unRatedStrokeThickness=0;

SWIFT
sfRatingSetting.unRatedStrokeThickness=0;

C#
sfRatingSettings.UnRatedStrokeThickness=3;

17 SfSchedule
17.1 Overview
SfSchedule is used to provide common scheduling functionalities. The SfSchedule control allows user to
create and manage appointments. It includes features such as viewing daily/all day/spanned
appointments, complete customization of month cell and appointments, efficient performance.

17.1.1 Key Features


Built-in Views --- Schedule provides 4 different types of views such as Day, WorkWeek, Week and
Month
Recurrence Appointment --- Recurring appointments can be created with Daily, weekly, monthly, and
yearly recurrence patterns which is supported in ICalc standard.
Customization --- Control has simple APIs allowing for elegant customizations. You can edit the look to
match the rest of your application.
Localization --- The build-in content of the User Interface can be changed according to culture that is
needed. Also, it has built-in culture support for basic items such us day and month text representations.

17.2 Getting Started


This section explains you the steps required to render the Schedule control by populating
events(appointments), with inline support and min max dates support in the control. This section covers
only the minimal features that you need to know to get started with the Schedule.

Copyright 2001 - 2016 Syncfusion Inc.

339

SfSchedule

Getting Started

17.2.1 Adding control reference to the application


Control reference can be added to the application through frameworks, to know more about adding and
configuring the framework, refer Syncfusion iOS components installation

17.2.2 Initializing Schedule


Initialize SfSchedule instance in viewDidLoad method and then add the schedule as a subview of self
view.
OBJECTIVE-C
(void)viewDidLoad {
[super viewDidLoad];
if (self) {
//setting frame size
CGRect currentFrame =
CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y+20,self.view.fr
ame.size.width,self.view.frame.size.height-20);
//initialising control in the allocated frame size
schedule=[[SFSchedule alloc] initWithFrame:currentFrame];
[self.view addSubview: schedule];
}
}

SWIFT
func viewDidLoad() {
super.viewDidLoad()
if self {
//setting frame size
var currentFrame: CGRect = CGRectMake(self.view.frame.origin.x,
self.view.frame.origin.y + 20, self.view.frame.size.width,
self.view.frame.size.height - 20)
//initialising control in the allocated frame size
schedule = SFSchedule(frame: currentFrame)
self.view.addSubview(schedule)
}
}

Copyright 2001 - 2016 Syncfusion Inc.

340

SfSchedule

Getting Started

You can change the default UI of schedule using ScheduleView to display the dates in different layouts
available in the control.
OBJECTIVE-C
//setting schedule view
schedule.scheduleView = SFScheduleViewWeek;
[self.view addSubview: schedule];

SWIFT
//setting schedule view
schedule.scheduleView = SFScheduleView.Week;
self.view.addSubview(schedule)

Copyright 2001 - 2016 Syncfusion Inc.

341

SfSchedule

Getting Started

17.2.3 Populating Events


You can add events to the schedule by creating collection of ScheduleAppointments using
ScheduleAppointmentColletion.
OBJECTIVE-C
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
NSDate * date =[NSDate date];
//start date
NSDateComponents *startDate_components = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components.minute = 0;
startDate_components.second = 0;
startDate_components.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components];
//end date

Copyright 2001 - 2016 Syncfusion Inc.

342

SfSchedule

Getting Started

NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]


components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//adding schedule appointment
ScheduleAppointment *clientMeeting= [ScheduleAppointment new];
clientMeeting.startTime = startDate;
clientMeeting.endTime = endDate;
clientMeeting.subject = @"Client Meeting";
clientMeeting.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:clientMeeting];
schedule.appointments = appCollection;
[self.view addSubview: schedule];

SWIFT
//creating appointment collection
var appCollection: [AnyObject] = NSMutableArray.new()
var date: NSDate = NSDate.date()
//start date
var startDate_components: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components.minute = 0
startDate_components.second = 0
startDate_components.hour = 10
var startDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(startDate_components)
//end date
var endDateComponents: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
//adding schedule appointment
var clientMeeting: ScheduleAppointment = ScheduleAppointment.new()
clientMeeting.startTime = startDate
clientMeeting.endTime = endDate
clientMeeting.subject = "Client Meeting"
clientMeeting.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)
appCollection.addObject(clientMeeting)
schedule.appointments = appCollection
self.view.addSubview(schedule)

Copyright 2001 - 2016 Syncfusion Inc.

343

SfSchedule

Getting Started

17.2.4 Populating Recursive Events


You can also add recursive appointments to Schedule, refer Recurrence section to know more about
creating the recursive appointments using Rrule generator in schedule.
OBJECTIVE-C
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
// assigning start date
NSDate * date =[NSDate date];
NSDateComponents *startDate_components_clientMeeting = [[NSCalendar
currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components_clientMeeting.minute = 0;
startDate_components_clientMeeting.second = 0;
startDate_components_clientMeeting.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components_clientMeeting];
//assigning end date

Copyright 2001 - 2016 Syncfusion Inc.

344

SfSchedule

Getting Started

NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]


components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//creating schedule appointments
ScheduleAppointment *clientMeeting= [ScheduleAppointment new];
clientMeeting.startTime = startDate;
clientMeeting.endTime = endDate;
clientMeeting.subject = @"Client Meeting";
//assinging RFC stardard recurring rule.
clientMeeting.recurrenceRule = @"FREQ=DAILY;INTERVAL=2;COUNT=25";
clientMeeting.isRecursive = true;
clientMeeting.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:clientMeeting];
schedule.appointments = appCollection;
[self.view addSubview: schedule];

SWIFT
//creating appointment collection
var appCollection: [AnyObject] = NSMutableArray.new()
// assigning start date
var date: NSDate = NSDate.date()
var startDate_components_clientMeeting: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components_clientMeeting.minute = 0
startDate_components_clientMeeting.second = 0
startDate_components_clientMeeting.hour = 10
var startDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(startDate_components_clientM
eeting)
//assigning end date
var endDateComponents: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
//creating schedule appointments
var clientMeeting: ScheduleAppointment = ScheduleAppointment.new()
clientMeeting.startTime = startDate
clientMeeting.endTime = endDate
clientMeeting.subject = "Client Meeting"
//assinging RFC stardard recurring rule.
clientMeeting.recurrenceRule = "FREQ=DAILY;INTERVAL=2;COUNT=25"
clientMeeting.isRecursive = true
clientMeeting.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)

Copyright 2001 - 2016 Syncfusion Inc.

345

SfSchedule

Getting Started

appCollection.addObject(clientMeeting)
schedule.appointments = appCollection
self.view.addSubview(schedule)

17.2.5 Enabling Appointments Inline


When the schedule appointments are viewed in Monthview, it will not display much information about
the appointments, you can view the appointments in inline by setting showAppointmentsInline
property of MonthViewSettings as True.
OBJECTIVE-C
//enabling appointments inline
schedule.monthViewSettings.showAppointmentsInline = true;
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
// assigning start date
NSDate * date =[NSDate date];
NSDateComponents *startDate_components_clientMeeting = [[NSCalendar
currentCalendar]

Copyright 2001 - 2016 Syncfusion Inc.

346

SfSchedule

Getting Started

components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components_clientMeeting.minute = 0;
startDate_components_clientMeeting.second = 0
startDate_components_clientMeeting.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components_clientMeeting];
//assigning end date
NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//creating schedule appointments
ScheduleAppointment *clientMeeting= [ScheduleAppointment new];
clientMeeting.startTime = startDate;
clientMeeting.endTime = endDate;
clientMeeting.subject = @"Client Meeting";
clientMeeting.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:clientMeeting];
schedule.appointments = appCollection;
[self.view addSubview: schedule];

SWIFT
//enabling appointments inline
schedule.monthViewSettings.showAppointmentsInline = true
//creating appointment collection
var appCollection: [AnyObject] = NSMutableArray.new()
// assigning start date
var date: NSDate = NSDate.date()
var startDate_components_clientMeeting: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components_clientMeeting.minute = 0
startDate_components_clientMeeting.second = 0
startDate_components_clientMeeting.hour = 10
var startDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(startDate_components_clientM
eeting)
//assigning end date
var endDateComponents: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
//creating schedule appointments
var clientMeeting: ScheduleAppointment = ScheduleAppointment.new()
clientMeeting.startTime = startDate

Copyright 2001 - 2016 Syncfusion Inc.

347

SfSchedule

Getting Started

clientMeeting.endTime = endDate
clientMeeting.subject = "Client Meeting"
clientMeeting.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)
appCollection.addObject(clientMeeting)
schedule.appointments = appCollection
self.view.addSubview(schedule)

17.2.6 Restricting Dates


Certain dates can be restricted in schedule by setting minDisplayDate and maxDisplayDate properties
of SfSchedule. To know more about restricting dates within a particular range of dates refer [Min Max
dates] http://help.syncfusion.com/android/sfschedule/date-navigation-and-gesture#min-max-dates.
OBJECTIVE-C
//enabling appointments inline
schedule.monthViewSettings.showAppointmentsInline = true;
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
// assigning min display date

Copyright 2001 - 2016 Syncfusion Inc.

348

SfSchedule

Getting Started

NSDate * date =[NSDate date];


NSDateComponents *mindate_componet = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
mindate_componet.day = mindate_componet.day - 10;
mindate_componet.minute = 0;
mindate_componet.second = 0;
mindate_componet.hour = 10 ;
NSDate *minDate = [[NSCalendar currentCalendar]
dateFromComponents:mindate_componet];
//assigning max display date
NSDateComponents *maxDate_component = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
maxDate_component.day = maxDate_component.day + 10;
maxDate_component.minute = 0;
maxDate_component.second = 0;
maxDate_component.hour = 12 ;
NSDate *maxDate = [[NSCalendar currentCalendar]
dateFromComponents:maxDate_component];
schedule.minDisplayDate = minDate;
schedule.maxDisplayDate = maxDate;
[self.view addSubview: schedule];

SWIFT
//enabling appointments inline
schedule.monthViewSettings.showAppointmentsInline = true
//creating appointment collection
var appCollection: [AnyObject] = NSMutableArray.new()
// assigning min display date
var date: NSDate = NSDate.date()
var mindate_componet: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
mindate_componet.day = mindate_componet.day - 10
mindate_componet.minute = 0
mindate_componet.second = 0
mindate_componet.hour = 10
var minDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(mindate_componet)
var maxDate_component: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
maxDate_component.day = maxDate_component.day + 10
maxDate_component.minute = 0
maxDate_component.second = 0
maxDate_component.hour = 12
var maxDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(maxDate_component)
schedule.minDisplayDate = minDate
schedule.maxDisplayDate = maxDate
self.view.addSubview(schedule)

Copyright 2001 - 2016 Syncfusion Inc.

349

SfSchedule

Populating Appointments

17.3 Populating Appointments


Schedule control has an inbuilt capability to handle the appointment arrangement internally based on
the ScheduleAppointment collections. ScheduleAppointment is a class, which holds the details about the
appointment to be rendered in schedule. Schedule Appointments collection can be provided to schedule
using the following method.

17.3.1 Adding appointments using Collection


ScheduleAppointment has some basic properties such as StartTime, EndTime, Subject and some
additional information about the appointment can be added using Color, Notes, Location, All Day,
Recursive properties.
Create the collection of the ScheduleAppointments by setting required details using above mentioned
properties for each appointment. And then assign the created collection to the Appointments
property of SfSchedule as like in below code example.
OBJECTIVE-C
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
NSDate * date =[NSDate date];
//start date
NSDateComponents *startDate_components = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components.minute = 0;
startDate_components.second = 0;
startDate_components.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components];
//end date
NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//adding schedule appointment
ScheduleAppointment *clientMeeting= [ScheduleAppointment new];
clientMeeting.startTime = startDate;
clientMeeting.endTime = endDate;
clientMeeting.subject = @"Client Meeting";
clientMeeting.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:clientMeeting];
schedule.appointments = appCollection;
[self.view addSubview: schedule];

SWIFT
var appCollection: [AnyObject] = NSMutableArray.new()
var date: NSDate = NSDate.date()

Copyright 2001 - 2016 Syncfusion Inc.

350

SfSchedule

Populating Appointments

var startDate_components: NSDateComponents =


NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components.minute = 0
startDate_components.second = 0
startDate_components.hour = 10
var startDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(startDate_components)
var endDateComponents: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
var clientMeeting: ScheduleAppointment = ScheduleAppointment.new()
clientMeeting.startTime = startDate
clientMeeting.endTime = endDate
clientMeeting.subject = "Client Meeting"
clientMeeting.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)
appCollection.addObject(clientMeeting)
schedule.appointments = appCollection
self.view.addSubview(schedule)

17.3.2 Adding appointments by implementing data source protocol


The appointment can also be added to schedule control on demand based on the visible dates. This can
be achieved by implementing the SFScheduleDataSource protocol in your application.
Before implementing the data source, you need to assign dataSource property of the schedule with
the instance of an object where it is going to be implemented.
OBJECTIVE-C
//Implementing the SFScheduleDataSource protocol
@interface ScheduleDemo() <SFScheduleDataSource>
@end
@implementation ScheduleDemo
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
CGRect currentFrame= frame;
appointments = [self createAppointments];
schedule=[[SFSchedule alloc] initWithFrame:currentFrame];
/*Assign ScheduleDemo to dataSource property of schedule. Since ScheduleDemo
implements the protocol so assing the self to dataSource property of
schedule*/
schedule.dataSource=self;
}
@end

SWIFT

Copyright 2001 - 2016 Syncfusion Inc.

351

SfSchedule

Populating Appointments

class ScheduleDemo {
func initWithFrame(frame: CGRect) -> AnyObject {
self = super(frame: frame)
if self {
var currentFrame: CGRect = frame
appointments = self.createAppointments()
schedule = SFSchedule(frame: currentFrame)
schedule.dataSource = self
}
}
}

The data source protocol contains two methods as follows:


schedule:appointmentsFromDate: Returns an appointments that is within the start and end
visible date range.
schedule:appointmentsForDate: Returns a appointments that is in the specific date. There is
also an optional method.
By implementing the above two methods the appointments can be set to based on visible date range.
OBJECTIVE-C
//Implementing appointmentsFromDate
- (NSArray *)schedule:(SFSchedule *)schedule1 appointmentsFromDate:(NSDate
*)startDate toDate:(NSDate *)endDate
{
NSDateComponents *components = [schedule1.calendar
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:endDate];
components.hour = 23;
components.minute = 59;
components.second = 59;
NSDate *rangeEndDateWithTime = [[NSCalendar currentCalendar]
dateFromComponents:components];
NSPredicate *predicate = [NSPredicate predicateWithFormat:@"(startTime <=
%@) AND (startTime >= %@)", rangeEndDateWithTime, startDate];
//appointments is the local collection contains ScheduleAppointment object
in it.
return [appointments filteredArrayUsingPredicate:predicate];
}
//Implementing appointmentsForDate
-(NSArray*)schedule:(SFSchedule *)schedule2 appointmentsForDate:(NSDate
*)date
{
NSDateComponents *components = [schedule2.calendar
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
components.hour = 23;
components.minute = 59;
components.second = 59;
NSDate *rangeEndDateWithTime = [[NSCalendar currentCalendar]
dateFromComponents:components];
NSPredicate *predicate = [NSPredicate predicateWithFormat:@"(startTime <=
%@) AND (startTime >= %@)", rangeEndDateWithTime, date];

Copyright 2001 - 2016 Syncfusion Inc.

352

SfSchedule

Populating Appointments

//appointments is the local collection contains ScheduleAppointment object


in it.
return [appointments filteredArrayUsingPredicate:predicate];
}

SWIFT
func schedule(schedule1: SFSchedule, appointmentsFromDate startDate: NSDate,
toDate endDate: NSDate) -> [AnyObject] {
var components: NSDateComponents =
schedule1.calendar.components(NSCalendarUnitYear | NSCalendarUnitMonth |
NSCalendarUnitDay, fromDate: endDate)
components.hour = 23
components.minute = 59
components.second = 59
var rangeEndDateWithTime: NSDate =
NSCalendar.currentCalendar().dateFromComponents(components)
var predicate: NSPredicate = NSPredicate.predicateWithFormat("(startTime <=
%@) AND (startTime >= %@)"rangeEndDateWithTimestartDate)
return appointments.filteredArrayUsingPredicate(predicate)
}
func schedule(schedule2: SFSchedule, appointmentsForDate date: NSDate) ->
[AnyObject] {
var components: NSDateComponents =
schedule2.calendar.components(NSCalendarUnitYear | NSCalendarUnitMonth |
NSCalendarUnitDay, fromDate: date)
components.hour = 23
components.minute = 59
components.second = 59
var rangeEndDateWithTime: NSDate =
NSCalendar.currentCalendar().dateFromComponents(components)
var predicate: NSPredicate = NSPredicate.predicateWithFormat("(startTime <=
%@) AND (startTime >= %@)"rangeEndDateWithTimedate)
return appointments.filteredArrayUsingPredicate(predicate)
}

Copyright 2001 - 2016 Syncfusion Inc.

353

SfSchedule

Date Navigation and Gesture

17.4 Date Navigation and Gesture


17.4.1 Forward
By default the date can be navigated to next view using touch gesture, by swiping the control in right to
left direction. The view can be also changed programmatically using forward method available in
SfSchedule. So that next immediate visible dates will be viewed. It will move to next month if the
schedule views is month, similarly it will move to next week for week view and next day for day view.
OBJECTIVE-C
[schedule forward];

SWIFT
schedule.forward();

Note: It can be navigated until it reaches the Min Max dates.

Copyright 2001 - 2016 Syncfusion Inc.

354

SfSchedule

Date Navigation and Gesture

17.4.2 Backward
By default the date can be navigated to previous view using touch gesture, by swiping the control in left
to right direction.The view can be also changed programmatically using backward method available in
SfSchedule. So that previous immediate visible dates will be displayed. It will move to previous month if
the schedule views is month, similarly it will move to previous week for week view and previous day for
day view.
OBJECTIVE-C
[schedule backward];

SWIFT
schedule.backward();

Note: It can be navigated until it reaches the Min Max dates.

17.4.3 Move to Date


Visible dates can be moved to specific date using moveToDate method available in SfSchedule. It will
move to any specific date if the schedule view is Day View, similarly it will move to the specific week if it
is week view and to specific month if it is month view.
OBJECTIVE-C
// navigating to specific date
NSDate * date =[NSDate date];
NSDateComponents *navigate = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
navigate.year = 2020;
navigate.month = 8;
navigate.day = 29;
navigate.minute = 0;
navigate.second = 0;
navigate.hour = 10 ;
NSDate *naivagate_Date = [[NSCalendar currentCalendar]
dateFromComponents:navigate];
[schedule moveToDate:naivagate_Date];

SWIFT
var date: NSDate = NSDate.date()
var navigate: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
navigate.year = 2020
navigate.month = 8
navigate.day = 29
navigate.minute = 0
navigate.second = 0
navigate.hour = 10
var naivagate_Date: NSDate =
NSCalendar.currentCalendar().dateFromComponents(navigate)
schedule.moveToDate(naivagate_Date)

Copyright 2001 - 2016 Syncfusion Inc.

355

SfSchedule

Date Navigation and Gesture

Note: The specified date should lies between MinDisplayDate and MaxDisplayDate , if the specified
date is greater than maxDisplayDate then the view moved to maxDisplayDate similarly if the specified
date is lesser than the minDisplayDate then the view moved to minDisplayDate.

17.4.4 Enable/disable navigation


By default Schedule views can be moved backwards and forwards using touch swipe gesture. This
navigation, using touch gesture can be enabled and disabled using enableNavigation property
available in Schedule control. By default this is enabled.
OBJECTIVE-C
//disabling gesture navigation
schedule.enableNavigation = false;

SWIFT
schedule.enableNavigation = false;

17.4.5 Min Max dates.


Visible dates can be restricted between certain range of dates using minDisplayDate and
maxDisplayDate` properties available in Schedule control. It is applicable in all the schedule views.
So that beyond the min max date range, it will restrict date navigations features of forward(),
backward(), moveToDate() and also cant swipe the control using touch gesture beyond the min max
date range.Also, beyond the min max date range, selection will also not works for month view. So that
tapped listeners while tapped on the monthcell will not be listened. Thus Inline feature in month view
will works only within the min max date range.
OBJECTIVE-C
// assigning min display date
NSDate * date =[NSDate date];
NSDateComponents *mindate_componet = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
mindate_componet.day = mindate_componet.day - 10;
mindate_componet.minute = 0;
mindate_componet.second = 0;
mindate_componet.hour = 10 ;
NSDate *minDate = [[NSCalendar currentCalendar]
dateFromComponents:mindate_componet];
//assigning max display date
NSDateComponents *maxDate_component = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
maxDate_component.day = maxDate_component.day + 10;
maxDate_component.minute = 0;
maxDate_component.second = 0;
maxDate_component.hour = 12 ;
NSDate *maxDate = [[NSCalendar currentCalendar]
dateFromComponents:maxDate_component];
schedule.minDisplayDate = minDate;
schedule.maxDisplayDate = maxDate;

Copyright 2001 - 2016 Syncfusion Inc.

356

SfSchedule

Date Navigation and Gesture

SWIFT
var date: NSDate = NSDate.date()
var mindate_componet: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
mindate_componet.day = mindate_componet.day - 10
mindate_componet.minute = 0
mindate_componet.second = 0
mindate_componet.hour = 10
var minDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(mindate_componet)
var maxDate_component: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
maxDate_component.day = maxDate_component.day + 10
maxDate_component.minute = 0
maxDate_component.second = 0
maxDate_component.hour = 12
var maxDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(maxDate_component)
schedule.minDisplayDate = minDate
schedule.maxDisplayDate = maxDate

17.4.6 Inline
By enabling Inline feature in month view, while touch the month view cell, appointments available in a
particular day will be listed in inline view. There are options available to customize the default UI of
inline view while tap on the monthcell using inlineTapped listener. InlineAppointmentsTappedListener is
a listener available in month view to raise while tapped on the appointments in inline view.
OBJECTIVE-C
//enabling appointments inline
schedule.monthViewSettings.showAppointmentsInline = true;

SWIFT
schedule.monthViewSettings.showAppointmentsInline = true;

Copyright 2001 - 2016 Syncfusion Inc.

357

SfSchedule

Copyright 2001 - 2016 Syncfusion Inc.

Date Navigation and Gesture

358

SfSchedule

Date Navigation and Gesture

17.4.7 FirstDay of the Week


By default schedule control will be rendered with Sunday as the first day of the week, it can be
customized to any day of the week by FirstDayOfWeek property of SfSchedule.
OBJECTIVE-C
//setting first day of the week
schedule.calendar.firstWeekday = 3;
//setting schedule view
schedule.scheduleView = SFScheduleViewMonth;

SWIFT
schedule.calendar.firstWeekday = 3
schedule.scheduleView = SFScheduleView.Month;

Copyright 2001 - 2016 Syncfusion Inc.

359

SfSchedule

Views

17.5 Views
Schedule control provides four different types of views to display dates. Day view, Week view,
WorkWeek view and month view. It can be assigned to the schedule control by using ScheduleView
property. Based on the users preference appointments can be viewed in any of the four type of view
available. By default schedule control is assigned with day view.

17.5.1 Day View


Day view is used to display a single day; current day will be visible by default. Appointments on a specific
day will be arranged in respective timeslots based on its duration.
OBJECTIVE-C
//setting schedule view
schedule.scheduleView = SFScheduleViewDay;

SWIFT
schedule.scheduleView = SFScheduleView.Day;

Copyright 2001 - 2016 Syncfusion Inc.

360

SfSchedule

Views

17.5.1.1 Settings
17.5.1.1.1 Date Time Formating
You can format the date and time string in the schedule control using DayLabelSettings of
DayViewSettings and the size of those strings are also customizable.
17.5.1.1.2 Non-Accessible Blocks
You can restrict/allocate certain timeslot as Non-accessible block using NonAccessibleBlocks of
DayViewSettings, so that you can allocate those timeslots for predefined events/activities like Lunch
hour.
17.5.1.1.3 Working Hours
You can differentiate working hours with non-working hour timeslots by its color using WorkStartHour
and WorkEndHour properties of DayViewSettings.
17.5.1.1.4 All Day Appointments Panel
You can view All day appointments in separate panel and the panels visibility can be enabled by setting
ShowAllDay property of DayViewSettings as true.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

361

SfSchedule

Views

//setting schedule view


schedule.scheduleView = SFScheduleViewDay;
//settings day view settings properties
DayViewSettings *dayViewSettings = [DayViewSettings new];
dayViewSettings.workStartHour = 10;
dayViewSettings.workEndHour = 18;
dayViewSettings.showAllDay = true;
//setting non-accessing blocks.
dayViewSettings.nonAccessibleBlockCollection = [[NSMutableArray alloc]init];
NonAccessibleBlock *lunchHours = [NonAccessibleBlock new];
lunchHours.startHour = 13;
lunchHours.endHour = 14;
lunchHours.text = @"LUNCH";
[dayViewSettings.nonAccessibleBlockCollection addObject:lunchHours];
//setting label size and format properties
DayLabelSettings *labelSettings = [DayLabelSettings new];
labelSettings.timeLabelSize = 8;
labelSettings.dateLabelSize = 25;
labelSettings.dateLabelFormat = @"dd/MM/yy";
labelSettings.dayLabelFormat = @" - EEEE";
labelSettings.timeLabelFormat = @"hh a";
dayViewSettings.labelSettings = labelSettings;
schedule.dayViewSettings = dayViewSettings;

SWIFT
schedule.scheduleView = SFScheduleView.Day;
var dayViewSettings: DayViewSettings = DayViewSettings.new()
dayViewSettings.workStartHour = 10
dayViewSettings.workEndHour = 18
dayViewSettings.showAllDay = true
dayViewSettings.nonAccessibleBlockCollection = NSMutableArray()
var lunchHours: NonAccessibleBlock = NonAccessibleBlock.new()
lunchHours.startHour = 13
lunchHours.endHour = 14
lunchHours.text = "LUNCH"
dayViewSettings.nonAccessibleBlockCollection.addObject(lunchHours)
var labelSettings: DayLabelSettings = DayLabelSettings.new()
labelSettings.timeLabelSize = 8
labelSettings.dateLabelSize = 25
labelSettings.dateLabelFormat = "dd/MM/yy"
labelSettings.dayLabelFormat = " - EEEE"
labelSettings.timeLabelFormat = "hh a"
dayViewSettings.labelSettings = labelSettings
schedule.dayViewSettings = dayViewSettings

Copyright 2001 - 2016 Syncfusion Inc.

362

SfSchedule

Views

17.5.2 Week View


To view all the seven days of a particular week, by default if will be current week.Appointments
arranged in timeslots based on its duration with respective day of the week.
OBJECTIVE-C
//setting schedule view
schedule.scheduleView = SFScheduleViewWeek;

SWIFT
schedule.scheduleView = SFScheduleView.Week;

Copyright 2001 - 2016 Syncfusion Inc.

363

SfSchedule

Views

17.5.2.1 Settings
17.5.2.1.1 Date Time Formating
You can format the date and time string in the schedule control using WeekLabelSettings of
WeekViewSettings and the size of those strings are also customizable.
17.5.2.1.2 Non-Accessible Blocks
You can restrict/allocate certain timeslot as Non-accessible block using NonAccessibleBlocks of
WeekViewSettings, so that you can allocate those timeslots for predefined events/activities like Lunch
hour.
17.5.2.1.3 Working Hours
You can differentiate working hours with non-working hour timeslots by its color using WorkStartHour
and WorkEndHour properties of WeekViewSettings.
17.5.2.1.4 All Day Appointments Panel
You can view All day appointments in separate panel and the panels visibility can be enabled by setting
ShowAllDay property of WeekViewSettings as true.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

364

SfSchedule

Views

//settings day view settings properties


WeekViewSettings *viewSettings = [WeekViewSettings new];
viewSettings.workStartHour = 10;
viewSettings.workEndHour = 18;
viewSettings.showAllDay = true;
//setting non-accessing blocks.
viewSettings.nonAccessibleBlockCollection = [[NSMutableArray alloc]init];
NonAccessibleBlock *lunchHours = [NonAccessibleBlock new];
lunchHours.startHour = 13;
lunchHours.endHour = 14;
lunchHours.text = @"LUNCH";
[viewSettings.nonAccessibleBlockCollection addObject:lunchHours];
//setting label size and format properties
WeekLabelSettings *labelSettings = [WeekLabelSettings new];
labelSettings.timeLabelSize = 8;
labelSettings.dateLabelSize = 12;
labelSettings.dayLabelSize = 7;
labelSettings.dateLabelFormat = @"dd";
labelSettings.dayLabelFormat = @"eeee";
labelSettings.timeLabelFormat = @"hh a";
viewSettings.labelSettings = labelSettings;
schedule.weekViewSettings = viewSettings;

SWIFT
var viewSettings: WeekViewSettings = WeekViewSettings.new()
viewSettings.workStartHour = 10
viewSettings.workEndHour = 18
viewSettings.showAllDay = true
viewSettings.nonAccessibleBlockCollection = NSMutableArray()
var lunchHours: NonAccessibleBlock = NonAccessibleBlock.new()
lunchHours.startHour = 13
lunchHours.endHour = 14
lunchHours.text = "LUNCH"
viewSettings.nonAccessibleBlockCollection.addObject(lunchHours)
var labelSettings: WeekLabelSettings = WeekLabelSettings.new()
labelSettings.timeLabelSize = 8
labelSettings.dateLabelSize = 12
labelSettings.dayLabelSize = 7
labelSettings.dateLabelFormat = "dd"
labelSettings.dayLabelFormat = "eeee"
labelSettings.timeLabelFormat = "hh a"
viewSettings.labelSettings = labelSettings
schedule.weekViewSettings = viewSettings

Copyright 2001 - 2016 Syncfusion Inc.

365

SfSchedule

Views

17.5.3 Work Week View


To view working days of a particular week, by default current work week will be displayed. Saturday and
Sunday are the non-working days by default; it can be customized with any days in a week.
Appointments arranged in timeslots based on its duration with respective day of the week.
OBJECTIVE-C
//setting schedule view
schedule.scheduleView = SFScheduleViewWorkWeek;

SWIFT
schedule.scheduleView = SFScheduleView.WorkWeek;

Copyright 2001 - 2016 Syncfusion Inc.

366

SfSchedule

Views

17.5.3.1 Settings
17.5.3.1.1 Date Time Formating
You can format the date and time string in the schedule control using WorkWeekLabelSettings of
WorkWeekViewSettings and the size of those strings are also customizable.
17.5.3.1.2 Non-Accessible Blocks
You can restrict/allocate certain timeslot as Non-accessible block using NonAccessibleBlocks of
WorkWeekViewSettings, so that you can allocate those timeslots for predefined events/activities like
Lunch hour.
17.5.3.1.3 Working Hours
You can differentiate working hours with non-working hour timeslots by its color using WorkStartHour
and WorkEndHour properties of WorkWeekViewSettings.
17.5.3.1.4 All Day Appointments Panel
You can view All day appointments in separate panel and the panels visibility can be enabled by setting
ShowAllDay property of WorkWeekViewSettings as true.
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

367

SfSchedule

Views

//settings day view settings properties


WorkWeekViewSettings *viewSettings = [WorkWeekViewSettings new];
viewSettings.workStartHour = 10;
viewSettings.workEndHour = 18;
viewSettings.showAllDay = true;
//setting non-accessing blocks.
viewSettings.nonAccessibleBlockCollection = [[NSMutableArray alloc]init];
NonAccessibleBlock *lunchHours = [NonAccessibleBlock new];
lunchHours.startHour = 13;
lunchHours.endHour = 14;
lunchHours.text = @"LUNCH";
[viewSettings.nonAccessibleBlockCollection addObject:lunchHours];
//setting label size and format properties
WorkWeekLabelSettings *labelSettings = [WorkWeekLabelSettings new];
labelSettings.timeLabelSize = 8;
labelSettings.dateLabelSize = 12;
labelSettings.dayLabelSize = 7;
labelSettings.dateLabelFormat = @"dd";
labelSettings.dayLabelFormat = @"eeee";
labelSettings.timeLabelFormat = @"hh a";
viewSettings.labelSettings = labelSettings;
schedule.workWeekViewSettings = viewSettings;

SWIFT
var viewSettings: WorkWeekViewSettings = WorkWeekViewSettings.new()
viewSettings.workStartHour = 10
viewSettings.workEndHour = 18
viewSettings.showAllDay = true
viewSettings.nonAccessibleBlockCollection = NSMutableArray()
var lunchHours: NonAccessibleBlock = NonAccessibleBlock.new()
lunchHours.startHour = 13
lunchHours.endHour = 14
lunchHours.text = "LUNCH"
viewSettings.nonAccessibleBlockCollection.addObject(lunchHours)
var labelSettings: WorkWeekLabelSettings = WorkWeekLabelSettings.new()
labelSettings.timeLabelSize = 8
labelSettings.dateLabelSize = 12
labelSettings.dayLabelSize = 7
labelSettings.dateLabelFormat = "dd"
labelSettings.dayLabelFormat = "eeee"
labelSettings.timeLabelFormat = "hh a"
viewSettings.labelSettings = labelSettings
schedule.workWeekViewSettings = viewSettings

Copyright 2001 - 2016 Syncfusion Inc.

368

SfSchedule

Views

17.5.4 Month View


To view entire dates of a particular month, by default current month will be displayed initially.
Appointments arranged within the cell based on its duration. Current date is differentiated by some
color and rest of the dates in a month will be in different color., Also the color differentiation for dates
will be applicable for previous and next month dates.
OBJECTIVE-C
//setting schedule view
schedule.scheduleView = SFScheduleViewMonth;

SWIFT
schedule.scheduleView = SFScheduleView.Month;

Copyright 2001 - 2016 Syncfusion Inc.

369

SfSchedule

Views

17.5.4.1 Settings
17.5.4.1.1 Date Time Formating
You can format the date and time string in the schedule control using MonthLabelSettings of
MonthViewSettings and the size of those strings are also customizable.
17.5.4.1.2 Blackout dates
You can restrict/allocate certain month cell as blackout days using BlackoutDates of MonthViewSettings,
so that we can allocate those cells for predefined events/activities like Scheduled maintenance, planned
leave etc.
17.5.4.1.3 Week number
You display the week number of the year in month view by setting showWeekNumber in
property of MonthViewSettings are true. By default it is false.
17.5.4.1.4 Visible AppointmentCount
You can customize the number of appointments to be rendered inside a month view cell using
VisibleCellAppointmentsCount property of MonthViewSettings
OBJECTIVE-C

Copyright 2001 - 2016 Syncfusion Inc.

370

SfSchedule

Views

//settings day view settings properties


MonthViewSettings *viewSettings = [MonthViewSettings new];
viewSettings.showWeekNumber = true;
viewSettings.showAppointmentsInline = true;
//setting blackout dates
NSDateComponents *components = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:schedule.visibleDates[schedule.visibleDates.count/2]];
components.day -= 3;
viewSettings.blackoutDates =[[NSMutableArray alloc]init];
for (int i=0; i<3; i++) {
components.day += 1;
[viewSettings.blackoutDates addObject:[schedule.calendar
dateFromComponents:components]];
}
//setting label size and format properties
MonthLabelSettings *labelSettings = [MonthLabelSettings new];
labelSettings.dayLabelSize = 10;
labelSettings.dayLabelFormat = @"EEE";
labelSettings.dateLabelFormat = @"d";
labelSettings.dateLabelSize = 12;
viewSettings.labelSettings = labelSettings;
schedule.monthViewSettings = viewSettings;

SWIFT
var viewSettings: MonthViewSettings = MonthViewSettings.new()
viewSettings.showWeekNumber = true
viewSettings.showAppointmentsInline = true
var components: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate:
schedule.visibleDates[schedule.visibleDates.count / 2])
components.day -= 3
viewSettings.blackoutDates = NSMutableArray()
for var i = 0; i < 3; i++ {
components.day += 1
viewSettings.blackoutDates.addObject(schedule.calendar.dateFromComponents(co
mponents))
}
var labelSettings: MonthLabelSettings = MonthLabelSettings.new()
labelSettings.dayLabelSize = 10
labelSettings.dayLabelFormat = "EEE"
labelSettings.dateLabelFormat = "d"
labelSettings.dateLabelSize = 12
viewSettings.labelSettings = labelSettings
schedule.monthViewSettings = viewSettings

Copyright 2001 - 2016 Syncfusion Inc.

371

SfSchedule

Recurrence

17.6 Recurrence
Recursive appointments can be created by enabling isRecursive property in Schedule appointments, to
know more about adding appointments in the control, refer ScheduleAppointment
And then need to set the RecurrenceRule to populate the required recursive appointment collection in a
specific pattern.
Recursive appointment can be created in any recurrence patterns, for instance, some events can be
repeated every week such as Server maintanance, where as some on them may repeat every year like
wedding anniversary.

17.6.1 Recurrence Pattern


Recurrence pattern used in the control are in iCal standard
Schedule control supports all four types of recurrence patterns.
Daily Recurrence
Weekly Recurrence
Monthly Recurrence
Yearly Recurrence

Copyright 2001 - 2016 Syncfusion Inc.

372

SfSchedule

Recurrence

17.6.2 RRule generator


RecurreceGenerator/ recurrence builder is available with the control to create RRule. RRule can be
easily created through this engine by simple APIs available. The generated RRule need to be assigned to
the appointments recurrenceRule property.
OBJECTIVE-C
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];
// assigning start date
NSDate * date =[NSDate date];
NSDateComponents *startDate_components_clientMeeting = [[NSCalendar
currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components_clientMeeting.minute = 0;
startDate_components_clientMeeting.second = 0;
startDate_components_clientMeeting.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components_clientMeeting];
//assigning end date
NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//creating schedule appointments
ScheduleAppointment *clientMeeting= [ScheduleAppointment new];
clientMeeting.startTime = startDate;
clientMeeting.endTime = endDate;
clientMeeting.subject = @"Client Meeting";
//assinging RFC stardard recurring rule.
clientMeeting.recurrenceRule = @"FREQ=DAILY;INTERVAL=2;COUNT=25";
clientMeeting.isRecursive = true;
clientMeeting.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:clientMeeting];
schedule.appointments = appCollection;
[self.view addSubview: schedule];

SWIFT
var appCollection: [AnyObject] = NSMutableArray.new()
var date: NSDate = NSDate.date()
var startDate_components_clientMeeting: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components_clientMeeting.minute = 0
startDate_components_clientMeeting.second = 0
startDate_components_clientMeeting.hour = 10
var startDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(startDate_components_clientM
eeting)

Copyright 2001 - 2016 Syncfusion Inc.

373

SfSchedule

Recurrence

var endDateComponents: NSDateComponents =


NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
var clientMeeting: ScheduleAppointment = ScheduleAppointment.new()
clientMeeting.startTime = startDate
clientMeeting.endTime = endDate
clientMeeting.subject = "Client Meeting"
clientMeeting.recurrenceRule = "FREQ=DAILY;INTERVAL=2;COUNT=25"
clientMeeting.isRecursive = true
clientMeeting.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)
appCollection.addObject(clientMeeting)
schedule.appointments = appCollection
self.view.addSubview(schedule)

Copyright 2001 - 2016 Syncfusion Inc.

374

SfSchedule

Localization & Globalization

17.7 Localization & Globalization


Schedule control is available with complete localisation support .
Localization can be specified by setting the Locale property of the control. In the format of Language
code followed by Country code. Based on the locale specified the strings in the control such as Date,
time, days are localised accordingly.
By default schedule control is available with en-US locale.
As the subject of the appointments are given in the application level, it can be set as localised strings as
per the requirement. To know more about settings the subject refer ScheduleAppointment
OBJECTIVE-C
//setting french locale
[schedule setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"fr-FR"]];

SWIFT
schedule.setLocale(NSLocale(localeIdentifier: "fr-FR"))

Copyright 2001 - 2016 Syncfusion Inc.

375

SfSchedule

Localization & Globalization

17.7.1 Schedule Custom String Localization


Schedule has a built in support for localizing the Custom Strings in it by specifying the corresponding
strings key and value in the Localizable.strings in the application. For an example in schedule there is a
string No Events in Schedule Month View Inline. To localize the string, specify the key (No Events)
and assign the corresponding localized string to it in Localizable.strings file. Please refer the following
code for French language.
OBJECTIVE-C
"No Events" = "Aucun vnement";

SWIFT
"No Events" = "Aucun vnement";

Schedule search for the key in corresponding language Localizable.strings file and displays the
corresponding string in the schedule.

Copyright 2001 - 2016 Syncfusion Inc.

376

SfSchedule

Appearance & Styling

17.8 Appearance & Styling


17.8.1 Cell Customization
Schedule views are designed as per the native calendar control with some enriched user interface for
the control interaction and usability. Month view cell contains the date along with its appointments if
available. There is an option available in Schedule control to change the default UI of Month View cell.
By adopting <SFScheduleDelegate> protocol and using scheduleMonthCell to render custom UI for
month view cell.
OBJECTIVE-C
//adopting protocol
@interface ViewController () <SFScheduleDelegate>
@end
@implementation ViewController
SFSchedule *schedule;
- (void)viewDidLoad {
[super viewDidLoad];
if (self) {
// specifing delegate for schedule
schedule.delegate = self;
//setting schedule view
schedule.scheduleView = SFScheduleViewMonth ;
[self.view addSubview: schedule];
}
}
// Assigning custom UI for month cel
-(SFMonthDayView*)scheduleMonthCell:(SFSchedule *)schedule
{
return [[CustomMonthDayCell alloc] init];
}

SWIFT
class ViewController {
var schedule: SFSchedule
func viewDidLoad() {
super.viewDidLoad()
if self {
schedule.delegate = self
schedule.scheduleView = SFScheduleView.Month;
self.view.addSubview(schedule)
}
}
func scheduleMonthCell(schedule: SFSchedule) -> SFMonthDayView {
return CustomMonthDayCell()
}
}

Creating required custom UI to assign the month view cell.


OBJECTIVE-C
#import "CustomMonthDayCell.h"
@implementation CustomMonthDayCell
{

Copyright 2001 - 2016 Syncfusion Inc.

377

SfSchedule

Appearance & Styling

__strong NSDateComponents *today;


}
-(void)drawRect:(CGRect)rect {
today =[[NSCalendar currentCalendar] components:(NSCalendarUnitDay |
NSCalendarUnitWeekday| NSCalendarUnitYear |
NSCalendarUnitMonth) fromDate:[NSDate date]];
[self drawAllBorders];
[self addAppointments];
[self addDayNumber];
}
- (void)drawAllBorders {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 0.5);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
//drawing right border
CGContextMoveToPoint(context, self.bounds.size.width, 0);
CGContextAddLineToPoint(context, self.bounds.size.width,
self.bounds.size.height);
CGContextStrokePath(context);
CGContextRestoreGState(context);
CGContextSetLineWidth(context, 0.5);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
//drawing bottom border
CGContextMoveToPoint(context, self.bounds.size.width,
self.bounds.size.height);
CGContextAddLineToPoint(context, 0, self.bounds.size.height);
CGContextStrokePath(context);
CGContextRestoreGState(context);
CGContextSetLineWidth(context, 0.5);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
//drawing left border
CGContextMoveToPoint(context, 0, self.bounds.size.height);
CGContextAddLineToPoint(context, 0, 0);
CGContextStrokePath(context);
CGContextRestoreGState(context);
CGContextSetLineWidth(context, 0.5);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
//drawing left border
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, self.bounds.size.width, 0);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}
- (void)addAppointments {
double xPosition=0;
double yPosition=20;
for (ScheduleAppointment *app in self.visibleAppointments) {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 1.0);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context,
app.appointmentBackground.CGColor);
CGContextSetFillColorWithColor(context,app.appointmentBackground.CGColor);

Copyright 2001 - 2016 Syncfusion Inc.

378

SfSchedule

Appearance & Styling

CGRect rect=CGRectMake(xPosition,yPosition , 20, 5);


CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
CGContextRestoreGState(context);
CGContextSetLineWidth(context, 1.0);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context,
app.appointmentBackground.CGColor);
CGContextSetFillColorWithColor(context,app.appointmentBackground.CGColor);
yPosition +=7;
if(yPosition > self.frame.size.height)
{
yPosition = self.frame.size.height-10;
}
}
}
- (void)addDayNumber {
NSString *labelText = [NSString stringWithFormat:@"%ld",
(long)self.day.day];
UIFont *textFont = [UIFont systemFontOfSize:17.0];
UIColor *textColor=[UIColor blackColor];
NSInteger presentDay=self.day.day;
NSInteger presentMonth=self.day.month;
NSInteger presentYear=self.day.year;
if (!self.isInCurrentMonth)
{
textColor = [UIColor lightGrayColor];
}
if( presentDay== today.day && presentMonth == today.month && presentYear==
today.year)
{
textColor = [UIColor blueColor];
}
if(self.isSelected)
{
textColor = [UIColor brownColor];
}
CGSize textSize = [labelText sizeWithAttributes:@{ NSFontAttributeName
:textFont}];
CGRect textRect = CGRectMake(ceilf(self.bounds.size.width (textSize.width)-5), ceilf(textSize.height/2), textSize.width,
textSize.height);
[labelText drawInRect:textRect withAttributes:@{ NSFontAttributeName
:textFont, NSForegroundColorAttributeName :textColor}];
}
@end

SWIFT
class CustomMonthDayCell {
func drawRect(rect: CGRect) {
today = NSCalendar.currentCalendar().components((NSCalendarUnitDay |
NSCalendarUnitWeekday | NSCalendarUnitYear | NSCalendarUnitMonth), fromDate:
NSDate.date())
self.drawAllBorders()
self.addAppointments()

Copyright 2001 - 2016 Syncfusion Inc.

379

SfSchedule

Appearance & Styling

self.addDayNumber()
}
func drawAllBorders() {
var context: CGContextRef = UIGraphicsGetCurrentContext()
CGContextSetLineWidth(context, 0.5)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, UIColor.lightGrayColor().CGColor)
CGContextMoveToPoint(context, self.bounds.size.width, 0)
CGContextAddLineToPoint(context, self.bounds.size.width,
self.bounds.size.height)
CGContextStrokePath(context)
CGContextRestoreGState(context)
CGContextSetLineWidth(context, 0.5)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, UIColor.lightGrayColor().CGColor)
CGContextMoveToPoint(context, self.bounds.size.width,
self.bounds.size.height)
CGContextAddLineToPoint(context, 0, self.bounds.size.height)
CGContextStrokePath(context)
CGContextRestoreGState(context)
CGContextSetLineWidth(context, 0.5)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, UIColor.lightGrayColor().CGColor)
CGContextMoveToPoint(context, 0, self.bounds.size.height)
CGContextAddLineToPoint(context, 0, 0)
CGContextStrokePath(context)
CGContextRestoreGState(context)
CGContextSetLineWidth(context, 0.5)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, UIColor.lightGrayColor().CGColor)
CGContextMoveToPoint(context, 0, 0)
CGContextAddLineToPoint(context, self.bounds.size.width, 0)
CGContextStrokePath(context)
CGContextRestoreGState(context)
}
func addAppointments() {
var xPosition: Double = 0
var yPosition: Double = 20
for app: ScheduleAppointment in self.visibleAppointments {
var context: CGContextRef = UIGraphicsGetCurrentContext()
CGContextSetLineWidth(context, 1.0)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, app.appointmentBackground.CGColor)
CGContextSetFillColorWithColor(context, app.appointmentBackground.CGColor)
var rect: CGRect = CGRectMake(xPosition, yPosition, 20, 5)
CGContextFillRect(context, rect)
CGContextStrokeRect(context, rect)
CGContextRestoreGState(context)
CGContextSetLineWidth(context, 1.0)
CGContextSaveGState(context)
CGContextSetStrokeColorWithColor(context, app.appointmentBackground.CGColor)
CGContextSetFillColorWithColor(context, app.appointmentBackground.CGColor)
yPosition += 7
if yPosition > self.frame.size.height {
yPosition = self.frame.size.height - 10
}
}

Copyright 2001 - 2016 Syncfusion Inc.

380

SfSchedule

Appearance & Styling

}
func addDayNumber() {
var labelText: String = "\(self.day.day)"
var textFont: UIFont = UIFont.systemFontOfSize(17.0)
var textColor: UIColor = UIColor.blackColor()
var presentDay: Int = self.day.day
var presentMonth: Int = self.day.month
var presentYear: Int = self.day.year
if !self.isInCurrentMonth {
textColor = UIColor.lightGrayColor()
}
if presentDay == today.day && presentMonth == today.month && presentYear ==
today.year {
textColor = UIColor.blueColor()
}
if self.isSelected {
textColor = UIColor.brownColor()
}
var textSize: CGSize = labelText.sizeWithAttributes([NSFontAttributeName:
textFont])
var textRect: CGRect = CGRectMake(ceilf(self.bounds.size.width (textSize.width) - 5), ceilf(textSize.height / 2), textSize.width,
textSize.height)
labelText.drawInRect(textRect, withAttributes: [NSFontAttributeName:
textFont, NSForegroundColorAttributeName: textColor])
}
}

Copyright 2001 - 2016 Syncfusion Inc.

381

SfSchedule

Appearance & Styling

17.8.2 Appointment Customization.


ScheduleAppointment created in schedule are arranged based on its duration, where the appointments
viewed through day, week and work week view are positioned in the timeslots. Default UI of the
appointments in day, week and work week view can be changed by adopting <SFScheduleDelegate>
protocol using scheduleDayAppointment to render custon UI for Appointments.
OBJECTIVE-C
//adopting protocol
@interface ViewController () <SFScheduleDelegate>
@end
@implementation ViewController
SFSchedule *schedule;
- (void)viewDidLoad {
[super viewDidLoad];
if (self) {
schedule.delegate = self;
//setting schedule view
schedule.scheduleView = SFScheduleViewDay;
//creating appointment collection
NSMutableArray *appCollection=[NSMutableArray new];

Copyright 2001 - 2016 Syncfusion Inc.

382

SfSchedule

Appearance & Styling

NSDate * date =[NSDate date];


//start date
NSDateComponents *startDate_components = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
startDate_components.minute = 0;
startDate_components.second = 0;
startDate_components.hour = 10 ;
NSDate *startDate = [[NSCalendar currentCalendar]
dateFromComponents:startDate_components];
//end date
NSDateComponents *endDateComponents = [[NSCalendar currentCalendar]
components:NSCalendarUnitYear|NSCalendarUnitMonth|NSCalendarUnitDay
fromDate:date];
endDateComponents.minute = 0;
endDateComponents.second = 0;
endDateComponents.hour = 12 ;
NSDate *endDate = [[NSCalendar currentCalendar]
dateFromComponents:endDateComponents];
//adding schedule appointment
ScheduleAppointment *birthday_event= [ScheduleAppointment new];
birthday_event.startTime = startDate;
birthday_event.endTime = endDate;
birthday_event.subject = @"Jeni's B'Day Celebration";
birthday_event.appointmentBackground = [UIColor colorWithRed:0.106
green:0.631 blue:0.886 alpha:1.0];
[appCollection addObject:birthday_event];
schedule.appointments = appCollection;
[self.view addSubview: schedule];
}
}
// Assigning custom UI for schedule appointment
-(SFDayAppointment*)scheduleDayAppointment:(SFSchedule*)schedule
{
return [[CustomDayAppointment alloc] init];
}
@end

SWIFT
class ViewController {
var schedule: SFSchedule
func viewDidLoad() {
super.viewDidLoad()
if self {
schedule.delegate = self
schedule.scheduleView = SFScheduleView.Day;
var appCollection: [AnyObject] = NSMutableArray.new()
var date: NSDate = NSDate.date()
var startDate_components: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
startDate_components.minute = 0
startDate_components.second = 0
startDate_components.hour = 10

Copyright 2001 - 2016 Syncfusion Inc.

383

SfSchedule

Appearance & Styling

var startDate: NSDate =


NSCalendar.currentCalendar().dateFromComponents(startDate_components)
var endDateComponents: NSDateComponents =
NSCalendar.currentCalendar().components(NSCalendarUnitYear |
NSCalendarUnitMonth | NSCalendarUnitDay, fromDate: date)
endDateComponents.minute = 0
endDateComponents.second = 0
endDateComponents.hour = 12
var endDate: NSDate =
NSCalendar.currentCalendar().dateFromComponents(endDateComponents)
var birthday_event: ScheduleAppointment = ScheduleAppointment.new()
birthday_event.startTime = startDate
birthday_event.endTime = endDate
birthday_event.subject = "Jeni's B'Day Celebration"
birthday_event.appointmentBackground = UIColor.colorWithRed(0.106, green:
0.631, blue: 0.886, alpha: 1.0)
appCollection.addObject(birthday_event)
schedule.appointments = appCollection
self.view.addSubview(schedule)
}
}
func scheduleDayAppointment(schedule: SFSchedule) -> SFDayAppointment {
return CustomDayAppointment()
}
}

Creating custom UI to assign for schedule appointment.


OBJECTIVE-C
#import "CustomDayAppointment.h"
static UIImage *hospitalImage;
static UIImage *bDayImage;
static UIImage *businessImage;
@interface CustomDayAppointment ()
@property (nonatomic, weak) UIImage *appointmentImage;
@end
@implementation CustomDayAppointment
+ (void)initialize
{
hospitalImage = [UIImage imageNamed:@"Hospital"];
hospitalImage = [hospitalImage
resizableImageWithCapInsets:UIEdgeInsetsMake(4, 4, 4, 4)
resizingMode:UIImageResizingModeStretch];
bDayImage = [UIImage imageNamed:@"family"];
bDayImage = [bDayImage resizableImageWithCapInsets:UIEdgeInsetsMake(4, 4, 4,
4) resizingMode:UIImageResizingModeStretch];
businessImage = [UIImage imageNamed:@"Team"];
businessImage = [businessImage
resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)
resizingMode:UIImageResizingModeStretch];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {

Copyright 2001 - 2016 Syncfusion Inc.

384

SfSchedule

Appearance & Styling

}
return self;
}
- (instancetype)init
{
self = [super init];
if (self) {
}
return self;
}
- (void)drawRect:(CGRect)rect {
if([self.data.subject isEqual:@"Checkup"])
{
self.appointmentImage = hospitalImage;
[self.appointmentImage drawInRect:CGRectMake(rect.origin.x + 5,
rect.origin.y+50, 49, 41)];
}
else
{
self.appointmentImage = bDayImage;
[self.appointmentImage drawInRect:CGRectMake(rect.origin.x + 5,
rect.origin.y+50, 60, 35)];
}
[super drawRect:rect];
}
@end

SWIFT
static var hospitalImage: UIImage
static var bDayImage: UIImage
static var businessImage: UIImage
class CustomDayAppointment {
class func initialize() {
hospitalImage = UIImage.imageNamed("Hospital")
hospitalImage =
hospitalImage.resizableImageWithCapInsets(UIEdgeInsetsMake(4, 4, 4, 4),
resizingMode: UIImageResizingModeStretch)
bDayImage = UIImage.imageNamed("family")
bDayImage = bDayImage.resizableImageWithCapInsets(UIEdgeInsetsMake(4, 4, 4,
4), resizingMode: UIImageResizingModeStretch)
businessImage = UIImage.imageNamed("Team")
businessImage =
businessImage.resizableImageWithCapInsets(UIEdgeInsetsMake(12, 12, 12, 12),
resizingMode: UIImageResizingModeStretch)
}
init(frame: CGRect) {
self = super(frame: frame)
if self {
}
return self
}
init() {
self = super()
if self {
}

Copyright 2001 - 2016 Syncfusion Inc.

385

SfSchedule

Appearance & Styling

return self
}
func drawRect(rect: CGRect) {
if self.data.subject.isEqual("Checkup") {
self.appointmentImage = hospitalImage
self.appointmentImage.drawInRect(CGRectMake(rect.origin.x + 5, rect.origin.y
+ 50, 49, 41))
}
else {
self.appointmentImage = bDayImage
self.appointmentImage.drawInRect(CGRectMake(rect.origin.x + 5, rect.origin.y
+ 50, 60, 35))
}
super.drawRect(rect)
}
}

Copyright 2001 - 2016 Syncfusion Inc.

386

SfTreeMap

Overview

18 SfTreeMap
18.1 Overview
Essential TreeMap for iOS is ideal for visualizing large amounts of data. TreeMap holds a set of nested
nodes to display hierarchical data.
Each nested node contains sub-nodes comprising of area proportional to a specified data value
bounded. Color and annotation can be
used to provide extra information about the leaf nodes. Essential TreeMap is a perfect solution for
developers looking to add advanced,
feature rich TreeMap to their applications.

18.1.1 Key Features


Levels - TreeMap levels are used to define levels of various flat data and hierarchical data
collection.
Layout - Layouts such as Squarified, SliceAndDiceAuto, SliceAndDiceHorizontal and
SliceAndDiceVertical determine the visual representation
of nodes belonging to all the TreeMap levels in TreeMap.
Visualization for Colors - Easy customization options are provided to customize the colors of the
leaf nodes of TreeMap.

18.1.2 Use Case Scenarios


TreeMap is used to represent large or complex data sets in various applications, such as:
Stock market analysis where the weight of each stock in the index is represented by the size of
the rectangle and its range of loss or gain
is represented by the color of the rectangle.
Visualizing internet usage in certain categories, such as retail, social networks, and search.
Categorizing the news aggregated by Google News where the colors represent different
sections, such as business or politics, and the size of
the boxes represent how many similar stories appear in Google News.
Indicating weather report analysis around the world. The opacity of each rectangle can differ
based on its humidity.

18.2 Getting Started


18.2.1 Create your first TreeMap in Objective C
You can configure an iOSTreeMap in simple steps. In this section, you can learn how to configure a
TreeMap control in a real-time
scenario where it is used to visually represent the percentage of population growth in each continent. It
also provides a walk-through on some of the customization features available in TreeMap control

Copyright 2001 - 2016 Syncfusion Inc.

387

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

388

SfTreeMap

Getting Started

Percentage of population growth in each continent


18.2.1.1 Add Framework reference to the project
Refer to this section in the following link for the framework of your project.
http://help.syncfusion.com/ios/introduction/installation-and-deployment
18.2.1.2 Initialize the TreeMap
Create a TreeMap object in the View Controller and add TreeMap as subview in viewdidload override
method.
You can create a TreeMap object by using the following code example.
C
- (void)viewDidLoad {
[super viewDidLoad];
tree = [[SFTreeMap alloc] initWithFrame:self.view.frame];
[self.view addSubview:tree];
}

18.2.1.3 Populate DataSource


The dataSource property accepts the collection values as input. For example, you can provide the list of
objects as input.
18.2.1.4 Weight Value Path
You can calculate the size of the object by using weightValuePath of the TreeMap.
Populate the TreeMap data as the List of object. For example, you can use population data of countries
to generate TreeMap data as
illustrated in the following code example.
C
[PopulationData.h]
@interface PopulationData : NSObject
@property (nonatomic,readwrite,assign) NSString * Name;
@property (nonatomic,readwrite,assign) NSString * Continent;
-(instancetype)initWithClass:(NSString*) continent name:(NSString*) name
growth:
(CGFloat) growth population:(CGFloat) population;@property
(nonatomic,readwrite,assign) CGFloat Population;
@property (nonatomic,readwrite,assign) CGFloat Growth;
@end
[PopulationData.m]
@implementation PopulationData
-(instancetype)initWithClass:(NSString*) continent name:(NSString*) name
growth:
(CGFloat)growth population:(CGFloat)population{
self= [super init];
_Continent= continent;
_Name= name;
_Growth= growth;
_Population=population;
return self;
}
-(instancetype) init{

Copyright 2001 - 2016 Syncfusion Inc.

389

SfTreeMap

Getting Started

return self;
}
@end
[ViewController.m]
- (void)viewDidLoad {
[super viewDidLoad];
tree = [[SFTreeMap alloc] initWithFrame:self.view.frame];
tree.weightValuePath = @"Population";
tree.dataSource = [self addPopulationData];
[self.view addSubview:tree];
}
-(NSMutableArray*) addPopulationData{
NSMutableArray * array= [NSMutableArray array];
[array addObject:[[PopulationData alloc] initWithClass:@"Asia"
name:@"Indonesia" growth: 3 population: 237641326 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Asia"
name:@"Russia" growth: 2 population: 152518015 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"North America"
name:@"United States" growth: 4 population: 315645000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"North America"
name:@"Mexico" growth: 2 population: 112336538 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"South America"
name:@"Colombia" growth: 1 population: 47000000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"South America"
name:@"Brazil" growth: 3 population: 193946886 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Africa"
name:@"Nigeria" growth: 2 population: 170901000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Africa"
name:@"Egypt" growth: 1 population: 83661000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Europe"
name:@"Germany" growth: 1 population: 81993000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Europe"
name:@"France" growth: 1 population: 65605000 ]];
[array addObject:[[PopulationData alloc] initWithClass:@"Europe" name:@"UK"
growth: 1 population: 63181775 ]];
return array;}

The following screenshot displays the TreeMap control that is rendered after running the above code
example. The control is rendered
with the default properties.

Copyright 2001 - 2016 Syncfusion Inc.

390

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

391

SfTreeMap

Getting Started

TreeMap control
18.2.1.5 Group TreeMap Items by using Levels
You can group TreeMap Items by using levels in the TreeMap.
18.2.1.5.1 1. Group Path
You can use groupPath property for every flat level of the TreeMap control. It is a path to a field on the
source object that serves as the Group for the level specified. You can also group the data based on the
groupPath in the TreeMap control. When the groupPath is not specified, then the items are not grouped
and the data is displayed in the order specified in the DataSource.
18.2.1.5.2 2. Group Gap
You can use groupGap property to separate the items from every flat level and to differentiate the levels
mentioned in the TreeMap control.
The following code example explains how to group TreeMap Items by using Levels.
C
- (void)viewDidLoad {
[super viewDidLoad];
tree = [[SFTreeMap alloc] initWithFrame:self.view.frame];
tree.weightValuePath = @Population";
tree.dataSource = [self addPopulationData];
SFTreeMapFlatLevel * level= [[SFTreeMapFlatLevel alloc]init];
level.groupPath=@"Continent";
level.showHeader=true;
level.headerStyle.color= [UIColor grayColor];
[tree.levels addObject:level];
[self.view addSubview:tree];
}

The following screenshot displays grouping of TreeMapItems by using Levels.

Copyright 2001 - 2016 Syncfusion Inc.

392

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

393

SfTreeMap

Getting Started

Grouping TreeMap Items by using Levels


18.2.1.6 Customize TreeMap Appearance by Range
You can differentiate the nodes based on its value and color ranges by using Range color. You can also
define the color value range
by using from and to properties.
18.2.1.6.1 Color Value Path
The colorValuePath of TreeMap is a path to a field on the source object. You can determine the color for
the object by
using colorValuePath of TreeMap.
The following code example explains how to customize TreeMap appearance by using Range.
C
- (void)viewDidLoad {
[super viewDidLoad];
//..
tree.colorValuePath = @"Growth";
SFRangeColorMapping * ranges= [[SFRangeColorMapping alloc]init];
SFRange * range1= [[SFRange alloc]init];
range1.from= 0;
range1.to= 1;
range1.legendLabel= @"1% Growth";
range1.color=[UIColor colorWithRed:0.467 green:0.847 blue:0.847 alpha:1];
SFRange * range2= [[SFRange alloc]init];
range2.from= 0;
range2.to= 2;
range2.legendLabel= @"2% Growth";
range2.color=[UIColor colorWithRed:0.682 green:0.851 blue:0.376 alpha:1];
SFRange * range3= [[SFRange alloc]init];
range3.from= 0;
range3.to= 3;
range3.legendLabel= @"3% Growth";
range3.color=[UIColor colorWithRed:1 green:0.686 blue:0.318 alpha:1];
SFRange * range4= [[SFRange alloc]init];
range4.from= 0;
range4.to= 4;
range4.legendLabel= @"4% Growth";
range4.color=[UIColor colorWithRed:0.953 green:0.824 blue:0.251 alpha:1];
ranges.ranges= [NSMutableArray array];
[ranges.ranges addObject:range1];
[ranges.ranges addObject:range2];
[ranges.ranges addObject:range3];
[ranges.ranges addObject:range4];
tree.leafItemColorMapping = ranges;
//..
}

The following screenshot displays a customized TreeMap control.

Copyright 2001 - 2016 Syncfusion Inc.

394

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

395

SfTreeMap

Getting Started

Customized TreeMap control


18.2.1.7 Enable Tooltip
You can enable the Tooltip by setting the showTooltip property to true. By default, it takes the property
of the bound object that is referred
in weightValuePath and displays its content when you hover over the corresponding node.
18.2.1.7.1 Leaf ItemSetting
You can customize the Leaf level TreeMap items by using leafItemSetting. The Label and Tooltip values
take the property of bound object
that is referred in the LabelPath when defined. The following code example displays how the Tooltip is
enabled.
C
* (void)viewDidLoad {
//..
tree.leafItemSettings.borderColor= [UIColor grayColor];
tree.leafItemSettings.showLabels= TRUE;
tree.leafItemSettings.labelPath= @"Name";
tree.leafItemSettings.borderWidth=0;
//..
}

The following screenshot displays LeafItems in the TreeMap control.

Copyright 2001 - 2016 Syncfusion Inc.

396

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

397

SfTreeMap

Getting Started

LeafItems in the TreeMap control


18.2.1.8 Enable Legend
You can set the color value of leaf nodes by using the TreeMapLegend. This Legend is appropriate only
for the TreeMap whose leaf nodes
are colored by using rangeColorMapping. You can set the showLegend property value to true to make a
Legend visible.
18.2.1.8.1 Label for Legend
You can customize the labels of the Legend item by using legendLabel property of rangeColorMapping.
The following code example illustrates how to add labels for Legend in the TreeMap.
C
- (void)viewDidLoad {
//..
SFLegendSetting * setting= [[SFLegendSetting alloc]init];
setting.showLegend=true;
setting.size = CGSizeMake(self.view.frame.size.width, 30);
setting.labelStyle.font= [UIFont systemFontOfSize:10];
setting.labelStyle.color=[UIColor grayColor];
setting.iconSize= CGSizeMake(10, 10);
tree.legendSettings= setting;
//..
}

Copyright 2001 - 2016 Syncfusion Inc.

398

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

399

SfTreeMap

Getting Started

Adding labels for legend in TreeMap

18.2.2 Create your first TreeMap in Swift


You can configure an iOS TreeMap in simple steps. In this section, you can learn how to configure a
TreeMap control in real-time scenario
where it is used to visually represent the percentage of population growth in each continent. It also
provides a walk-through on some of
the customization features available in the TreeMap control.

Percentage of population growth in each continent


18.2.2.1 Initialize the TreeMap
Create a TreeMap object in the View Controller and add TreeMap as subview in the viewdidload
override method. You can create a
TreeMap object by using the following code example.
C
var _treemap
: SFTreeMap
override func viewDidLoad()
{
super.viewDidLoad()
_treemap.frame = self.view.bounds;
self.view.addSubview(_treemap);
}

SFTreeMap();

18.2.2.2 Populate DataSource


The dataSource property accepts the collection values as input. For example, you can provide the list of
objects as input.

Copyright 2001 - 2016 Syncfusion Inc.

400

SfTreeMap

Getting Started

18.2.2.3 Weight Value Path


You can calculate the size of the object by using weightValuePath of the TreeMap. Populate the
TreeMap data as the List of object. For
example, you can use population data of the countries to generate TreeMap data as illustrated in the
following code example.
C
[PopulationData.swift]
class PopulationData : NSObject{
var Name : NSString = "";
var Continent : NSString = "";
var Population : CGFloat = 0.0;
var Growth : CGFloat = 0.0;
init(continent: NSString, name: NSString, growth: CGFloat, population:
CGFloat) {
Continent = continent;
Name = name;
Population = population;
Growth = growth;
}
}
[ViewController.swift]
override func viewDidLoad()
{
super.viewDidLoad()
_treemap.frame = self.view.bounds;
_treemap.weightValuePath = "Population";
_treemap.dataSource = addPopulationData();
self.view.addSubview(_treemap);
}
func addPopulationData() -> NSMutableArray {
var array : NSMutableArray = NSMutableArray();
array.addObject(PopulationData(continent:"Asia" , name:"Indonesia" , growth:
3 , population: 237641326 ));
array.addObject(PopulationData(continent:"Asia" , name:"Russia" , growth: 2
, population: 152518015 ));
array.addObject(PopulationData(continent:"North America" , name:"United
States" , growth: 4 , population: 315645000 ));
array.addObject(PopulationData(continent:"North America" , name:"Mexico" ,
growth: 2 , population: 112336538 ));
array.addObject(PopulationData(continent:"South America" , name:"Colombia" ,
growth: 1 , population: 47000000 ));
array.addObject(PopulationData(continent:"South America" , name:"Brazil" ,
growth: 3 , population: 193946886 ));
array.addObject(PopulationData(continent:"Africa" , name:"Nigeria" , growth:
2 , population: 170901000 ));
array.addObject(PopulationData(continent:"Africa" , name:"Egypt" , growth: 1
, population: 83661000 ));
array.addObject(PopulationData(continent:"Europe" , name:"Germany" , growth:
1 , population: 81993000 ));
array.addObject(PopulationData(continent:"Europe" , name:"France" , growth:
1 , population: 65605000 ));
array.addObject(PopulationData(continent:"Europe" , name:"UK" , growth: 1 ,
population: 63181775 ));
return array;

Copyright 2001 - 2016 Syncfusion Inc.

401

SfTreeMap

Getting Started

The following screenshot displays the TreeMap control that is rendered after running the above code
example. The control is rendered with the default properties.

Copyright 2001 - 2016 Syncfusion Inc.

402

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

403

SfTreeMap

Getting Started

TreeMap control
18.2.2.4 GroupTreeMap Items by using Levels
You can group the TreeMap Items by using Levels in the TreeMap.
18.2.2.4.1 1. Group Path
You can use groupPath property for every flat level of the TreeMap control. It is a path to a field on the
source object that serves as the
Group for the level specified. You can also group the data based on the groupPath in the TreeMap
control. When the groupPath is not
specified, then the items are not grouped and the data is displayed in the order specified in
the DataSource.
18.2.2.4.2 2. Group Gap
You can use groupGap property to separate the items from every flat level and to differentiate the levels
mentioned in the TreeMap control.
The following code example explains how to group the TreeMap Items by using Levels.
C
override func viewDidLoad()
{
super.viewDidLoad()
_treemap.frame = self.view.bounds;
_treemap.weightValuePath = "Population";
_treemap.dataSource = addPopulationData();
var level : SFTreeMapFlatLevel = SFTreeMapFlatLevel();
level.groupPath = "Continent";
level.showHeader = true;
level.headerStyle.color = UIColor.grayColor();
_treemap.levels.addObject(level);
self.view.addSubview(_treemap);
}

The following screenshot displays grouping of the TreeMapItems by using Levels.

Copyright 2001 - 2016 Syncfusion Inc.

404

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

405

SfTreeMap

Getting Started

Grouping TreeMap Items by using Levels


18.2.2.5 Customize TreeMap Appearance by Range
You can differentiate the nodes based on its value and color ranges by using Range color. You can also
define the color value range by using from and to properties.
18.2.2.5.1 Color Value Path
The colorValuePath of the TreeMap is a path to a field on the source object. You can determine the
color for the object by using colorValuePath of the TreeMap.
The following code example explains how to customize the TreeMap appearance by using Range.
C
override func viewDidLoad()
{
//..
_treemap.colorValuePath = "Growth";
var ranges : SFRangeColorMapping = SFRangeColorMapping();
var range1 : SFRange = SFRange();
range1.from = 0;
range1.to = 1;
range1.legendLabel = "1% Growth";
range1.color = UIColor(red: 0.467 , green: 0.847 , blue: 0.847 , alpha:
1.0);
var range2 : SFRange = SFRange();
range2.from = 0;
range2.to = 2;
range2.legendLabel =
"2% Growth";
range2.color = UIColor(red:0.682, green:0.851 , blue:0.376 , alpha:1);
var range3 : SFRange = SFRange();
range3.from = 0;
range3.to = 3;
range3.legendLabel = "3% Growth";
range3.color = UIColor(red:1, green:0.686, blue:0.318 , alpha:1);
var range4 : SFRange = SFRange();
range4.from = 0;
range4.to = 4;
range4.legendLabel = "4% Growth";
range4.color = UIColor(red:0.953 , green:0.824 , blue:0.251 , alpha:1);
var colorranges
: NSMutableArray
= NSMutableArray();
colorranges.addObject(range1);
colorranges.addObject(range2);
colorranges.addObject(range3);
colorranges.addObject(range4);
ranges.ranges = colorranges;
_treemap.leafItemColorMapping = ranges;
//..
}

The following screenshot displays a customized TreeMap control.

Copyright 2001 - 2016 Syncfusion Inc.

406

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

407

SfTreeMap

Getting Started

Customized TreeMap control


18.2.2.6 Enable Tooltip
You can enable the Tooltip by setting the showTooltip property to true. By default, it takes the property
of the bound object that is referred
in the weightValuePath and displays its content when you hover over the corresponding node.
18.2.2.6.1 Leaf ItemSetting
You can customize the Leaf level TreeMap items by using leafItemSetting. The Label and Tooltip values
take the property of bound object
that is referred in the labelPath when defined. The following code example displays how the Tooltip is
enabled.
C
override func viewDidLoad()
{
//..
_treemap.leafItemSettings.showLabels = true;
_treemap.leafItemSettings.labelPath = "Name";
_treemap.leafItemSettings.borderWidth = 0;
//..
}

The following screenshot displays LeafItems in the TreeMap control.

Copyright 2001 - 2016 Syncfusion Inc.

408

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

409

SfTreeMap

Getting Started

LeafItems in the TreeMap control


18.2.2.7 Enable Legend
You can set the color value of the leaf nodes by using the TreeMap Legend. This Legend is appropriate
only for the TreeMap whose leaf
nodes are colored by using rangeColorMapping. You can set the showLegend property value to true to
make a Legend visible.
18.2.2.7.1 Label for Legend
You can customize the labels of the legend item by using legendLabel property of the
rangeColorMapping.
The following code example illustrates how to add labels for Legend in the TreeMap.
C
override func viewDidLoad()
{
//..
var setting
: SFLegendSetting = SFLegendSetting();
setting.showLegend = true;
setting.size = CGSizeMake(self.view.bounds.size.width, 30);
setting.labelStyle.adjustsFontSizeToFitWidth = false;
setting.labelStyle.color = UIColor.grayColor();
setting.iconSize = CGSizeMake(10, 10);
_treemap.legendSettings = setting;
//..
}

Copyright 2001 - 2016 Syncfusion Inc.

410

SfTreeMap

Copyright 2001 - 2016 Syncfusion Inc.

Getting Started

411

SfTreeMap

Getting Started

Adding labels for legend in TreeMap

Copyright 2001 - 2016 Syncfusion Inc.

412