Chart: Getting Started

This quick start tutorial demonstrates how to create a simple iOS application with TKChart.

Prerequisites

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

Setting up TKChart

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

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

#import <TelerikUI/TelerikUI.h>

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

#import <UIKit/UIKit.h>

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

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

using TelerikUI;

Type the following code in viewDidLoad method:

_chart = [[TKChart alloc] initWithFrame:self.view.bounds];
_chart.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:_chart];
chart.frame = self.view.bounds
chart.autoresizingMask = UIViewAutoresizing(rawValue: UIViewAutoresizing.flexibleWidth.rawValue | UIViewAutoresizing.flexibleHeight.rawValue)
self.view.addSubview(chart)
TKChart chart = new TKChart (this.View.Bounds);
chart.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
this.View.AddSubview (chart);

This code creates a new instance of TKChart and adds it as a subview of the ViewController's main view. The autoresizingMask property is set in order to allow correct resizing of the chart when the device is rotated in landscape mode.

The next step is to create some random data that will be consumed by the chart. You can use the following code:

NSMutableArray *array = [[NSMutableArray alloc] init];
for (int i = 0; i < 12; i++) {
    [array addObject:[[TKChartDataPoint alloc] initWithX:@(i) Y:@(arc4random()%2000)]];
}
var array = [TKChartDataPoint]()
for i in 0..<12 {
    array.append(TKChartDataPoint(x: i, y: Int(arc4random() % 2000)))
}
Random r = new Random ();
List<TKChartDataPoint> list = new List<TKChartDataPoint> ();
for (int i = 0; i < 12; i++) {
    list.Add (new TKChartDataPoint (new NSNumber (i), new NSNumber (r.Next () % 2000)));
}

In this case we use the i variable as an x value, and we generate a random number in the range between 0 and 100 as an y value.

Now let's add this random data to the chart and present it. This is done by the following code:

TKChartLineSeries *series = [[TKChartLineSeries alloc] initWithItems:array];
series.selection = TKChartSeriesSelectionSeries;
[_chart addSeries:series];
let series = TKChartLineSeries(items:array)
series.selection = TKChartSeriesSelection.series
chart.addSeries(series)
TKChartLineSeries series = new TKChartLineSeries (list.ToArray());

series.Selection = TKChartSeriesSelection.Series;
chart.AddSeries (series);

For more information about populating TKChart with data, please refer to the following article:

The TKChartLineSeries tells the chart to present its data as a line chart and initializes it with the already created points.

Let's add a title and a legend to our chart. We can do so by setting the corresponding properties to NO. We can easily employ the built-in animations support to create some fancy animations. To do so, we should set the allowAnimations property to YES:

_chart.title.hidden = NO;
_chart.title.text = @"This is a chart demo";
_chart.legend.hidden = NO;
_chart.allowAnimations = YES;
chart.title.isHidden = false
chart.title.text = "This is a chart demo"
chart.legend.isHidden = false
chart.allowAnimations = true
chart.Title.Hidden = false;
chart.Title.Text = "This is a chart demo";
chart.Legend.Hidden = false;
chart.AllowAnimations = true;

For more information about customizing animations, please refer to the following articles:

For more information about series types, please refer to the following articles: Chart Structure.