Animated Activity Gauge with TeeChart Pro VCL

At the moment TeeChart Pro for VCL / FMX does not have a Series type available to create Activity Gauges, maybe in the near future, but here I will show how using another series type and some tricks we can create this kind of Chart.

The series type to use is the Donut series. We’ve to add as many Donut series as Activities we want on our chart.

I’m going to take advantage of the ease with which we can ask the TChart component to setup most of the steps at designtime, right from the Chart editor itself.

Once we have the Chart in the form and have added the different Donut Series, it doesn’t seem possible to get the desired result, but we’ll see…
The first thing to do is set the Chart to 2D, hide the Title and the Legend, we’ll also hide the Marks for each of the series. Here we have :

Now, it’s time to modify one of the important properties that will start to make changes. It’s the property named “Multiple Pies”, within the Editor -> Series -> Series1 -> Donut -> Options -> Multiple Pies. By default this is set to “Automatic”, we’ll change it to “Disable” for all of the Series.

Once this property is modified, it will look like we only have one Donut series in the Chart, as shown here.

It is time to change another important property that will modify the Chart, it is the property named “Hole%”, we find it within the options of each series, in the “Format” tab. Here we’ve to set different percentage values for each of the Donut series’ holes, distributing the size between the different Series. The first Series must contain smaller hole size, we can set a value of “60%”, in the second Series (in the case we’ve three series) we’ll set a value of “74%” and “88%” for the third. The result will be:

Now, all you have to do is hide the Pen for each Series, or set a different color and size, and we’ll have the look of the Chart that we wanted.

 

As an extra characteristic of the Series or Chart, I’m going to add a Text, just in the centre, that will show the activities value. To do this, I can use an “Annotation Tool” already available in TeeChart, and also created/added via the TChart editor. Set annotation alignment to “center” and format the font.

An important feature of this Series type (Activity Gauge) it’s its animation. TeeChart Pro incorporates several Animations for the different Series types, but in this case, as we’re creating a type of series totally personalized, we will create the animation manually.

We’ve to add three TTimer objects to the form, one for each series, set them “Enabled” to False and define an “Interval” of 10.

We can also add a Button component, which is the one that we’ll use to start the animation.

Now let’s give it functionality; we’ll do the next steps through code.

The first thing we do via code, is create a method where we’ll reset and initialize all the Series values, named “ResetValues”, this will be the code:

procedure TActivityGaugeForm.ResetValues;

var i : integer;
begin
  ChartTool1.Text := '0 %';
  Chart1.Hover.Visible := false;

  for i := 0 to Chart1.SeriesCount-1 do
  begin
    Chart1[i].FillSampleValues(2);
    Chart1[i].YValue[0] := 100;
    Chart1[i].YValue[1] := 0;
    Chart1[i].ValueColor[0] := Series1.Pen.Color;
  end;
end;

We’ll call this method from the CreateForm event of Application, and also every time Button1 is clicked :

procedure TActivityGaugeForm.FormCreate(Sender: TObject);
begin
  ResetValues;
end;

procedure TActivityGaugeForm.Button1Click(Sender: TObject);
begin
  ResetValues;
  Timer1.Enabled := true;
  Button1.Enabled := false;
end;

Now, the only missing thing is to add the code that generates the Series animation inside its corresponding Timer event :

procedure TActivityGaugeForm.Timer1Timer(Sender: TObject);
begin
  Series1.YValue[0] := Series1.YValue[0]-1;
  Series1.YValue[1] := Series1.YValue[1]+1;

  ChartTool1.Text := round(Series1.YValue[1]).ToString() + ' %';

  if (Series1.YValue[1] = 90) then
  begin
    Timer1.Enabled := false;
    Timer2.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer2Timer(Sender: TObject);
begin
  Series2.YValue[0] := Series2.YValue[0]-1;
  Series2.YValue[1] := Series2.YValue[1]+1;

  ChartTool1.Text := round(Series2.YValue[1]).ToString() + ' %';

  if (Series2.YValue[1] = 75) then
  begin
    Timer2.Enabled := false;
    Timer3.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer3Timer(Sender: TObject);
