TeeChart NET for iOS Tutorials

TeeChart Net for iOS Tutorials

Contact Steema Information

© 2002-2012 Steema Software SL. All rights reserved.


Contents

Tutorials

Tutorial1 - Getting Started
Tutorial2 - Chart Display Properties
Tutorial3 - Chart Paging
Tutorial4 - Axis Control
Tutorial5 - Legend design
Tutorial6 - Working with Series
Tutorial7 - Working with Functions
Tutorial8 - ADO.NET Database Access
Tutorial9 - ASP.NET Applications
Tutorial10 - Walk-through ASP.NET examples
Tutorial11- Zoom and Scroll
Tutorial12 - Exporting and Importing Charts
Tutorial13 - Custom Drawing on the Chart Panel
Tutorial14 - Printing Charts
Tutorial15 - Chart3D
Tutorial16 - TeeChart's Additional Palette Components
Tutorial17 - Designtime, Runtime and License Requirements
Tutorial18 - The TeeChart Tool Collection


Tutorial1 - Getting Started

Tutorial 1 - Getting Started

Getting Started - building Charts and populating Data Series

Contents

Introduction

Building a Chart

Including TeeChart on a View

Populate the new data Series
Coded data input

Selecting a Series type to suit your needs

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.

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.

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.

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 Tutorial 6 - Working with Series


Tutorial2 - Chart Display Properties

Tutorial 2 - Chart Display Properties

Chart display features are those which affect the overall appearance of the Chart. They include those properties and methods that define the colour of the Chart background, Titles and their position, margins, borders and bevels, background images, frame and axis visible, pen colours and widths, 3D, walls, etc.
You may modify these properties programmatically at runtime. The overall Chart appearance characteristics are a grouped into these categories:

General
Axis
Titles
Legend
Panel
Paging
Walls
3D

Other properties affect the 'look' of your Chart. These include Series colours and mark characteristics, individual Axis and Grid display properties and labelling. These will be dealt with in later tutorials dedicated to the specialist role of these features.

