IOSTutorial1

From Steema Software Reference Wiki
Jump to: navigation, search

Net iphone.png

Contents page
Previous | Next

Tutorial 1 - Getting Started


Getting Started - building Charts and populating Data Series

Introduction

The TeeChart NET for iOS is based on the TeeChart NET source code (C#), and includes the majority of the functionality currently in TeeChart NET for Visual Studio, with only a few changes to the code in order to generate Charts at runtime. This allows us to convert an application created for Windows systems to iOS systems in a short time.
This version is aimed at programers who want to create applications for iPhone and iPad using C# code. To achieve this it's necessary to use the MonoTouch framework. For more information about MonoTouch visit  their web (www.xamarin.com).

You may define the Chart appearance, titles, Legend characteristics and 3D aspect without having to include a data Series. That gives you the freedom to add and remove different data Series types at runtime without having to redefine the whole Chart look and feel.

Pieces.png

These components work together, with Chart axes being the interface between Chart and Series. A Series has data and its values will influence the label characteristics of the Chart axes. The axes appearance, colours, grid frequency and label fonts may all be defined for the Chart before adding data Series. TeeChart will make a best estimate of most values to minimise the need for you to predefine Chart and Series properties.

The "Chart distinct from Series" design paradigm of TeeChart allows you to mix a variety of Series types without being  limited to a choice of predefined Chart formats.

Seriesmix.png


The steps in this tutorial highlight how easy it is to build a Chart from scratch and will help you through later tutorials, to modify and further enhance the appearance and functionality of the Chart. Good Charting !!

Building a Chart

Including TeeChart in an iOS application In order to use the TeeChart component in an iOS you'll have to add the TeeChart.dll file as a Project refernce.
Once the TeeChart.dll has been referenced you'll be able to access all of the properties and methods.
TeeChart inherits from a View. This means that it contains all the characteristics of a view.

Coded data input
For programmed input of data you will need to write some code. This section will show you the steps necessary to build a chart with coded input.
When adding a Series at runtime it will not have any values by default applied to it. Only after the Series is added can we use the appropriate methods  for each case and add each point to manually populate the Series.

[C#.Net]  
        {
Steema.TeeChart.TChart chart = new Steema.TeeChart.TChart();
chart.Frame = baseView.Frame;

           Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar();
chart.Series.Add(bar1);
        
            bar1.Add(3,"Pears",UIColor.Red.CGColor);  
            bar1.Add(4,"Apples",UIColor.Blue.CGColor);  
            bar1.Add(2,"Oranges",UIColor.Green.CGColor);  
        } 

Run the project and three new bars will appear on your Chart. That's it!! There's no more to it.

FruitChart.png

The first Bar Series in your Chart is called Bar1, the second Bar2 etc.. so with multiple series in your Chart you may use these names to modify the relevant Series.

The Series' Add method has 25 overloads, the 7th of which accepts 3 variables, Value, Text and Colour. The Add method thus assumes equal spacing of values on the Label axis (in this case the X-Axis). If your data contains 2 variables you may use another of the Add method's overloads. Add another Button to your project and put this code in it. Run the Project and add points using this code:

[C#.Net] 

this.button.TouchUpInside = (sender, e) =>
        {
            Random rnd = new Random();
            if(bar1.Count > 0)
            {
                //Increment X Axis value and add a new random point
                bar1.Add((bar1.XValues.Last rnd.Next(10)), ((bar1.YValues.Last/(bar1.YValues.Last - 1)) rnd.Next(10)),
"Lemons",UIColor.Yellow.CGColor);
            }
            else
            {
                //Add a new random point
                bar1.Add(1,rnd.Next(10),"Lemons",UIColor.Yellow.CGColor);
            }
        }

Selecting a Series type to suit your needs

The last coded example generated new X and Y values. The X axis distance between points is not constant which will cause overlapping of Bars in some cases, which would be desirable for some but not all applications. If you change all references from Bar1 in your code to Line1 a LineSeries shows, offering an alternative way to graphically represent data with 2 variables.

If your data contains more than 2 variables there are other Series Types suited to displaying the data. Have a look at all the other Series styles available and select the Series type you think might serve you best then read about it in the TeeChart help. For more information take a look at Tutorial6 - Working with Series



PREVIOUS

NEXT


© 1998-2017 Steema Software SL. All rights reserved.