begin
  Series3.YValue[0] := Series3.YValue[0]-1;
  Series3.YValue[1] := Series3.YValue[1]+1;

  ChartTool1.Text := round(Series3.YValue[1]).ToString() + ' %';

  if (Series3.YValue[1] = 60) then
  begin
    Timer3.Enabled := false;
    Button1.Enabled := true;
  end;
end;

We have everything. Now it’s time to run the application and see the result. You should see something similar to:

 

Source code of the example available at the Steema Github.

 

Creating Gauge Visualizations with TeeChart Pro VCL / FMX in your Applications

Gauges are increasingly used in our applications. Their capability to show different data sets, whether static or moving over time, makes gauges a valuable chart for dashboards or any other application which visually represents data.

 

First impressions count, and it’s important to understand data at a quick glance. For this reason dashboards are on the up and becoming increasingly more prevalent in modern data applications, hence we are seeing the many different types of gauges playing a vital role in dashboard design.

 

In this blog article, we’re going to look at the possibilities that TeeChart VCL/FMX offer us to simplify and speed up the creation of this type of data visualisation.

 

TeeChart Pro for VCL and FireMonkey include numerous professional chart styles, amongst which we find a wide range of gauges. It’s easy to start adding gauges to your Apps with the TeeChart components library. We can create the panel or dashboard we are referring to without the need to write a single line of code, and what’s more we can do so for all platforms supported by Embarcadero, making it an important cross-platform tool.

 

Note that all the functionality contained in the TeeChart Pro library of components is cross-platform compatible.

 

To begin with, let’s take a look at all the gauge types available with TeeChart Pro:

image1

 

If we create a new application, display its form and add a TeeChart Chart to it from the component library, we can then double-click on the Chart to open the Chart Editor. From here we can add Series to the Chart and personalise them to our taste, all at designtime. To add a new Gauge Series we select ‘Add’ from the ‘Series’ section and go to the Gauges tab in the gallery that has opened, as you can see in Image 1.

Types of Gauges:

Numeric Gauge Linear Gauge Vertical Gauge
     

 

Circular Gauge Knob Gauge Clock Gauge
 
 
 

Each Gauge type has its own characteristics and functionality.

In this example, we’re going to add as many charts as there are gauge types available and we’ll change the appearance of each one of them via each of their respective editors.

 

TeeChart allows us to personalise each Series from the Object Inspector (and in VCL also from its own Editor dialogue).

 

image2

 

We can download the demo from the Steema area on GitHub:

Using Gauges sample at GitHub

 

Using TeeChart we can always create any type of Gauge or Chart personalised to our requirements, that being because the TeeChart Canvas allows us to paint any object on it.

For example, if what we want is to create a type of Gauge of the style ‘Radial Gauge’ we can easily create it via a Donut Series. We’ll simply need to set a total angle (for example, 180º), position the Donut in the centre of the Chart via the 3D editor tab (using horizontal and vertical offset), adding an annotation tool in the centre for the dynamic percentage information.

 

Having done that, it’s only left for us to add values to the Series (for example 15 and 85). The result being:

Get more info and download the latest TeeChart Pro for VCL and FMX version at :

https://www.steema.com/product/vcl

 

Check out the new StandardSeriesDemo example

Check out the new StandardSeriesDemo example which has been created for most of the Steema TeeChart products.

You can download and check the source code for each TeeChart version at the Steema GitHub page :

https://github.com/Steema/TeeChart-for-.NET-CSharp-WinForms-samples/tree/master/StandardSeriesDemo (for TeeChart for NET WinForms -CSharp).

https://github.com/Steema/TeeChart-for-FireMonkey-applications-samples/tree/master/StandardSeriesDemo (for TeeChart for FireMonkey FMX).

https://github.com/Steema/TeeChart-ActiveX-samples/tree/master/StandardSeriesDemo (for TeeChart ActiveX).

https://github.com/Steema/teechart-xamarin-foms-samples/tree/master/StandardSeriesDemo (for TeeChart for Xamarin.Forms).

https://github.com/Steema/TeeChart-Java-for-Swing-applications-samples/tree/master/StandardSeriesDemo (for TeeChart for Java).

StandardSeriesDemo1 StandardSeriesDemo2 StandardSeriesDemo3 StandardSeriesDemo4

 

DashBoards and Data Visualization using Xamarin.Forms and TeeChart