Getting started with Chart display properties
Add a new Chart to a View and you will see it displays in 3D with a grey panel background, 2 walls (Bottom and Left), Frame (which defines the Frame of the Chart's plottable area) and a default Chart Title Header "TeeChart".

General Chart properties

General options include the following sections:

Zoom
Scroll

Given that various functions have been implemented in these sections of the Chart, we have preferred to create a tutorial dedicated specifically to the changes and the options available.
Go to Zoom and Scroll Tutorial.

Axis Properties

Control of the axes is quite a specialised area at its greatest level of intricacy and is dealt with in greater depth in a later tutorial. Here we will cover the fundamentals of Axis and Frame display.
The second Chart page holds the properties for defining axis and frame characteristics.

There are 6 principle axes in the Chart. Left, Top, Right, Bottom, Depth Bottom and Depth Top. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features (See BackWall). The Depth initialises by default as not Visible. All other Axes are visible from the moment that a Series is added to the Chart and associated with those Axes (Left and Bottom as default). Custom Axes may be added/removed by using the + and - keys on the dialogue. For a Custom Axis to be visible (as for any other Axis) a Series must be associated with the Axis. See the Axis tutorial for more about Custom axes.
The key properties to enable display of axes and frame are:

Visible
This property enables or disables display of all axes. If the Back wall Frame is visible then the Chart surround is still visible when the axes are hidden. The result will be the appearance of a larger Chart as no area is reserved for the axis labels. The Visible property for each Axis (Scales tab) overrides the visible characteristic for each Axis. If you select the Depth Axis, then you will note that Depth Axis Scales.Visible is by default 'not visible'.

[C#.Net]
tChart1.Axes.Visible = true;

Axis: Left, Right, Top, Bottom and Depth Visible

[C#.Net]
tChart1.Axes.Left.Visible = true;

Titles Properties
The Titles properties conntrol the characteristics of the Chart Titles, Header and Footer.

Text

Runtime:
The Text property of the Header class is a standard .Net String class and can be modified as such, e.g.

[C#.Net]
tChart1.Header.Text = "My Header Text";

Style Alignment
Alignment refers to the Header (or Footer) alignment with respect to the Chart area NOT the overall Chart Panel. The Chart area is the plottable area of the Chart plus Axis Labels and Legend.

Runtime:
[C#.Net]
tChart1.Header.Alignment = StringAlignment.Far;

Position
Use Position to override the Title or Footer default position and set a custom position (pixels relation to Chart Top, Left).

Runtime:
[C#.Net]
tChart1.Header.CustomPosition = true;
tChart1.Header.Top = tChart1.Header.Top + 10;

Format
Contains the settings for the Title box, e.g. Color of the box, Pen properties of the Frame around the box, Brush properties [Pattern] of the box, etc.

e.g. Pattern
Pattern refers to the background pattern [solid, hatch, gradient or image] of the Title or Footer box.

The default is Transparent, meaning that the Title box is not visible until Transparent is set to false.

Runtime:
[C#.Net]
tChart1.Header.Transparent = false;
tChart1.Header.Brush.Style = System.Drawing.Drawing2D.HatchStyle.Cross;

[VB.Net]
TChart1.Header.Transparent = False
TChart1.Header.Brush.Style = System.Drawing.Drawing2D.HatchStyle.Cross

Text
Contains the Title Text appearance formatting characteristics.

e.g. Font
The can use the font of your choice and set the characteristics associatied with that text type.

Runtime:
[C#.Net]
tChart1.Header.Font.Name = "Verdana";
tChart1.Header.Font.Bold = true;

Shadow
Properties to display the Header or Footer box Shadow. You may define colour and ChartBrush [solid, hatch, gradient or image].

Runtime:
[C#.Net]
tChart1.Header.Shadow.Visible = true;
tChart1.Header.Shadow.Color = Color.Chartreuse;
Bevels
Defines the Bevel properties of the Header or Footer box.

The following code shows in the Chart beneath how some of these properties can change the appearance of your Chart.

[C#.Net]
_controller.chart.Series.Add(new Steema.TeeChart.Styles.Line());
_controller.chart.Series[0].FillSampleValues(50);
_controller.chart.Header.Visible = true;
_controller.chart.Header.Text = "My Header Text";
_controller.chart.Header.Alignment = MonoTouch.CoreText.CTTextAlignment.Left;
_controller.chart.Header.Font.Size=20;
_controller.chart.Legend.Visible = true;

Josep: _controller.chart.Legend.Gradient.Visible=false;
_controller.chart.Legend.Transparency = 50;
_controller.chart.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom;
_controller.chart.Legend.Font.Color = UIColor.Black.CGColor;
_controller.chart.Legend.Shadow.Visible=false;
_controller.chart.Panel.MarginTop = 10;
_controller.chart.SubHeader.Visible = true;
_controller.chart.SubHeader.Alignment = MonoTouch.CoreText.CTTextAlignment.Right;
_controller.chart.SubHeader.Text = "SubHeader";
_controller.chart.SubHeader.Font.Color = UIColor.Yellow.CGColor;
_controller.chart.SubHeader.Font.Size = 12;

Legend Properties

Legend contents are a specialist subject that will be dealt with in a later tutorial. Important initial steps are to control Legend alignment and visible properties, colour, font, frame, shadow, etc..

Style
Toggle On/Off Legend display and set Legend display content characteristics (inclusion of Checkboxes, etc).

Runtime:
Example using Checkbox to control Legend display:
[C#.Net]
private void checkBox1_CheckedChanged(object sender, System.EventArgs e)
        {
            if(checkBox1.Checked)
            {tChart1.Legend.Visible = true;}
            else
            {tChart1.Legend.Visible = false;}
        }
Dividing Lines
Used to draw lines within the Legend box between the Legend entries. ChartPen properties apply.

Runtime:
[C#.Net]
tChart1.Legend.DividingLines.Visible = true;
tChart1.Legend.DividingLines.Color = Color.Blue;

Position
Sets the default display position or enables custom positioning of the Legend. TChart will change the shape of the Legend to fit the location. If the Legend is set to the side (left or right) of the Chart the contents of the Legend, by default, sit as a list from top to bottom. If the Legend sits below or above the Chart then the Legend contents are placed side by side. The default behaviour may be overridden by using the Resize Chart option and/or by using Custom positioning. See the Legend tutorial for more about custom positioning of the Legend.
e.g. ResizeChart
Resize Chart defines whether or not the Chart will leave space for the Legend when it paints. This allows the Legend to be placed within the Chart area.

Runtime:
[C#.Net]
tChart1.Legend.ResizeChart = true;

Top position
Defines the Legend box displacement from the top of the Chart Panel.

Runtime:
[C#.Net]
tChart1.Legend.CustomPosition = true;
tChart1.Legend.Top = 5;

Symbols
Size and formatting of the Legend symbols.

Color Width
Defines the width of the colour boxes within the Legend.
Runtime:
[C#.Net]
tChart1.Legend.Symbol.WidthUnits = LegendSymbolSize.Pixels;
tChart1.Legend.Symbol.Width = 30;

Format
Contains the settings for the Legend box, e.g. Colour, Frame (ChartPen properties), Pattern (ChartBrush properties), and Transparent.

Text
Text characteristics for the Legend text contents and its shadow.

Runtime:
[C#.Net]
this.button.TouchUpInside += (sender, e) =>
{
     Legend legend1;
     legend1 = tChart1.Legend;
     legend1.Color = Color.Blue;
     legend1.Font.Name = "Times New Roman";
     legend1.Font.Color = Color.Yellow;
};

Gradient
Enable/disable a Background Gradient in the Legend box and select its direction and colours.

Shadow
Properties for display of the Legend box Shadow. You may define colour, pattern (ChartBrush) size and transparency.

Runtime:
[C#.Net]
tChart1.Legend.Shadow.Color = Color.Cyan;
tChart1.Legend.Shadow.Width = 4;
Bevels
Properties for colour and size of inner and outer bevels.

Panel Properties

The TeeChart Panel page allows you to set parameters which greatly enhance the appearance of the Chart. Panel Gradient effects are best seen by monitors that support true colour.

By now you are familiar with TeeChart properties so we won't run through all the properties here. Panel properties and methods may be accessed via code:

Key areas are:

Borders
You may define Border independently or in conjunction with the Bevel properties. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.

e.g. Bevel Inner/Bevel Outer/Border Width
These properties will produce a variety of 3D effects on the Border of the Chart panel. Modify them at design time to see how they affect the Chart border bevels.

Background
e.g. Panel Color
Panel colour will paint the whole Chart background with the chosen colour. If you select to view a background Gradient or Image they will hide the Panel colour. If you set a Back colour it will replace the Panel colour within the Chart Frame only.

e.g. BackImage
You may select any bitmap file as a BackImage. There are five different Wrap Modes to choose from for the BackImage.

Runtime:
Use ChartBrush.LoadImage to add a background image to a Chart at runtime.
[C#.Net]
tChart1.Panel.Brush.WrapMode = System.Drawing.Drawing2D.WrapMode.TileFlipXY;
tChart1.Panel.Brush.LoadImage(@"C:\...\MyImage.jpg");
Margins
Margins are defined as the distance between the Chart Border and the Chart Frame and are expressed as a percentage of the overall dimensions of the Chart Panel.

Runtime properties are:

TChart1.Panel.MarginTop
TChart1.Panel.MarginLeft
TChart1.Panel.MarginRight
TChart1.Panel.MarginBottom

You could use a HScrollbar to alter these properties:

[C#.Net]
private void Initialize()
{
     bar1.FillSampleValues(10);
     hScrollBar1.Value = Convert.ToInt32(tChart1.Panel.MarginLeft);
     hScrollBar1.Maximum = 80;
}

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
{
     tChart1.Panel.MarginLeft = Convert.ToDouble(e.NewValue);
}

Gradient
To define a Gradient you must select a StartColor and EndColor (plus, optionally MidColor) and enable the Gradient as Visible. The Gradient will cover the whole Chart panel. Gradient direction defines the direction of colour change between Start, Mid and EndColor.

Runtime:
[C#.Net]
tChart1.Panel.Gradient.Visible = true;
tChart1.Panel.Gradient.StartColor = Color.Red;
tChart1.Panel.Gradient.MiddleColor = Color.White;
tChart1.Panel.Gradient.EndColor = Color.Blue;
tChart1.Panel.Gradient.Direction = System.Drawing.Drawing2D.LinearGradientMode.ForwardDiagonal;

Shadow
Defines the size, colour, pattern (ChartBrush) and transparency properties of the Chart panel's shadow.

Here we can see different Charts on the same panel.

Paging Properties

TeeChart paging allows a Chart to be divided into a set number of points per page and for the Chart to be leafed through. See the Paging tutorial for more information.

Walls Properties

There are 4 Walls: Left, Right, Bottom and Back, that may be represented in 2D or 3D.

Wall properties are accessible via the TChart1.Walls property.

Color
You can choose a colour with which to paint the selected wall.

Border
The Border button takes you to the ChartPen definition for the Walls class. This is the same Pen available for many other TeeChart objects.

The visible property enables/disables display of the Border. In the case of the BackWall, where axes are Visible the Wall Border will be hidden behind those axes so you will only see the result of enabling/disabling the Border if you hide some or all axes e.g. Make axes Top and Right invisible to see the result of changing the colour of Wall Border i.e.
TChart1.Walls.Back.Pen.Color = UIColor.Blue.CGColor

See ChartPen for other characteristics of the Border Pen. You can change these properties at design time.

Gradient
You can choose a colour gradient for specific walls.

3D

3D is extremely flexible in TeeChart NET for iPhone. You now have the option to display the Chart as:

  • 2D Flat Chart, viewed from front

  • 3D Orthogonal 3D represented by vectored Lines to indicate depth

  • 3D Native Windows 3D using 3D Canvas with 180 degree Chart rotation

    • 3 Dimensions
    By using this property you can change the Chart from a 3D to a 2D Chart.

    3D %
    Controls the depth of the 3D effect.
    An applied example of these follows:

    [C#.Net]    tab
    this.button.TouchUpInside += (sender, e) =>
    {
                if(Checked)
                {
                    tChart1.Aspect.View3D = true;
                    tChart1.Aspect.Chart3DPercent = XX;
                }
                else
                {
                    tChart1.Aspect.View3D = false;
                    tChart1.Aspect.Chart3DPercent = XX;
                }
    };

    The Orthogonal Option, when disabled, enables Windows Native 3D mode allowing you to Rotate, Elevate and offset the Chart. The Zoom option allows you to bring forward or move away the whole Chart. Zoom internally in the Chart on Data Series is still available at runtime.
    The Perspective property allows you to set a distance perspective as if looking into a room. Perpsective offers a visual enhancement for Charts used for presentation purposes.


Tutorial3 - Chart Paging

Tutorial 3 - Chart Paging

If the data source for your Chart contains more data than can legibly be displayed on one Chart screen you may wish to divide the Chart into pages that can be leafed through. This can be achieved programmatically.

Paging by code

Paging by code

Paging properties and methods are available via the Page class.
Steps required to add paging to your Chart:

  • Define Points per page

    • Use MaxPointsPerPage to define the number of points to display on each page:
    [C#.Net]
    tChart1.Page.MaxPointsPerPage = 10;

  • Add Navigation buttons to the Chart's Form.

    • Example:
    First Page
    [C#.Net]
    tChart1.Page.Current = 0;

    Advance a page
    [C#.Net]
    tChart1.Page.Next();

    Goto previous page
    [C#.Net]
    tChart1.Page.Previous();

    Last Page
    [C#.Net]
    tChart1.Page.Current = tChart1.Page.Count;

  • Decide what to do with the last page.

    • The last page is unlikely to have exactly the correct number of points to match the point quantity in the other Chart pages. You may choose to Scale the Last page which will 'best fit' the remaining points to the page, adjusting the axis scale accordingly, or you may treat the page as previous pages with the same number of points which may leave the last page rather empty if there are not many points for the page.

    [C#.Net]
    tChart1.Page.ScaleLastPage = false;   (default = true)

  • Show the user a page number

    • The PageNumber Chart Tool may be used to achieve this end:
    [C#.Net]
    private void Initialize()
    {
         Bar bar1 = new Bar();
         PageNumber pageNumber1 = new PageNumber();
         tChart1.Series.Add(bar1);
         tChart1.Tools.Add(pageNumber1);
         bar1.FillSampleValues(100);
         tChart1.Page.MaxPointsPerPage = 10;
    }

    this.button1.TouchUpInside += (sender, e) =>
    {
         tChart1.Page.Previous();
    };

    this.button2.TouchUpInside += (sender, e) =>
    {
         tChart1.Page.Next();
    };

    That's all for this tutorial ! The next tutorial deals with advanced Axis manipulation.


Tutorial4 - Axis Control

Tutorial 4 - Axis Control

TeeChart NET for iOS will automatically define all Axis labelling for you and offers plenty of flexibility to tailor any specific requirements you may have. TeeChart NET for iOS offers true Multiple Axes. These are available at design or run time and offer countless possibilities and flexibility for Axis definition. See the section in this tutorial for more information.

Contents

Axes control - Key areas
Scales
Increment
Titles
Labels
Ticks
Axis position

Additional Axes
Copying axes
Multiple axes

Axis events
OnClickAxis
OnGetAxisLabel
OnGetNextAxisLabel

Axes control - Key areas

Scales
Axis scales are set automatically when you add Series data to your Chart. You may change from the defaults at design time or at runtime by using Axis properties.

Automatic selects the best axis scale range to fit your data. If you turn Automatic off the scales section will ungrey options and you can change Axis values. Important, remember to select the Axis that you wish to configure.

[C#.Net]
Random rnd = new Random();
for(int i = 0; i <= 40; ++i)
line1.Add(Convert.ToDouble(i),rnd.Next(100),UIColor.Red.CGColor);

Setting axis scales by code
You can change the Maximum and Minimum at runtime using this code:
[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Automatic = false;
bottomAxis.Maximum = 36;
bottomAxis.Minimum = 5;

You may set Axis scale Maximum and Minimum to automatic individually. e.g:
[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.AutomaticMaximum = true;
bottomAxis.AutomaticMinimum = false;
bottomAxis.Minimum = 5;

Increment
You may tailor the intervals for the Axis. You may change this by code at runtime:
[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Increment = 20;

Datetime data
If your data is datetime, set the increment for the desired increment:
[C#.Net]
Random rnd = new Random();
DateTime today = DateTime.Today;
TimeSpan oneDay = TimeSpan.FromDays(1);
line1.XValues.DateTime = true;
for(int i = 1; i <= 25; ++i)
     line1.Add(today,rnd.Next(100),UIColor.Red.CGColor);
     today += oneDay;

Change the Increment at runtime:
[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.TwoDays);

See the AxisLabels.ExactDateTime property for more information about date axis labelling.

Titles
Titles are set in the Titles section of the Axis page. You may change the Title text for the Axis and its font and shadow properties. The angle and size of the Title text may also be specified. For runtime see the AxisTitle Class.

Labels
See the AxisLabels Class for a resume of Labels properties.

Note
When changing axis label frequency, bear in mind that TeeChart will avoid label overlap according to the setting of the AxisLabels.Separation property. This means that if the label frequency is too high for the labels to fit, then TeeChart will allocate 'best fit'. Changing the label angle and label separation are 2 options that may help you fit the labels you require. See the AxisLabels.Angle property.

Label formats
You may apply all standard number and date formats to Axis labels. At runtime use:

[C#.Net]
tChart1.Axes.Bottom.Labels.ValueFormat = "#,##0.00;(#,##0.00)";

or for datetime data

[C#.Net]
tChart1.Axes.Bottom.Labels.DateTimeFormat = "dddd/MMMM/yyyy";

MultiLine labels
Axis labels can be displayed as multi-line text instead of a single line of text. Lines are separated using the LineSeparator character ().

Example
[C#.Net]
bar1.Add(1234, "New" + Steema.TeeChart.Texts.LineSeparator + "Cars", UIColor.Red.CGColor);
bar1.Add(2000, "Old" + Steema.TeeChart.Texts.LineSeparator + "Bicycles", UIColor.Red.CGColor);
tChart1.Panel.MarginBottom = 10;

Example for DateTime labels:
The following will show the Bottom Axis labels in two lines of text, one showing the month and day, and the second line showing the year:

Feb-29 Mar-1 ..
2012 2012 ..

[C#.Net]
bar1.Add(DateTime.Parse("29/2/2012"), 100, UIColor.Red.CGColor);
bar1.Add(DateTime.Parse("1/3/2012"), 200, UIColor.Red.CGColor);
bar1.Add(DateTime.Parse("2/3/2012"), 150, UIColor.Red.CGColor);
bar1.XValues.DateTime = true;
tChart1.Axes.Bottom.Labels.DateTimeFormat = "MM/dd hh:mm";
tChart1.Axes.Bottom.Labels.MultiLine = true;
tChart1.Panel.MarginBottom = 10;

Setting the AxisLabels.MultiLine property to True will automatically split labels in lines where there is a space, effectively dividing the Label into two:
'mm/dd' for the first line
'hh:mm' for the second line

At run-time you can always split the label into lines programmatically, using the OnGetAxisLabel event:

[C#.Net]
tchart.GetAxisLabel += new Steema.TeeChart.GetAxisLabelEventHandler(tchart_GetAxisLabel);

        public void tchart_GetAxisLabel(object sender, Steema.TeeChart.GetAxisLabelEventArgs e)

            if (sender==tchart.chart.Axes.Left)
                ((Steema.TeeChart.Axis)sender).Labels.Font.Color=UIColor.Red.CGColor;

In the example above, the global "TeeSplitInLines" procedure converts all spaces in "LabelText" to line separators (returns).

The axis AxisLabels.Angle property can also be used with multi-line axis labels.

Customising Axis labels
Further Label control may be obtained by using Axis events. The events permit you to activate/deactivate/change any individual Axis label. The following example modifies each Label, putting a textual phrase in front of the point index value:

[C#.Net]
            bar1.FillSampleValues(20);
            tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark;

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)

            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
            e.LabelText = "Period " + Convert.ToString(e.ValueIndex);

See the section entitled Axis events for more information about customising labels with Axis events.

Logarithmic Labels
Normal Logarithmic labelling may be set in the following way:

[C#.Net]
            Random rnd = new Random();
            Steema.TeeChart.Axis leftAxis = tChart1.Axes.Left;
            tChart1.Aspect.View3D = false;
            bar1.Marks.Visible = false;
            for(int i = 0; i <= 100; ++i)
            bar1.Add(rnd.Next(100) * i);
            leftAxis.LogarithmicBase = 10;
            leftAxis.Logarithmic = true;
            leftAxis.SetMinMax(0, 10000);
            leftAxis.Labels.ValueFormat = "#e+0"; //exponential format
Labels will be set according to the Logarithmic base (default 10) thus, in this case giving labels at 1, 10, 100, 1000, 10000.

Ticks and Minor

There are 3 tick types and 2 types of Grid. You may change the length, width and colour of each tick and Grid type. Changes can be made to Ticks, their associated Grid and Inner Ticks.

[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.Ticks.Length = 7;
bottomAxis.Ticks.Color = UIColor.Green.CGColor;
bottomAxis.MinorTickCount = 10;

Axis position
Axes have a property to modify where each axis is to be located. In this example, the axis is moved 50% of the total Chart width, so it is shown at the chart center:
[C#.Net]
Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
bottomAxis.PositionUnits = PositionUnits.Percent;
bottomAxis. RelativePosition = 50

Additional Axes

Copying axes
TeeChart offers 5 axes to be associated with data Series: Left, Top, Bottom, Right and Depth. When you add a new series to a Chart you may define to which of the axes the Series should be related. You may repeat any one (or all) of the front 4 axes at any place on the Chart by using the Axis Customdraw method. Note that this method makes a copy of your Axis, it does not add a new Custom Axis. See the next section, Multiple Custom Axes, for more information.
Example:

[C#.Net]
Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line();
_controller.chart.Series.Add(line1);

Random Rnd = new Random();
_controller.chart.Aspect.View3D = false;
for(int t = 0; t <= 20; ++t)
line1.Add(t, ((Rnd.Next(100)) + 1) - ((Rnd.Next(70)) + 1), UIColor.Yellow.CGColor);

_controller.chart.Axes.Left.AxisPen.Color = UIColor.White.CGColor;
_controller.chart.Axes.Bottom.AxisPen.Color = UIColor.White.CGColor;
_controller.chart.Axes.Left.AxisPen.Width = 1;
_controller.chart.Axes.Bottom.AxisPen.Width = 1;
line1.BeforeDrawValues += new Steema.TeeChart.Styles.Series.PaintChartEventHandler(line1_BeforeDrawValues);
Josep: private void line1_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g)

int posAxis = 0;
if(_controller.chart.Axes.Left.Maximum > 0)
_controller.chart.Axes.Left.Draw(g.ChartXCenter - 10,g.ChartXCenter - 20,g.ChartXCenter,true);
posAxis = _controller.chart.Axes.Left.CalcYPosValue(10);
_controller.chart.Axes.Bottom.Draw(posAxis + 10, posAxis + 40, posAxis, true);

The example code above will produce the image below:

Custom axes
In this example, TeeChart will plot the New axes, one horizontal and one vertical in the centre of your Chart. When you scroll the Chart (dragging with right mouse button), the new vertical axis will always remain central to the Chart, the new horizontal axis will move up and down with vertical scrolling. The new axes are exact copies of the default axes.

Multiple Custom Axes
Together with the PositionPercent and stretching properties, it's possible to have unlimited axes floating anywhere on the chart. Scroll, zoom, and axis hit-detection also apply to custom-created axes. Creating extra axes is possible at runtime via a few lines of code:

Via Code
[C#.Net]
            Line line1 = new Line();
            Line line2 = new Line();
            tChart1.Aspect.View3D = false;
            tChart1.Panel.Gradient.Visible = true;
            tChart1.Header.Text = "TeeChart Multiple Axes";
            tChart1.Series.Add(line1);
            tChart1.Series.Add(line2);

            for(int t = 0; t <= 10; ++t)

                line1.Add(Convert.ToDouble(t), Convert.ToDouble(10 + t), UIColor.Red.CGColor);
                if(t > 1)
                line2.Add(Convert.ToDouble(t), Convert.ToDouble(t), UIColor.Green.CGColor);

            Axis leftAxis = tChart1.Axes.Left;

            leftAxis.StartPosition = 0;
            leftAxis.EndPosition = 50;
            leftAxis.AxisPen.Color = UIColor.Red. CGColor;
            leftAxis.Title.Font.Color = UIColor.Red. CGColor;
            leftAxis.Title.Font.Bold = true;
            leftAxis.Title.Text = "1st Left Axis";

//            You are able to then position the new Axis in overall relation to the Chart
//            by using the StartPosition and EndPosition  properties.
//
//            StartPosition=50
//            EndPosition=100
//
//            These figures are expressed as percentages of the Chart Rectangle with 0 (zero)
//            (in the case of a vertical Axis) being Top. These properties can be applied to
//            the Standard Axes to create completely partitioned 'SubCharts' within the Chart.

            Axis axis1 = new Axis(false, false, tChart1.Chart);

            tChart1.Axes.Custom.Add(axis1);
            line2.CustomVertAxis = axis1;

            axis1.StartPosition = 50;
            axis1.EndPosition = 100;
            axis1.AxisPen.Color = UIColor.Green.CGColor;
            axis1.Title.Font.Color = UIColor.Green.CGColor;
            axis1.Title.Font.Bold = true;
            axis1.Title.Text = "Extra Axis";
            axis1.PositionUnits= PositionUnits.Percent;
            axis1.RelativePosition = 20;

The code above will produce the following Chart

Multiple axes
Options are limitless! We advise caution when using Custom Axes as it is easy to start filling the screen with new axes and to lose track of which one you wish to manage !

Axis events

Axis events offer runtime flexibility to modify Axis Labels and present user interactivity on Axis Clicks.

OnGetAxisLabel

Can be used to modify Axis Labels. See the OnGetAxisLabel event.

Example
[C#.Net]

            bar1.FillSampleValues(20);
            tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.Mark;

private void tChart1_GetAxisLabel(object sender, Steema.TeeChart.TChart.GetAxisLabelEventArgs e)

            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))
            e.LabelText = "Period " + Convert.ToString(e.ValueIndex);

OnGetNextAxisLabel
Can be used to decide which Axis Labels should be displayed. See the OnGetNextAxisLabel event. You should use the e.Stop Boolean property to include/exclude Axis Labels.

Example

[C#.Net]

            line1.FillSampleValues(20);

private void tChart1_GetNextAxisLabel(object sender, Steema.TeeChart.TChart.GetNextAxisLabelEventArgs e)

            if(((Steema.TeeChart.Axis)sender).Equals(tChart1.Axes.Bottom))

                e.Stop = false;
                switch(e.LabelIndex)

                    case 0: e.LabelValue = 5; break;
                    case 1: e.LabelValue = 13; break;
                    case 2: e.LabelValue = 19; break;
                    default: e.Stop = true; break;
End Sub


Tutorial5 - Legend design

Tutorial 5 - Legend design

Legend control
Style
Position
Symbols
Format
Text
Gradient
Shadow
Bevel

Customising Legends
OnGetLegendRect event
OnGetLegendPos event
OnGetLegendText event

Legend control

Legend parameters. See Legend class help for more information

Style
Legend Style
Legend default Style "Automatic" will put Series point values in the Legend when there is only one Series in the Chart. When the Chart contains more than one Series, "automatic" will put Series names in the Legend. If you change the Legend Style to display values and there is more than one Series in your Chart, TeeChart NET for iOS will display the values of the first Series. You may modify the display using custom options. See Customising Legends

Puts the last value of each Series in the Legend box:
[C#]
tChart1.Legend.LegendStyle = LegendStyles.LastValues;

Text Style
See the TextStyle property for a list of possible Legend text styles.

Vertical Spacing
Allows you to modify the spacing between Legend entries.

Dividing Lines
The Dividing Lines can be made visible or not and also be modified by changing their Color, Style and Width.

Visible
This Visible property enables/disables the display of the entire Legend.

Inverted
Inverting the Legend reverses the order of the Legend entries.

Check Boxes
Changes the Legend Style to "Series Names" and displays a check box next to each series allowing it to be made invisible or visible.

Font Series Color
Changes the color of the font of the Legend text to the series color.

Position

Position
There are 4 positions available using the Alignment property, Top, Bottom, Left and Right. Right is the default position. The default positioning of the Legend will always be outside the Chart. See the section about Customising Legends for more information about positioning Legends.

Resize Chart
The Resize Chart property, when not enabled, will draw the legend within the Chart frame area. Whilst this may be satisfactory for some Legend positioning requirements, better control of Legend positioning in relation to the Chart frame can be achieved by using the Legend Margin property.

Margin
Changing the Margin property value will move the Chart frame in relation to the Legend, NOT vice versa. Thus, making a Margin value negative will move the Chart over the Legend (increasing the size of the Chart rectangle area). However, the properties are not intended for repositioning of the Legend over the Chart, better to use the techniques outlined in Customising Legends.

Position Offset %
0% is defined as a horizontal Legend touching the right Chart canvas border and a vertical Legend touching the top one. Legends are offset relative to these positions.

Custom
By disabling the Resize Chart property you will be able to position the Legend in pixels anywhere on the Chart Canvas.

Symbols

Width
Set Width property to define the width of the color rectangles (symbols).

Width Units
Use the WidthUnits property to define how the width must be interpreted.

Position
Use the Position property to set the position of the color rectangles.

Continuous
Use Continous property to let the different legend color rectangles flow into each other. When set to True, the color rectangles of the different items are drawn fixed to each other (no vertical spacing). When set to False, the color rectangles are drawn as seperate rectangles.

Format

Color
The color property sets the color for the Legend canvas.

Frame
Sets Legend Frame properties: Visible, Style, Color and Width [Pen properties].

Pattern
Sets the pattern for the Legend canvas: Solid, Hatch, Gradient, Image [Hatch Brush properties].

Round Frame
Rounds the corners of the Legend Frame.

Transparent
Makes the legend canvas transparent leaving just the Legend text and symbols on display.

Transparency
Sets the % transparency of the Legend when Transparent is set to true.

Text
This page gives access to properties which change the appearance of the Legend text's font, the font's fill properties [Hatch Brush properties] and shadow.

Gradient
Use this page to draw a gradient onto the legend canvas and change it's direction and colours.

Shadow
Sets the colour, size, pattern and transparency of the Legend's shadow.

Bevel
Sets the colour, size and style of the Legend's inner and outer bevels.

Customising Legends

Legend events offer the option to completely control define the Legend appearance and content.

OnGetLegendRect event
The Legend outer rectangle, permits changes to the overall size and position of the Legend box. Use in conjunction with the OnGetLegendPos to reposition the Chart Legend and contents.
e.g.

[C#]
private void tChart1_GetLegendRect(object sender, Steema.TeeChart.TChart.GetLegendRectEventArgs e)
        {
            e.Rectangle=new Rectangle(e.Rectangle.Left-100,e.Rectangle.Top,e.Rectangle.Width,e.Rectangle.Height);
        }

OnGetLegendPos event
Modifies the contents of the Legend. The following example could be used with the code above to move Legend contents to the new Legend rectangle.

[C#]
private void tChart1_GetLegendPos(object sender, Steema.TeeChart.TChart.GetLegendPosEventArgs e)
        {
            e.X = e.X-100;
            e.XColor = e.XColor-100;
        }

OnGetLegendText event
Modifies the text of the Legend contents.

[C#]
private void tChart1_GetLegendText(object sender, Steema.TeeChart.TChart.GetLegendTextEventArgs e)
        {
            if(e.Index == 3)
            {e.Text = e.Text + " Index no.:" + e.Index.ToString();}
        }

When placing the Legend within the Chart rectangle area, bear in mind that the Legend paints before Series and Axes and will appear below either of those at any intersection point.


Tutorial6 - Working with Series

Tutorial 6 - Working with Series

Series Types
Series Class structure
Choosing a Series Type
Adding data to a Series
Deleting data points from a Series
Adding Null points to a Series

Mixing Series Types on a Chart
Adding New Series
Choose Axes for a Series
Connecting Series
Changing Series order

Series Value list
Accessing Series Values
Example using Values

Series events
OnClickSeries
OnGetSeriesPointerStyle
OnGetSeriesMark

Series Types

The TChart Series class is the common ancestor for all Series types. When using the TeeChart online help to obtain help on any Series Type, follow the link to the Series class located in the list of inherited types and then click on Series members where a list of all inherited properties and methods will be included.

Series Class structure
As a little background on the structure of the TeeChart Type Library, here is an explanation of the Series classes and interfaces. The diagram below shows the relationship between TeeChart Series classes. All classes derive from the generic "Series" class and thus share "Series" properties and methods. Several abstract Classes derive from Series (Custom3DSeries, CustomBarSeries and CircledSeries), these are highlighted in grey and their interfaces are not directly accessible for programming, their characteristics are inherited by their descendant Series types. All derived Series (in orange) are accessible in the TeeChart gallery for inclusion in your Chart. TeeChart Series, derived in this way, allow programmable access to the inherited properties and methods via a common index structure (see example code later in this section).

You can create and add new and differing series types to the same TChart at runtime.

[C#]
//Add a series at runtime
this.button.TouchUpInside += (sender, e) =>
{
     Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area(tChart1.Chart);
     tmpAreaSeries.FillSampleValues(4);
     //Or
     //Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area();
     //tChart1.Series.Add(tmpAreaSeries);
     //tmpAreaSeries.FillSampleValues(4);
};

All AreaSeries properties and methods are available for the new Series as for any Series created at design time.

An example of mixing different series classes in the same Chart would be to add a Area (Series(0)), Bar (Series(1)) and Line (Series(2)) Series to a Chart. All access a common index structure, the Chart's Series list. To work with the Series may look something like the following:

[C#]
public override ViewDidLoad()
{
               base.ViewDidLoad();

     //You could add the Series at runtime
     Steema.TeeChart.Styles.Area area1 = new Steema.TeeChart.Styles.Area(tChart1.Chart);
     Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
     Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);

     //Use Series common properties
     tChart1.Series[0].FillSampleValues(10);
     tChart1.Series[1].FillSampleValues(10);
     tChart1.Series[2].FillSampleValues(10);
     tChart1.Series[1].Marks.Visible = false;
     tChart1.Series[2].Marks.Visible = false;

     //Modify Bar specific properties
     bar1.BarStyle = Steema.TeeChart.Styles.BarStyles.Pyramid; //Change Bar type
     bar1.Pen.Color = UIColor.Yellow.CGColor; //Bar bounding lines colour

     //Modify Line specific properties
     line1.Stairs = true; //Set line to Stairs
     line1.LinePen.Color = UIColor.Blue.CGColor; //LineSeries bounding lines colour

     //Modify Area specific properties
     area1.AreaBrush.Style = System.Drawing.Drawing2D.HatchStyle.Cross; //Area fill pattern
}

Add image here of the code
----xxxxxxx-------

Choosing a Series Type
Choosing a Series Type for a Chart will very much depend on your own requirements for the Chart. There are occasions however, when due to the number of variables to plot, the choice of Chart may depend on which Series types support the number of input variables. The following table shows the number of variables allowed by each Series type.

Labelling can be used to extend the value of a 2 variable Series Type. See the example below that uses 3 instances of the Bar Series type in the same Chart.
Example
Uses Bar Series types

Product code Month Quantity produced
10 Jan 300
10 Feb 325
10 Mar 287
12 Jan 175
12 Feb 223
12 Mar 241
14 Jan 461
14 Feb 470
14 Mar 455

In its simplest form, the data produces the following Chart, grouping the information by month:

Code:
[C#]
foreach(Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
{tSeries.Marks.Visible = false;}
tChart1.Header.Text = "Production results";

bar1.Add(300,"Jan");
bar1.Add(325,"Feb");
bar1.Add(287,"Mar");
bar1.Title = "Product10";

bar2.Add(175,"Jan");
bar2.Add(223,"Feb");
bar2.Add(241,"Mar");
bar2.Title = "Product12";

bar3.Add(461,"Jan");
bar3.Add(470,"Feb");
bar3.Add(455,"Mar");
bar3.Title = "Product14";

or (grouping by product):

Code:
[C#]
foreach(Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
{tSeries.Marks.Visible = false;}
tChart1.Header.Text = "Production results";

bar1.Add(300,"Product10");
bar1.Add(175,"Product12");
bar1.Add(461,"Product14");
bar1.Title = "Jan";

bar2.Add(325,"Product10");
bar2.Add(223,"Product12");
bar2.Add(470,"Product14");
bar2.Title = "Feb";

bar3.Add(287,"Product10");
bar3.Add(241,"Product12");
bar3.Add(455,"Product14");
bar3.Title = "Mar";

We have added new values to the table above (Stock).

Product code Month Quantity produced Stock level
10 Jan 300 600
10 Feb 325 715
10 Mar 287 676
12 Jan 175 245
12 Feb 223 270
12 Mar 241 315
14 Jan 461 800
14 Feb 470 755
14 Mar 455 835

The values of stock in the table are generally higher than those of monthly production so displaying them gives the following chart (2D this time). The Chart uses Line Series to differentiate Stocks.

Code:
Add the following to the code of the first of the previous examples:
[C#]
line1.Add(600,"Jan");
line1.Add(715,"Feb");
line1.Add(676,"Mar");
line1.Title = "Product10 Stock";
line1.Color = bar1.Color;

line2.Add(245,"Jan");
line2.Add(270,"Feb");
line2.Add(315,"Mar");
line2.Title = "Product10 Stock";
line2.Color = bar2.Color;

line3.Add(800,"Jan");
line3.Add(755,"Feb");
line3.Add(835,"Mar");
line3.Title = "Product10 Stock";
line3.Color = bar3.Color;

Adding data to a Series
Most Series types use the 24 generic overloads of the Add method for adding data. There are some exceptions, see the following table:

Note that all the Series specific Add methods, with the exception of the ShapeSeries, are automatically added as further overloads to the generic Add method and so are accessed from there (e.g. candleSeries1.Add(new DateTime(2002,11,27),100,400,200,300);).

Colour
Colour may be manually added for a point when adding the point
Example

[C#]
bar1.Add(50,"Tomatoes",UIColor.FromRGB(200,200,200).CGColor);

Alternatively, you can allow TeeChart to allocate a colour. TeeChart will choose one of up to 19 unique and as yet unused colours for each new Series, or for each new Series point if Series.ColorEach = True.
Example

[C#]
Random rnd = new Random();
bar1.ColorEach = true;
for(int i = 0; i < 19; ++i)
{
     int higher = i + 65;
     char letter = (char) higher;
     bar1.Add(rnd.Next(100),letter.ToString());
}

A transparent colour may be added to a Point to reserve a space for the value in the ValueList without it showing on the Chart.
Example

[C#]
bar1.Add(45, "My Transparent Bar", UIColor.Clear.CGColor);

Deleting data points from a Series
Use Series.Delete to delete a point from a Series. Series.Delete has two overloads:
public Void Delete(System.Int32)
Deletes the nth point in the Series.

public Void Delete(System.Int32, System.Int32)
Deletes a number of points n starting from the nth point in the Series.
Example
[C#]
bar1.Delete(7,2);  (deletes two points starting from the 8th Series point (index starts at zero))
Series.Clear clears all points from a Series.

Adding Null points to a Series
Series.Add has three overloads which allow you to add a Null point to a Series:
Adds a new null (transparent) point.
public Int32 Add()

Adds a new null point with specified text.
public Int32 Add(System.String)

Adds a new null point at a specified x value with specified text
public Int32 Add(System.Double, System.String)

The second of the above overloads will add a Null point to the Series allowing you to define a label for the point but leaving a break in the Series at that point. In the case of a Line Series, the last point before the break will not join to the first point after the break.
Example

[C#]
line1.Add("Null Point");
Please look up the other two overloads in the TeeChart Help File for examples of their use.

Mixing Series Types on a Chart

TeeChart Pro offers an empty Chart Canvas as a backdrop to data Series. That means that no Chart types are predefined. You define the Chart type you require as a mix of the Series Types that you wish to display. Due to the specialised nature of some Series types it is impractical to mix that Series type with another on a Chart. TeeChart helps you by greying out unsuitable Series types in the Chart Gallery when you arrive to add a new Series. There is no practical limit to the number of Series that you can put in one Chart.

Adding New Series
Add a Series by code.
Example

[C#]
this.button.TouchUpInside += (sender, e) =>
{
     Bar bar1 = new Bar(tChart1.Chart);
     bar1.FillSampleValues(10);
};

Series are added to the SeriesList and are accessible by Index, TChart1.Series(Index), beginning with 0 for the first Series. TeeChart Pro adds a default name for the Series (Series 0, Series 1, etc.). You may modify the name using the Series.Title property.

Choose Axes for a Series
Series added to the Chart will automatically take the Left and Bottom axes as their reference axes. There are 4 axes available, Top, Left, Bottom and Right. By code, changing the axes will look like this:

[C#]
bar1.VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right;
bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;

More than 1 Series may be associated with each Axis. TeeChart will decide the best scale to fit the Series matched to the Axis but you may change Axis scales yourself (See the Axis Tutorial). Additional axes may be added; they will copy the scales associated with their counterpart from the first 4 axes (see the Tutorial section Additional axes).

Connecting Series
You may use a Series as the datasource for another Series by code, see below:

[C#]
Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();
line1.Function = average1;
line1.DataSource = bar1;
bar1.FillSampleValues(10);
line1.CheckDataSource();

See Tutorial 7 - Working with Functions for more information about how to use TeeChart functions.

Changing Series order
Changing series order is easy. Setting a Series to 'Active=False' will hide the Series from the Chart but maintain its data content intact.
To change series order by code use Series.Exchange.

[C#]
tChart1.Series.Exchange(0, 1);  //Change Series(0) with Series(1) in the index order

*Note. After exchanging Series, the index for the Series will be changed. Thus the line of code above will perpetually interchange the 2 Series '0' and '1' if the code is rerun, as 0 becomes 1 and 1 becomes 0.

Series Value list

TeeChart Series store their values in a Valuelist accessible and modifiable via the ValueList Class.

Accessing Series Values
You may access any value in the list:
Example

[C#]
MessageBox.Show(bar1.YValues[3].ToString()); //Displays value of 4th point (index starts at 0) of a BarSeries

Values accessed in this way may be used to set traps on Series data:

[C#]
for(int i = 0; i < bar1.Count; ++i)
{
     if(bar1.YValues[i] > 500)
    {
using(var alert = new UIAlertView("Alert", "Value: (" + bar1.XValues[i] + ", " + bar1.YValues[i] + ") exceeds limit", null, "OK", null))
{
     alert.Show();
}
    }
}

The same value may be obtained via the point ValueIndex used by some Series methods and several Chart events.
Example

[C#]
private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
        {
            if(s.Equals(bar1))
            {
using(var alert1 = new UIAlertView("Alert1", "ValueIndex is: " + valueIndex.ToString()), null, "OK", null))
{
     alert1.Show();
}
using(var alert2 = new UIAlertView("Alert2", "Point's YValue is " + bar1.YValues[valueIndex].ToString()), null, "OK", null))
{
     alert2.Show();
}
            }
        }

Example using Values
This code modifies the value of a BarSeries Bar according to the user's mouseclick.
Example

Use the TChart.ClickSeries event to determine where the user has clicked.
[C#]
private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
        {
            UpDatePoint(valueIndex,tChart1.Axes.Left.CalcPosPoint((e.Y)));
        }

Call the UpdatePoint Sub routine to modify the Bar's value:
[C#]
private void UpDatePoint(int Bar, double Y)
        {
            if(Bar < tChart1.Series[0].Count)
            {
                tChart1.Series[0].YValues[Bar] = Y;
                tChart1.Series[0].Repaint();
            }
        }

Series events

The previous section introduces some use of Series events. This section shows some additional uses.

OnClickSeries
You may use the OnClickSeries event to obtain almost any information about a Series (see the section, Accessing Series Values).

These examples apply to a Series with Datetime data eg These test values may be used for the following event examples:
[C#]
this.button.TouchUpInside += (sender, e) =>
{
     Random rnd = new Random();
     line1.XValues.DateTime = true;
     line1.Pointer.Visible = true;
     line1.Add(DateTime.Parse("25/12/2002 10:30:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("25/12/2002 22:30:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("26/12/2002 09:20:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("26/12/2002 23:30:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("27/12/2002 11:10:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("27/12/2002 20:15:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("28/12/2002 08:15:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("28/12/2002 21:45:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("29/12/2002 12:45:00"),rnd.Next(100),"", UIColor.Red.CGColor);
     line1.Add(DateTime.Parse("29/12/2002 22:05:00"),rnd.Next(100),"", UIColor.Red.CGColor);

     line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;
};

private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
        {
            //The below will show the Value of the nearest Point, not the exact Axis value at the clicked X and Y.
            MessageBox.Show("Date is: " + DateTime.FromOADate(line1.XValues[valueIndex])
            + " Value is: " + line1.YValues[valueIndex]);
        }

OnGetSeriesPointerStyle
For those Series that use the TChart Pointer, you may access and modify the Pointer using the OnGetSeriesPointer event:

Drawing an Uptriangle if the Point is higher than the last, DownTriangle if lower, etc.
[C#]
private void line1_GetPointerStyle(Steema.TeeChart.Styles.CustomPoint series, Steema.TeeChart.Styles.GetPointerStyleEventArgs e)
        {
            if(e.ValueIndex > 0)
            {
                if(line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
                {
                    e.Style = Steema.TeeChart.Styles.PointerStyles.Triangle;
                }
                else if(line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
                {
                    e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle;
                }
                else
                {
                    e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
                }
            }
            else
            {
                e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
            }
        }

OnGetSeriesMark
Use the OnGetSeriesMark event to modify the Mark contents at runtime. The following code varies the MarkText according to the value relative to the last;
TeeChart supports the dragging of Marks in cases of overlapping via the DragMarks Tool:
[C#]
private void line1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e)
        {
            if(e.ValueIndex > 0)
            {
                if(line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
                {
                    e.MarkText = e.MarkText + " (Up)";
                }
                else if(line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
                {
                    e.MarkText = e.MarkText + " (Down)";
                }
                else
                {
                    e.MarkText = e.MarkText + " (No Change)";
                }
            }
        }

The Chart appearance resulting from the last 2 events is:


Tutorial7 - Working with Functions

Tutorial 7 - Working with Functions

Function Types
Function characteristics
Adding a Function
Function Period
Period Style
Deriving Custom Functions

Function Types

Function characteristics
A TeeChart NET for iOS Function is a Series, that can be of almost any Series Type, to which an algebraic function is applied and for which the datasource is another Chart Series.

All Functions derive from the Function Class in the Steema.TeeChart.Functions namespace and inherit Function's Period property. TeeChart NET for iOS offers the following list of predefined functions:

Several Function types support only one input Series. However it is possible to chain link Functions, thus, for example, taking the average of several Series in your Chart to create an Average Function Series, then identify the Trend of the average by using the Average Function as the input to the Trend Function.

Adding a Function
Assuming we start with a completely empty Chart here are the steps in code to build a simple Series-Function related Chart.
[C#]
public override ViewDidLoad()

               base.ViewDidLoad();

     //Add a data Series
     Line line1 = new Line(tChart1.Chart);

     //Populate it with data (here random)
     line1.FillSampleValues(10);

     //Add a series to be used for an Average Function
     Line line2 = new Line(tChart1.Chart);

     //Define the Function Type for the new Series
     Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();
     line2.Function = average1;

     //Define the Datasource for the new Function Series
     line2.DataSource = line1;

     //*Note - When populating your input Series manually you will need to
     //use the Checkdatasource method
     //- See the section entitled 'Defining a Datasource'
     //Change the Period of the Function so that it groups averages
     //every 2 Points
     line2.Function.Period = 2;
     line2.CheckDataSource();

We can add another Function to tell us something about the previous Function
[C#]
this.button.TouchUpInside += (sender, e) =>

     //Let's change to 2D for visibility
     tChart1.Aspect.View3D = false;
     //Add another Series to be used for a 2nd Function
     Line line3 = new Line(tChart1.Chart);
     //Define the Function Type for the new Series
     Steema.TeeChart.Functions.High high1 = new Steema.TeeChart.Functions.High();
     line3.Function = high1;
     //Define the Datasource for the new Function Series
     //Use the existing Function (Series2) as input
     line3.DataSource = tChart1.Series[1];
     //Leave the Period at default 0 (No Period set) to draw
     //A line at Highest of all points of the Average Function
;

Function Period
Period is an important property for working with Functions as the Period defines the range of points across which a Function is cyclically applied.
Example

We have 6 data points (e.g. bars of a Bar Series) with values:

3, 8, 6, 2, 9 and 12

We define a Function Series with Period 0 (default) the average drawn is:

6.667

With Period set to 2 we get 3 values of average as output from the function:

5.5, 4 and 10.5

These values will plot centrally in their period range, i.e. The 1st value between bars 1 and 2 of the input series, 2nd value between bars 3 and 4, etc..

You may define Period by selecting the relevant Series and Function in the Datasource page and clicking the "Options" tab or you may modify Period at runtime using FunctionType.

e.g. Where line1 is the function series:

[C#]
line1.Function.Period = 2;

Below are 2 Charts that highlight the effect of an applied Period

Period Style
Period can be defined to be a range. This is very useful when using DateTime series and we want to express the "Period" of the function as a TimeStep. The property "PeriodStyle" controls how is "Period" expressed.

For example you can now plot the "monthly average of sales" function just using a normal "Average" function on a date-time source series and setting the function period to "one month":

[C#]
public override ViewDidLoad()

               base.ViewDidLoad();
     //Add in a BarSeries and Average Function at design-time.
     Random rnd = new Random();
     tChart1.Aspect.View3D = false;

     TimeSpan month = new TimeSpan(30,0,0,0);
     DateTime today = DateTime.Today;

     bar1.Marks.Visible = false;
     bar1.XValues.DateTime = true;
     tChart1.Axes.Bottom.Labels.Angle = 90;

     for(int i = 0; i < 60; ++i)
        today = today.AddDays(5);
        bar1.Add(today, rnd.Next(100),"",UIColor.Red.CGColor);

     average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
     average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
     average1.Period = month.TotalDays;
     line1.DataSource = bar1;
     line1.CheckDataSource();

This will result in several points, each one showing the "average" of each month of data in the BarSeries.

It's mandatory that points in the source Series should be sorted by date when calculating functions on datetime periods.

The range can also be used for non-datetime series:

[C#]
for(int i = 0; i < 60; ++i)
     bar1.Add(Convert.ToDouble(i), rnd.Next(100),"",UIColor.Red.CGColor);

average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
average1.Period = 6;

This will calculate an average for each group of points inside every "6" interval.
(Points with X >=6, X<6 will be used to calculate the first average, points with X >=6, X<12 will be used to calculate the second average and so on... ).
Notice this is different than calculating an average for every 6 points.

Use the Period Alignment property to align the function Points within the Series range. The following will plot the Function point at the end of a monthly Period:

[C#]
average1.PeriodAlign = Steema.TeeChart.Functions.PeriodAligns.First;
average1.PeriodStyle = Steema.TeeChart.Functions.PeriodStyles.Range;
average1.Period = month.TotalDays;

Period = Month.TotalDays and PeriodAligns.First
As you can see from the picture below, the "average" is plotted at the end
of the month.

Period = Month.TotalDays and PeriodAligns.Last
In this case the "average" is plotted at the beginning of the month.

Deriving Custom Functions
Creating a new Function component is simply creating a new component derived from the Function class (it also can be derived from an existing function class). There are 2 important virtual methods in Function that can be overridden to create a new Function type.

1) Function.Calculate: public virtual double Calculate(Series Source,int First,int Last)

2) Function.CalculateMany: public virtual double CalculateMany(ArrayList SourceSeries, int ValueIndex)

The Calculate method is used to calculate the function result if only one series serves as the datasource. CalculateMany is used to calculate the function result if multiple series can be used as a datasource.

Example : Creating new SquareSum Funtion.

Let's decide we need a SquareSum Function to return the "sum of squares".

This function can have only one datasource or multiple datasources, so we'll override the Calculate and CalculateMany methods.

[C#]
public class SquareSum : Steema.TeeChart.Functions.Function
        public SquareSum(): base()
        public SquareSum(Steema.TeeChart.Chart c): base(c)

        public override double Calculate(Series SourceSeries,int FirstIndex,int LastIndex)
            ValueList v=ValueList(SourceSeries);
            if ( FirstIndex==-1 ) return v.Total;
            else
                double result=0;
                for (int t=FirstIndex; t<=LastIndex; t++)
                    result+=Math.Sqrt(v[t]);
                return result;

        public override double CalculateMany(ArrayList SourceSeriesList,int ValueIndex)
            ValueList v;
            double result=0;

            for (int t=0; t<SourceSeriesList.Count; t++)
                v=ValueList((Series)SourceSeriesList[t]);
                if ( v.Count>ValueIndex )
                    result+=Math.Sqrt(v[ValueIndex]);

            return result;

The FirstIndex and EndIndex variables are used to "loop" all SourceSeries points to calculate the sum of squares.

The "ValueList" method is used to extract the mandatory Steema.TeeChart.ValueList to make the class work with Series types like HorizBarSeries where "XValues" holds the point values and not "YValues".

The "Calculate" method is used when the Series has only one Series as DataSource. When Series have more than one Series as datasources, the "CalculateMany" method is called.

"CalculateMany" will get called once for each point in the source Series, starting from zero and ending with the minimum point count of all datasources.

It is very important to understand the difference between Calculate and CalculateMany. "Calculate" is called when there only one datasource and it's called only once. "CalculateMany" is called several times (one for each point) when there are more than one Series as datasources.


Tutorial8 - iOS Applications

Tutorial 8 - TeeChart NET for iOS Applications

Working with TeeChart NET for iOS is going to be familiar to anybody with experience of both the TeeChart API. However, there are some issues specific to the platform which we will cover here.

Contents
Installing the MonoDevelop IDE and MonoTouch
Running the iPhone example
API changes specific to TeeChart .NET for iOS
Steema.TeeChart.TChart as UIView
Steema.TeeChart.Drawing.Aspect.ZoomScrollStyles
Steema.TeeChart.Drawing.Aspect.ZoomStyles
Important differences between TeeChart .NET for iOS and other TeeChart versions

Installing the MonoDevelop IDE and MonoTouch
At the time of writing, taking into account that we can can only create our iPad and iPhone applications from a MAC, all the tools and APIs necessary for development on the iOS platform are :
Xcode 4 http://developer.apple.com/xcode/
Mono framework http://www.go-mono.com/mono-downloads/download.html
MonoDevelop IDE http://monodevelop.com/
MonoTouch http://ios.xamarin.com/

The following link will take you to an explanation of the steps necessary to correctly install the components listed above:
http://docs.xamarin.com/ios/getting_started/installation

Running the iPhone example
The installer for TeeChart NET for iOS will automatically install some example projects for Apple iPhone and iPad when run on MAC. This examples can be found in the Examples folder under the installation folder . The project can be opened in MonoDevelop with the MonoTouch for iOS license installed and run either in a iPhone/iPad device or in the emulator.

API changes specific to TeeChart .NET for iOS
Steema.TeeChart.TChart as UIView
The TChart component inherits from the UIView class, which allows us to add one or various TChart components within one View, and therefore use all the functionality of just one View

Steema.TeeChart.Drawing.Aspect.ZoomScrollStyles
The ZoomScrollStyles property gets or sets an enum (ZoomScrollStyles) which controls to which gesture movements the TeeChart .NET for IOS responds. So we can set this property to ZoomScrollStyles.Manual, in which case the control will not respond to either iOS generic pinch or drag gestures, to ZoomScrollStylesAuto that will make to change the behavior.

Steema.TeeChart.Drawing.Aspect.ZoomStyles
The ZoomStyles property gets or sets an enum (ZoomStyles) which controls how TeeChart .NET for iOS responds to pinch and drag gestures. So we can set this property to ZoomStyles.InChart, in which case the TeeChart series and axes will respond independently to pinch and drag gestures, or to ZoomStyles.FullChart in which case the entirety of TeeChart responds to them.

Important differences between TeeChart .NET for iOS and other TeeChart versions
While every effort has been made to maintain a high level of performance in terms of zoom (pinch) and scroll (drag) and to maintain the intuitiveness of the TeeChart API across all platforms, in the case of TeeChart for iOS several compromises have had to be made.

As far as we know, everything that can be done with TeeChart on other platforms can also be done on iOS with either pinch and drag deactivated (ZoomScrollStyles=Manual) or by using the FullChart pinch and drag (ZoomStyles= FullChart). With the InChart pinch and drag activated (ZoomStyles= InChart and ZoomScrollStyles != Gestures.Manual) there are going to be instances in which some techniques of working with TeeChart are valid in all platforms other than iOS. As an example of this, consider the case of wanting to draw some text onto the chart which follows a series point as it is zoomed and scrolled. We would achieve this using the following code:

    Points points;
    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
      tChart1.Series.Add(point = new Points());
      point.FillSampleValues();
    }

    void tChart1_AfterDraw(object sender, Graphics3D g)
    {
      int x = point.CalcXPosValue(point[3].X);
      int y = point.CalcYPosValue(point[3].Y);
      g.Font.Color = Color.Red;
      g.Font.Size = 16;
      g.TextOut(x, y, "MyText");
    }

The equivalent code in MonoDevelop with MonoTouch is this:

    Points point;
    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
      tChart1.Series.Add(point = new Points());
      point.FillSampleValues();
    }

    void tChart1_AfterDraw(object sender, Graphics3D g)
    {
      double x = point.CalcXPosValue(point[3].X);
      double y = point.CalcYPosValue(point[3].Y);
      g.Font.Color = Colors.Red;
      g.Font.Size = 16;
      g.TextOut(x, y, "MyText");
    }

However, these two code snippets do not produce the same results on screen. To achieve the same effect, we will have to modify the iOS code snippet thus:

    Points point;
    private void InitializeChart()
    {
      tChart1.Aspect.View3D = false;
      //tChart1.AfterDraw += new PaintChartEventHandler(tChart1_AfterDraw);
      tChart1.Series.Add(point = new Points());
      point.AfterDrawValues += new PaintChartEventHandler(point_AfterDrawValues);
      point.FillSampleValues();
    }

    void point_AfterDrawValues(object sender, Graphics3D g)
    {
      double x = point.CalcXPosValue(point[3].X);
      double y = point.CalcYPosValue(point[3].Y);
      g.Font.Color = Colors.Red;
      g.Font.Size = 16;
      g.TextOut(x, y, "MyText");
    }

The reason for this is that under these circumstances, TeeChart NET for iOS is rendering different Chart elements to multiple canvases, when normally it renders all Chart elements to one canvas. So to enable the text to move with the elements on the series canvas, an event has to be chosen which draws on this same canvas, in this case the Series' AfterDrawValues event. The Chart's AfterDraw event draws to a different canvas in this scenario.


Tutorial9 - Walk-through iPhone and iPad examples

Tutorial 9 - Walk-through iPhone/iPad Examples

As we have mentioned in the last Tutorial, the TeeChart NET for iOS installer includes a folder named Examples, which contains examples which can be opened from MonoDevelop with MonoTouch license installed and runs either in the iPad/iPhone emulator or in the device itself.

The TChartFeatures example includes part of the functionalities incorporated in this version, such as the types of Series available. Each Series type example is adapted for its best visual appearance, whether it is 2D or 3D. In the demo itself we can change the appearance of the Chart if we so desire, for example by applying a different theme, colour palette, rotation, etc. Or we can apply Functions to a particular Series as well as customizing the legend. It also allows us to check the different functionalities by using the available ZoomScrollStyles and ZoomStyles (Gestures).

A CustomDrawing example is also included in the installer which shows how to draw specific texts or objects in the Chart view.

The installer also comes with an iPad example applications showing how to implement a DashBoard chart.

If we want to create a new application where we can add the TChart component to it, all we have to do is add the the reference to the TeeChartiOS.dll to our project. Also, we can reference the TeeChartiOS project directly if we have the version of TeeChart NET for iOS with the source code included.
Once we have completed these simple steps we can start to use the TeeChart component and make use of the classes just like we would with a basic C# project.


Tutorial10- Zoom and Scroll

Tutorial 10 - Zoom and Scroll

Zoom and Scroll are useful aids for focusing on specific data in a densely populated Chart.

Contents

How to Zoom and Scroll using the Gestures
Zoom
Scroll

How to Zoom and Scroll by code
Zoom
Animated Zoom
Zoom events
Scroll

How to Zoom and Scroll using the Gestures

Manual Zoom
There are two ways to zoom in on a Chart, it depends on the ZoomScrollStyle used, If 'manual' style is selected, by using the pinch gesture you will zoom in on the area selected. Releasing the fingers will cause the Chart to redraw the selected area.
To undo the zoom, reverse the pinch gesture, dragging the fingers in towards each other.

Automatic Zoom
If Automatic ZoomScrollStyle is used then TeeChart will zoom and unzoom the Chart in standard iOS style as if the Chart were an image, thus increasing size and zooming into the chart as fingers are dragged apart on the screen and reversing the zoom as fingers are dragged together.

Scroll
To scroll a Chart across, tap with a finger and maintaining pressed, drag in the direction you wish to scroll the Chart. When you release the finger the Chart will remain at the new location.
To undo the scroll, tap over the screen anywhere on the Chart area and drag up and left with the finger. Release the finger and the Chart will redraw to the originally defined Chart area.

How to Zoom and Scroll by code

Zoom
Zoom is enabled by default. Use the Zoom.Allow property to disable zoom. See the Zoom Class for a full list of properties and methods associated with Zoom. To define a rectangular area over which to Zoom use the ZoomRect method.
Example
[C#]
tChart1.Zoom.ZoomRect(new Rectangle(100,100,120,120));
The ZoomRect co-ordinates are defined in screen pixels where 0,0 is the top left hand point of the Chart Panel.
The following code will zoom in on an area between the 2nd and 5th x-axis points, setting the y-axis to the scale of the maximum and minimum points of the entire Chart:

[C#]
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) - tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.ZoomRect(r);

Use 'Undo' to Zoom back out.
TChart1.Zoom.Undo

Animated Zoom
Animated Zoom offers stepped zooming. Instead of jumping from 'zoomed out' to 'zoomed in' in one step, you may set Animated to enabled and define staggered steps for the zoom. Once Animated is enabled you may zoom manually with the Mouse or by code.
Example

[C#]
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) - tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.Animated = true;
tChart1.Zoom.AnimatedSteps = 100;
tChart1.Zoom.ZoomRect(r);

Zoom events
Zooming in manually, or by code, will trigger the TChart.Zoomed event. Zooming out will trigger the TChart.UndoneZoom event.

Scroll
Scroll is enabled in all directions as default. Use the Scroll.Allow property to disable Scroll or limit Scroll to one direction. The easiest way to scroll by code is to use the Axis Scroll method:

[C#]
tChart1.Axes.Bottom.Scroll(3, false);

The value is the offset. 'False' refers to whether or not TeeChart will allow scrolling beyond Series value limits.

Another way to control scroll is to define Axis maximum and minumum to scroll by code:

[C#]
private void ViewDidLoad () {
        int range = Convert.ToInt32(bar1.XValues.Maximum - bar1.XValues.Minimum / 2);
        bar1.FillSampleValues(20);
        tChart1.Panning.Allow = ScrollModes.None;
        hScrollBar1.Value = range;
        hScrollBar1.Minimum = range - 50;
        hScrollBar1.Maximum = range + 50;
}

private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e) {
        tChart1.Axes.Bottom.Automatic = false;
        tChart1.Axes.Bottom.Minimum = e.NewValue;
        tChart1.Axes.Bottom.Maximum = e.NewValue + bar1.Count;
}


Tutorial11 - Custom Drawing on the Chart Panel

Tutorial 11 - Custom drawing on the Chart Panel

TeeChart offers extensive custom drawing facilities via the Canvas object. With Canvas you may add shapes, lines and text anywhere on the Chart Panel and define their colours, pen and brush styles.

Contents

TeeChart Canvas
Drawing order
Ensuring that custom drawn items are saved to the Canvas
Drawing Lines
Canvas Pen and Brush
Adding 2D Shapes
Adding 3D Shapes
Adding text
Applied example

TeeChart Canvas

Drawing order
When using TeeChart's Canvas methods remember that drawing order is important. Drawing a Line on the Chart then adding Series data points will cause the Line to be overdrawn.
There are four principle Chart draw events, which are, in order:
  • BeforeDraw event

  • BeforeDrawAxes event

  • BeforeDrawSeries event

  • AfterDraw event

    • Example:
    [C#]
    private bool afterDraw;
    private bool beforeDraw;
    private bool beforeDrawAxis;
    private bool beforeDrawSeries;

    private void Form1_Load(object sender, System.EventArgs e) {
         SetFlags(ref beforeDraw);
         Bar bar1 = new Bar(tChart1.Chart);
         bar1.FillSampleValues(20);
         radioButton1.Checked = true;
    }
    private void SetFlags(ref bool Flag) {
         beforeDraw = false;
         afterDraw = false;
         beforeDrawAxis = false;
         beforeDrawSeries = false;
         Flag = true;
    }
    private void DrawShape(Steema.TeeChart.Drawing.Graphics3D gg) {
         gg.Brush.Color = Color.Yellow;
         gg.Pen.Visible = true;
         gg.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
         gg.Brush.Visible = true;
         gg.Ellipse(1,1,gg.Chart.Width - 1,gg.Chart.Height - 1);
    }
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(afterDraw) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDraw) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDrawAxes(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDrawAxis) {
         DrawShape(g);
        }
    }
    private void tChart1_BeforeDrawSeries(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
         if(beforeDrawSeries) {
         DrawShape(g);
        }
    }
    private void radioButton4_Click(object sender, System.EventArgs e) {
         SetFlags(ref afterDraw);
         tChart1.Refresh();
    }
    private void radioButton3_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDrawSeries);
         tChart1.Refresh();
    }
    private void radioButton2_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDrawAxis);
         tChart1.Refresh();
    }
    private void radioButton1_Click(object sender, System.EventArgs e) {
         SetFlags(ref beforeDraw);
         tChart1.Refresh();
    }
    Ensuring that custom drawn items are saved to the Canvas
    If you do not place calls to Canvas draw code in one of the Chart events, custom drawing will not be saved to the Canvas permanently thus causing any addition to be lost when an application is minimised or another Window placed over it. Your code does not need to reside directly in the Chart events; user drawn items can be saved for the life of the Chart window if you place code in BeforeDrawSeries/AfterDraw and check for flags set by your runtime Draw methods thus running your draw code when activity is flagged as true, as in the example above.

    Drawing Lines
    Let's add a Canvas Line:
    Example (drawing a line diagonally from top left to bottom right)

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            line1.FillSampleValues(20);
            line1.VertAxis = VerticalAxis.Both;
            line1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.View3D = false;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Point s = new Point(tChart1.Axes.Left.Position, tChart1.Axes.Top.Position);
            Point e = new Point(tChart1.Axes.Right.Position, tChart1.Axes.Bottom.Position);
            g.MoveTo(s);
            g.LineTo(e,0);
    }

    On a 3D Chart the Axis positions are offset from the Chart area due to 3D orthogonal displacement. We can move the Line accordingly:
    Example (drawing a Line diagonally from top left to bottom right in the Chart Area of a 3D Chart)

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            line1.FillSampleValues(20);
            line1.VertAxis = VerticalAxis.Both;
            line1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.Chart3DPercent = 50;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Steema.TeeChart.Drawing.Point3D s = new Steema.TeeChart.Drawing.Point3D();
            s.X = tChart1.Axes.Left.Position;
            s.Y = tChart1.Axes.Top.Position;
            s.Z = 0;

            Steema.TeeChart.Drawing.Point3D e = new Steema.TeeChart.Drawing.Point3D();
            e.X = tChart1.Axes.Right.Position;
            e.Y = tChart1.Axes.Bottom.Position;
            e.Z = tChart1.Aspect.Width3D;

            g.MoveTo(s);
            g.LineTo(e);
    }

    Canvas Pen and Brush
    The Line above is drawn using the Pen and Brush defined for the last object drawn before the Line is drawn. That may or may not be the Pen you want. Change the Pen accordingly:
    Example (define Pen before drawing the Line)

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Point p5 = new Point(line1.CalcXPos(5), line1.CalcYPos(5));
            Point p15 = new Point(line1.CalcXPos(15), line1.CalcYPos(15));
            g.Pen.DashCap = System.Drawing.Drawing2D.DashCap.Triangle;
            g.Pen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;
            g.Pen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
            g.Pen.Transparency = 70;
            g.Pen.Width = 3;
            g.Pen.Color = Color.BlueViolet;
            g.MoveTo(p5);
            g.LineTo(p15, 0);
    }

    Adding 2D Shapes
    Add Canvas Shapes in a similar manner to Canvas Lines. The following example adds a Rectangle in the centre of the Chart Area:
    2D Charts
    2D Charts only support 2D shapes.
    Example

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Size s = new Size(100,100);
            Point l = new Point(g.ChartXCenter - (s.Width / 2), g.ChartYCenter - (s.Height / 2));
            Rectangle r = new Rectangle(l,s);
            g.Pen.Color = Color.Aquamarine;
            g.Brush.Color = Color.Blue;
            g.Rectangle(r);
    }

    3D Charts
    On a 3D Chart you can move the Rectangle in a Z plane too. See the RectangleWithZ method. This example places the Rectangle on the Left Wall but displaces it halfway towards the rear of the Chart (towards the Back Wall).

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.LinePen.Visible = false;
            point3DSeries1.FillSampleValues(20);
            point3DSeries1.VertAxis = VerticalAxis.Both;
            point3DSeries1.HorizAxis = HorizontalAxis.Both;
            tChart1.Aspect.Chart3DPercent = 50;
            tChart1.Axes.Depth.Visible = true;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Size s = new Size(100,100);
            Point l = new Point(tChart1.Axes.Left.Position, g.ChartYCenter - (s.Height / 2));
            Rectangle r = new Rectangle(l,s);
            g.Pen.Color = Color.Aquamarine;
            g.Brush.Color = Color.Blue;
            g.Rectangle(r, tChart1.Aspect.Width3D/2);
    }

    Adding 3D Shapes
    You may add 3D shapes to 3D Charts. This example draws a Cube in the middle of the Chart rectangle:

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.LinePen.Visible = false;
            point3DSeries1.FillSampleValues(20);
            tChart1.Aspect.Chart3DPercent = 50;
            tChart1.Legend.Visible = false;
            tChart1.Axes.Depth.Visible = true;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            Size s = new Size(50,50);
            Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
            Rectangle r = new Rectangle(p,s);
            g.Cube(r, 0, 20, true);
    }

    Adding text
    2D Text location
    Add Text to the last Rectangle:
    Example

    [C#]
    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            string text = "My Text";
            Size s = new Size(150, 50);
            Point p = new Point(g.ChartXCenter - (s.Width/2), g.ChartYCenter - (s.Height/2));
            Rectangle r = new Rectangle(p,s);
            g.Pen.Color = Color.Blue;
            g.Rectangle(r);

            g.TextOut(Convert.ToInt32(g.ChartXCenter - (g.TextWidth(text)/2)), Convert.ToInt32(g.ChartYCenter - (g.TextHeight(text)/2)), text);
    }

    3D Text location
    You can place Text in a differing 3D plane by using the TextOut overload with a z coordinate.
    Example

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            point3DSeries1.FillSampleValues(20);
            point3DSeries1.LinePen.Visible = false;
            tChart1.Aspect.Chart3DPercent = 50;
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            string text = "My Text";
            g.TextOut(g.ChartXCenter, g.ChartYCenter, tChart1.Aspect.Width3D / 2, text);
    }

    Applied example
    This example takes the 3rd and 10th values of a Series, plots a Line between them and tells us the value of the first and Last point of the new Line and the difference between them:
    Example

    [C#]
    private void Form1_Load(object sender, System.EventArgs e) {
            tChart1.Aspect.View3D = false;
            line1.FillSampleValues(20);
    }

    private void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) {
            if(tChart1.Series.Count > 0){
                if(tChart1.Series[0].Count > 10) {
                    Series s = tChart1.Series[0];
                    int h = Convert.ToInt32(g.TextHeight("H"));
                    Point p1 = new Point(s.CalcXPos(3), s.CalcYPos(3));
                    Point p2 = new Point(s.CalcXPos(10), s.CalcYPos(10));
                    g.Pen.Color = Color.Blue;
                    g.Pen.Width = 2;
                    g.Pen.Style = System.Drawing.Drawing2D.DashStyle.Dash;
                    g.MoveTo(p1);
                    g.LineTo(p2, 0);
                    g.TextOut(p1.X, p1.Y - h, "Point value: " + s.YValues[3].ToString());
                    g.TextOut(p2.X, p2.Y, "Point value: " + s.YValues[10].ToString());
                    g.TextOut(p2.X, p2.Y + h, "Change is: " + Convert.ToString(s.YValues[3] - s.YValues[10]));
                }
            }
    }


Tutorial12 - Designtime Runtime and License Requirements

Tutorial 12 - Runtime and License Requirements

TeeChart runtime Files
Your TeeChart application will need to be distributed with the TeeChartIOS.dll.

Please see the license.txt file about the License.