XamarinAndroidTutorial9

From Steema Software Reference Wiki
Jump to: navigation, search

Net android.png

Contents page
Previous | Next

Tutorial 9 - TeeChart for Xamarin.Android Applications


Working with TeeChart for Xamarin.Android 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.

Installing Xamarin.Android

At the time of writing, Xamarin.Android applications can be created either from Windows or MAC environments, all the tools and APIs necessary for development on the Android platform are :
Mono framework http://www.go-mono.com/mono-downloads/download.html
Java JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html
Android SDK http://developer.android.com/sdk/index.html
Visual Studio IDE http://www.microsoft.com/visualstudio/en-gb (Windows only)
MonoDevelop IDE http://monodevelop.com/ (Windows and MacOS) (Windows and MacOS)
Xamarin.Android http://android.xamarin.com/

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

Running the Android example


The installer for TeeChart for Xamarin.Android will automatically install some example projects for Android. Those examples can be found in the Examples folder under the installation folder. Projects can be opened in MonoDevelop, Xamarin.Studio or Visual Studio with Xamarin.Android installed and run either in an Anrdoid device (licensed version ony) or in the emulator.

API changes specific to TeeChart .NET for Android

Steema.TeeChart.TChart as FrameLayout

The TChart component inherits from the FrameLayout 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.Zoom.Style

The Zoom.Style property gets or sets an enum (ZoomStyles) which controls how TeeChart for Xamarin.Android 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 for Xamarin.Android 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 Android 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 Android by using the FullChart pinch and drag (ZoomStyles= FullChart). With the InChart pinch and drag activated (ZoomStyles= InChart) there are going to be instances in which some techniques of working with TeeChart are valid in all platforms other than Android. 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 Xamarin.iOS is this:

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

    void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.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");
    }

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

    private Steema.TeeChart.TChart tChart1; 
    private Steema.TeeChart.Styles.Points point;

    private void InitializeChart()
    {
      tChart1 = new Steema.TeeChart.TChart(this);

      tChart1.Aspect.View3D = false;
      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.InChart;
      //tChart1.AfterDraw = new Steema.TeeChart.PaintChartEventHandler(tChart1_AfterDraw);
      tChart1.Series.Add(point = new Steema.TeeChart.Styles.Points());
      point.AfterDrawValues = new Steema.TeeChart.PaintChartEventHandler(point_AfterDrawValues);
      point.FillSampleValues();

      SetContentView(tChart1);
    }

    void point_AfterDrawValues(object sender, Steema.TeeChart.Drawing.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 reason for this is that under these circumstances, TeeChart for Xamarin.Android 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.



PREVIOUS

NEXT


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