DashBoards and Data Visualization using Xamarin.Forms and TeeChart

This article is going to show how easy it is to create dashboard designs to show information, especially data, by using the layouts included in Xamarin.Forms and how to use the TeeChart charting library, which fully supports Xamarin.Forms.

In this example several Charts will be added to the layout, choosing a specific design which will be adjusted for each device depending on the platform chosen.

The first step is to create a new Xamarin.Forms application (Portable)
New Project -> Visual C# -> Mobile Apps -> Blank App (Xamarin.Forms.Portable)

image1

 

Now, we’re going to add the TeeChart for Xamarin.Forms libraries as a reference to our projects to be able to use it.

Find the dlls for each specific platform on your hard disk (at the TeeChart for Xamarin.Forms installation folder). The TeeChart.PCL library also has to be referenced in all the projects.

 

Adding the TeeChart for Xamarin.Forms library as reference to the project.

 

TeeChart.PCL for the TeeChartDashBoards Portable project

TeeChart.PCL.Android.dll for the TeeChartDashBoards.Droid project

TeeChart.PCL.iOS.Unified.dll for the TeeChartDashBoards.iOS project

TeeChart.WP8.dll for the TeeChartDashBoards.WinPhone project

 

In order to make use of the TeeChart charting library we need to create a View which will contain the Chart component on it to be able to add it on our project, this “ChartView.cs” class has to be defined into the main project  (all the platforms will make use of it).

 

To create, just add a new class to the TeeCahrtDashBoards Portable project and add the following code to it :

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TeeChartDashBoards
{
public class ChartView: View
{
public ChartView()
{
}

public EventHandler OnInvalidateDisplay;

public static readonly BindableProperty ModelProperty =
BindableProperty.Create(“ModelProperty”, typeof(Steema.TeeChart.Chart), typeof(ChartView), null);

public Steema.TeeChart.Chart Model
{
get { return (Steema.TeeChart.Chart)GetValue(ModelProperty); }
set { SetValue(ModelProperty, value); }
}

public void InvalidateDisplay()
{
if (OnInvalidateDisplay != null)
OnInvalidateDisplay(this, null);
}
}
}

 

 

Now, in order to make use of the ChartView, a renderer class is needed for each specific platform, so we’ll create a new class named “ChartViewRenderer.cs” for each platform and add the following code :

image2

This is the code for the Android project :

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Steema.TeeChart;
using TeeChartDashBoards;

[assembly: ExportRenderer(typeof(ChartView), typeof(ChartViewRenderer))]
namespace TeeChartDashBoards.Droid
{
public class ChartViewRenderer: ViewRenderer
{
protected TChart NativeControl
{
get
{
return ((TChart)Control);
}
}

protected ChartView NativeElement
{
get
{
return ((ChartView)Element);
}
}

protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);

if (Control == null)
{
var chartView = new Steema.TeeChart.TChart(Context);

chartView.Chart = NativeElement.Model;

SetNativeControl(chartView);
}

if (e.OldElement != null)
{
//unhook old events
}

if (e.NewElement != null)
{
//hook old events
}
}
}
}

 

Do the same for the iOS project, adding the following code :

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using TeeChartDashBoards;

[assembly: ExportRenderer(typeof(ChartView), typeof(TeeChartDashBoards.iOS.ChartViewRenderer))]
namespace TeeChartDashBoards.iOS
{
public class ChartViewRenderer : ViewRenderer<ChartView, Steema.TeeChart.TChart>
{
protected override void OnElementChanged(ElementChangedEventArgs<ChartView> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || this.Element == null)
return;

var chartView = new Steema.TeeChart.TChart();

chartView.Chart = Element.Model;

SetNativeControl(chartView);
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
}
}
}

 

and the for the WinPhone project :

 

using TeeChartDashBoards;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Platform.WinPhone;

[assembly: ExportRenderer(typeof(ChartView), typeof(TeeChartDashBoards.WP8.ChartViewRenderer))]
namespace TeeChartDashBoards.WinPhone
{
public class ChartViewRenderer : ViewRenderer<ChartView, Steema.TeeChart.TChart>
{
protected override void OnElementChanged(ElementChangedEventArgs<ChartView> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || this.Element == null)
return;

var chartView = new Steema.TeeChart.TChart();

chartView.Chart = Element.Model;
chartView.Aspect.ClipPoints = false;
chartView.Aspect.ExtendAxes = true;

SetNativeControl(chartView);
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
}
}
}

 

