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.