At this point, if we do “build solution” all should compile fine.

That being the case, it’s time to create a new Content Page in the main project, the initial page which will appear once the app is launched in one of the available platforms. Set “Home.cs” as the name for the page.

The solution should look like :

image3

Inside this page, the first thing we’ll do is to remove all the code that has been generated by default and will add a code that creates a Navigation page which will allow us to navigate through all the Charts inside the dashboard :

 

public Home()
{
NavigationPage.SetHasNavigationBar(this, false);
}

 

Now, we’ll define the layout, choosing the Grid layout that fits our needs. The grid layout allows one to specify the number of rows and columns to show and define the rowspan or colspan if needed (this will allow us to make the dashboard nicer) :

 

Grid grid = new Grid
{
VerticalOptions = LayoutOptions.FillAndExpand,
Padding = 5,
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
},
ColumnDefinitions =
{
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
}
};

Content = grid;

 

Now it’s time to create the Charts that will be added on our dashboard. We’ll add seven Charts. First of all, we’ll create a “DashBoards” folder in the main project to add the content pages there, one for each chart. This folder has to be created one time in the main project (Portable).

Each page will define a specific chart with the Series used on it and its customised appearance. We’ll start with the content page named Page1.cs. We’ll use the following code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;
using Steema.TeeChart;

using Xamarin.Forms;

namespace TeeChartDashBoards.DashBoards
{
public class Page1 : ContentPage
{
Chart dashBoard0;
public ChartView DashView0;
public Page1()
{
// NavigationPage.SetHasNavigationBar(this, false);

dashBoard0 = new Chart();
dashBoard0.Aspect.View3D = false;
Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar();
Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line();
dashBoard0.Series.Add(bar1);
dashBoard0.Series.Add(line1);
//barline chart
bar1.Clear();
bar1.Add(20);
bar1.Add(50);
bar1.Add(10);
bar1.Add(70);
bar1.Add(46);
bar1.Pen.Visible = false;
bar1.BarStyle = Steema.TeeChart.Styles.BarStyles.RectGradient;
bar1.Marks.Visible = false;
bar1.Gradient.StartColor = Color.White;
bar1.Gradient.EndColor = Color.FromRgb(102, 205, 170);
bar1.Marks.Visible = true;
bar1.Marks.Shadow.Visible = false;
bar1.Marks.Color = Color.White;
bar1.Marks.Font.Size = 15;
bar1.Marks.Font.Color = Color.FromRgb(102, 205, 170);
bar1.Marks.Pen.Visible = false;
bar1.Marks.ArrowLength = 5;
bar1.Color = Color.White;

line1.Clear();
line1.Add(0, 45);
line1.Add(0.444444444444444, 55);
line1.Add(0.888888888888889, 75);
line1.Add(1.33333333333333, 65);
line1.Add(1.77777777777778, 45);
line1.Add(2.22222222222222, 80);
line1.Add(2.66666666666667, 85);
line1.Add(3.11111111111111, 98);
line1.Add(3.55555555555556, 75);
line1.Add(4, 68);
line1.Color = Color.FromRgb(255, 255, 240);

line1.LinePen.Width = 3;
line1.Smoothed = true;

dashBoard0.Panel.Color = Color.FromRgb(102, 205, 170);
dashBoard0.Panel.Gradient.Visible = false;
dashBoard0.Walls.Back.Visible = false;
dashBoard0.Title.Text = “Bars and Lines”;
dashBoard0.Title.Alignment = TextAlignment.Start;
dashBoard0.Title.Font.Size = 22;
dashBoard0.Title.Font.Color = Color.White;
//dashBoard0.Title.Font.Name = “”;
dashBoard0.Axes.Left.AxisPen.Visible = false;
dashBoard0.Axes.Bottom.AxisPen.Color = Color.White;
dashBoard0.Legend.Visible = false;
dashBoard0.Axes.Left.Grid.Color = Color.White;
dashBoard0.Axes.Left.Grid.Style = Steema.TeeChart.Drawing.DashStyle.Dot;
dashBoard0.Axes.Left.Labels.Font.Color = Color.White;
dashBoard0.Axes.Bottom.Labels.Font.Color = Color.White;
dashBoard0.Axes.Left.Increment = 25;

DashView0 = new ChartView
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
DashView0.Model = dashBoard0;

Content = new StackLayout
{
Children = {
DashView0
}
};
}
}
}

 

The code above defines a Chart component for the page, adds some series styles to it and then set some custom aspects. I’m not going to add all the seven code pages here, as the same code structure has to be used, just that we can use other Series types and change the aspect settings as preferred. You will find the ones I have chosen by downloading the complete example at the bottom of the page. In order to follow this article do the same for other pages (Page2.cs, Page3.cs,…) as you have done for the first page.

 

 

Now that we have all the Chart styles (pages) we want to appear in our dashboard we’ll go back to the home page to add the necessary code to call each one of the pages and add it to the dashboard.

From here we call each one of the pages generated to be added to each of the cells of the grid; in this way we avoid having to recreate the charts.

First we create the seven DashBoard Charts, just before assigning the content to the grid:

 

// Create the Chart pages whose contain a specific Chart on each one
DashBoards.Page1 dashchart0 = new DashBoards.Page1();
DashBoards.Page2 dashchart1 = new DashBoards.Page2();
DashBoards.Page3 dashchart2 = new DashBoards.Page3();
DashBoards.Page4 dashchart3 = new DashBoards.Page4();
DashBoards.Page5 dashchart4 = new DashBoards.Page5();
DashBoards.Page6 dashchart5 = new DashBoards.Page6();
DashBoards.Page7 dashchart6 = new DashBoards.Page7();

 

To be able to navigate between each Content Page (available Chart pages) I’ve decided to create a button and add it to each cell. Some other ways might also work in order to execute part of code once cell is tapped, but this one allows one to do it easily, and also this way, lets us take advantage of the button class functionalities.

We need to create a button for each dashChart. Here’s the code for one of them :

 

Button button0 = new Button()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Command = new Command(() => Navigation.PushAsync(new DashBoards.Page1()))
};

 

And now we’ll add all the Charts and buttons created to the Grid layout. I’ve chosen some specific rowspan and colspan for some cells, just to look better, but anyone can customise it their way:

 

// Grid
grid.Children.Add(dashchart0.DashView0, 0,2,0,1);
grid.Children.Add(button0,0,2,0,1);
grid.Children.Add(dashchart1.DashView1, 2,4,0,1);
grid.Children.Add(button1,2,4,0,1);
grid.Children.Add(dashchart2.DashView2, 0, 1);
grid.Children.Add(button2,0, 1);
grid.Children.Add(dashchart3.DashView3, 1, 3, 1, 2);
grid.Children.Add(button3, 1,3,1,2);
grid.Children.Add(dashchart4.DashView4, 3,4,1,3);
grid.Children.Add(button4, 3, 4, 1, 3);
grid.Children.Add(dashchart5.DashView5, 0, 2, 2, 3);
grid.Children.Add(button5, 0, 2, 2, 3);
grid.Children.Add(dashchart6.DashView6, 2, 2);
grid.Children.Add(button6, 2, 2);

 

The last steps are to modify the App.cs class. This one needs to call the Home.cs content page :

 

public App()

{
// The root page of your application
MainPage = new NavigationPage(new Home());
}

 

We’ve also to modify the MainPage.xaml.cs page in order for it to work fine on WinPhone :

 

public MainPage()
{
InitializeComponent();

Forms.Init();
Content = new TeeChartDashBoards.Home().ConvertPageToUIElement(this);
}

 

Now we’re going to try to do a build for all the projects, run the app on each platform (IOS, Android y WinPhone) and see the results.

 

The source code of this example can be downloaded from the Steema GitHub page.

 

The result should look like:

grid

 

TeeChart NET for iOS and Xamarin.iOS Unified API

As you know the TeeChart NET for iOS have been available since the first MonoTouch version created by Xamarin team. The TeeChart product allows to add professional Charts to your apps easily.

With a very few lines of code you can create the Chart, customize it, set a DataSource for the data and add as a View to the app. You just need to reference to the TeeChart.IOS dll and start working with it. Here you can find an article which shows how to display data from SQLite database into the Chart. This all using a Classic Xamarin iPnone project and the MonoTouch API.

Now Xamarin has introduced the new Xamarin.iOS Unified API. This new api allow to support 32 and 64 bit applications with the same binary. See more info about the Unified API here.

In order to continue supporting all the available Xamarin options, Steema has prepared the new TeeChart NET for Xamarin.iOS Unified version. Now both (the Classic and UInified versions) are included into the TeeChart NET for Xamarin.iOS product, so you can decide which one to use depending on your needs.

You can download the new installer at the customers download page or at the Evaluation versions page.

Here I’m going to show how to create a small dashboard application which uses several Charts on it by using the new Xamarin.iOS Unified and the TeeChart.iOS.Unified versions.

All from the Xamarin Studio IDE.

1) Creating the new Xamarin.iOS app from Xamarin Studio :
Open Xamarin Studio and go to File -> New -> Solution and then select c# -> iOS -> Unified API -> iPhone -> Single View Application.

TeeChartNET_IOS_Unified_1
2) Adding the TeeChart NET for Xamarin.iOS reference to the project :
Right click over the Project references and click “Add references”. Find the TeeChart.iOS.Unified.dll on your hard disk and add it to the the project references.

TeeChartNET_IOS_Unified_2
3) Adding code to the App’s RootViewController :
In order to add some Charts to our application we have to add the using Steema.TeeChart to the top of the unit :

using Steema.TeeChart;
Then create and customize the Charts inside the main View. First we define all the Chart View object we’re going to use, and also an image which will be used to load the logo.


TChart chart1;
TChart chart2;
TChart chart3;
TChart chart4;
UIImageView imageview;

Inside the ViewDidLoad method we’ll create all the Charts, create the Series we want to use and set the specific aspect and features for each Chart. We’ll add the following code :


public override void ViewDidLoad()
{
base.ViewDidLoad();

// Create the Chart View objects
chart1 = new TChart();
chart2 = new TChart();
chart3 = new TChart();
chart4 = new TChart();

// Setting specific frame for each Chart
CoreGraphics.CGRect r1 = this.View.Frame;
r1.Height = r1.Height / 4;
r1.Y = (r1.Height*3)-50;
chart1.Frame = r1 ;

CoreGraphics.CGRect r4 = this.View.Frame;
r4.Height = r4.Height / 4;
r4.Y = (r4.Height*2)-50;
chart4.Frame = r4 ;

CoreGraphics.CGRect r2 = this.View.Frame;
r2.Height = r2.Height / 2 - 50;
r2.Width = r2.Width / 2;
r2.Y = 0;
chart2.Frame = r2 ;

CoreGraphics.CGRect r3 = this.View.Frame;
r3.Height = r3.Height / 2 - 50;
r3.Width = r3.Width / 2;
r3.X = r3.Width;
r3.Y = 0;
chart3.Frame = r3 ;

// Adding Series and features for Chart 1
chart1.Series.Add (new Steema.TeeChart.Styles.Volume ());
chart1.Series [0].FillSampleValues ();
chart1.Aspect.View3D = false;
chart1.Axes.Bottom.Grid.Visible = false;
chart1.Legend.Visible = false;
chart1.Axes.Left.Visible = false;
chart1.Panel.Gradient.Visible = false;
chart1.Panel.Color = UIColor.Black.CGColor;
chart1.Walls.Back.Transparent = true;
chart1.Legend.Visible = false;
chart1.Axes.Bottom.Labels.Font.Color = UIColor.FromRGB (220, 220, 220).CGColor;

// Adding Series and features to the Chart 2
Steema.TeeChart.Styles.CircularGauge gauge1 = new Steema.TeeChart.Styles.CircularGauge ();
chart2.Series.Add (gauge1);
chart2.Axes.Left.Labels.Font.Size = 5;
gauge1.Frame.Width = 15;
gauge1.Ticks.VertSize = 3;
gauge1.Center.Shadow.Visible = false;
gauge1.Axis.AxisPen.Visible = false;
gauge1.FaceBrush.Gradient.Visible = false;
gauge1.FaceBrush.Color = UIColor.FromRGB(220,220,220).CGColor;
gauge1.Hand.Color = UIColor.FromRGB (255, 65, 56).CGColor;
gauge1.Hand.Gradient.Visible = false;
gauge1.Hand.Shadow.Visible = false;
gauge1.Axis.AxisPen.Visible = false;
gauge1.Value = 75;
gauge1.Ticks.VertSize = 3;
chart2.Panel.Gradient.Visible = false;
chart2.Panel.Color = UIColor.Black.CGColor;
chart2.Panel.MarginTop = 0;
chart2.Panel.MarginLeft = 0;
chart2.Panel.MarginBottom = 0;
chart2.Panel.MarginRight = 0;

// Adding Series and features to the Chart 3
Steema.TeeChart.Styles.CircularGauge gauge2 = new Steema.TeeChart.Styles.CircularGauge ();
chart3.Series.Add (gauge2);
chart3.Axes.Left.Labels.Font.Size = 5;
gauge2.Frame.Width = 15;
gauge2.Ticks.VertSize = 3;
gauge2.Axis.AxisPen.Visible = false;
gauge2.Center.Shadow.Visible = false;
gauge2.FaceBrush.Gradient.Visible = false;
gauge2.FaceBrush.Color = UIColor.FromRGB(220,220,220).CGColor;
gauge2.Hand.Color = UIColor.FromRGB (255, 65, 56).CGColor;
gauge2.Hand.Gradient.Visible = false;
gauge2.Hand.Shadow.Visible = false;
gauge2.Axis.AxisPen.Visible = false;
gauge2.Value = 50;
gauge2.Ticks.VertSize = 3;
chart3.Panel.Gradient.Visible = false;
chart3.Panel.Color = UIColor.Black.CGColor;
chart3.Panel.MarginTop = 0;
chart3.Panel.MarginLeft = 0;
chart3.Panel.MarginBottom = 0;
chart3.Panel.MarginRight = 0;

// Adding series and features for the Chart 4
chart4.Series.Add (new Steema.TeeChart.Styles.Line ());
chart4.Series.Add (new Steema.TeeChart.Styles.Line ());
chart4.Series.Add (new Steema.TeeChart.Styles.Line ());
chart4.Series [0].FillSampleValues (20);
chart4.Series [1].FillSampleValues (20);
chart4.Series [2].FillSampleValues (20);
chart4.Series [0].Marks.Visible = false;
chart4.Series [1].Marks.Visible = false;
chart4.Series [2].Marks.Visible = false;
(chart4.Series [0] as Steema.TeeChart.Styles.Line).LinePen.Width = 3;
(chart4.Series [1] as Steema.TeeChart.Styles.Line).LinePen.Width = 3;
(chart4.Series [2] as Steema.TeeChart.Styles.Line).LinePen.Width = 3;
chart4.Aspect.View3D = false;
chart4.Axes.Bottom.Increment = 3;
chart4.Panel.Gradient.Visible = false;
chart4.Panel.Color = UIColor.Black.CGColor;
chart4.Walls.Back.Transparent = true;
chart4.Legend.Visible = false;
chart4.Axes.Left.Visible = false;
chart4.Axes.Botto.Labels.Font.Color = UIColor.FomRGB (220, 220, 220.CGColor;

// Adding Chart views to the main View
this.View.AddSubview(chart1);
this.View.AddSubview(chart2);
this.View.AddSubview(chart3);
this.View.AddSubview(chart4);

// Setting general properties for alll the Charts
chart1.Header.Visible = false;
chart2.Header.Visible = false;
chart3.Header.Visible = false;
chart4.Header.Visible = false;

this.View.BackgroundColor = UIColor.Black;

// Adding logo to the App
imageview = new UIImageView (UIImage.FromBundle ("logo.png"));
CoreGraphics.CGRect rimage = new CoreGraphics.CGRect(95,this.View.Frame.Height-50,this.View.Frame.Width/2-30,50);

imageview.Frame = rimage;
this.View.AddSubview (imageview);
}

Before to try to cmpile and run the app, we’ll have to add the “logo.png” image at the “Resources” folder of our project.

Once this has been done, we can try to run our application, and the result should look like the following image :

TeeChartNET_IOS_Unified_3

 

You can download the source code of this example here.