Series animation example?

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
IliaStoilov
Newbie
Newbie
Posts: 15
Joined: Tue Nov 17, 2015 12:00 am

Series animation example?

Post by IliaStoilov » Thu Jun 09, 2016 2:41 pm

Hello,

We want to animate our chart. We have candle and area series, both updated with new data every 3 seconds. When the new data is downloaded, we redraw the whole model.
Is there any example on how to animate the new points/candles?

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Series animation example?

Post by Narcís » Fri Jun 10, 2016 1:39 pm

Hello Ilia,

If I'm not wrong, you are using Xamarin.Forms, aren't you?

You should do something very similar to what I did in this real-time charting article in Xamarin.Android. The main differences between Xamarin.Android and Xamarin.Forms I can think of are:
  1. 1. You won't have ZoomStyles.None in Xamarin.Forms. You may just disable zooming.
    2. You may not need to use RunOnUiThread delegate.
Other than that, I strongly recommend to disable as many charting automatic elements as possible and implement your data population algorithm similar to the AnimateSeries method in the article.

If you have any problem implementing that in Xamarin.Forms please let us know.
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Series animation example?

Post by Narcís » Mon Jun 13, 2016 9:51 am

Hi Ilia,

Below there's the Xamarin.Forms equivalent project to the Real-time charting example I pointed you at.

Code: Select all

    Steema.TeeChart.Chart tChart1;
    const int NumPoints = 50;
    const int MinValue = 0;
    const int MaxValue = 1000;

    public App()
    {
      tChart1 = new Chart(this);

      tChart1.Aspect.View3D = false;
      tChart1.Touch.Options = TouchOptions.None;
      tChart1.Legend.Visible = false;
      tChart1.Panel.Gradient.Visible = false;
      tChart1.Walls.Back.Gradient.Visible = false;
      tChart1.Walls.Back.Visible = false;
      tChart1.Axes.Left.Grid.Visible = false;
      tChart1.Axes.Bottom.Grid.Visible = false;
      tChart1.Axes.Left.Automatic = false;
      tChart1.Axes.Bottom.Automatic = false;
      tChart1.Axes.Left.SetMinMax(MinValue, MaxValue);
      tChart1.Axes.Bottom.SetMinMax(0, NumPoints);

      //Left axis disabled for performance purposes.
      tChart1.Axes.Left.Visible = false;

      var fastLine1 = new Steema.TeeChart.Styles.FastLine(tChart1.Chart);
      fastLine1.FillSampleValues(NumPoints);
      fastLine1.DrawAllPoints = false;

      Device.StartTimer(TimeSpan.FromMilliseconds(3000), OnTimerTick);

      ChartView chartView = new ChartView
      {
        VerticalOptions = LayoutOptions.FillAndExpand,
        HorizontalOptions = LayoutOptions.FillAndExpand,

        WidthRequest = 400,
        HeightRequest = 500
      };

      chartView.Model = tChart1;

      MainPage = new ContentPage
      {
        Content = new StackLayout
        {
          Children = {
                    chartView,
                }
        },
      };
    }
    
    bool OnTimerTick()
    {
      AnimateSeries(tChart1);
      return true;
    }

    private void AnimateSeries(Chart chart)
    {
      var rnd = new Random();
      double newX, newY;

      tChart1.AutoRepaint = false;

      foreach (Steema.TeeChart.Styles.Series s in chart.Series)
      {
        // show only 50 points - delete the rest
        while (s.Count > NumPoints) s.Delete(0);
        if (s.Count > NumPoints) s.Delete(0);
        newX = s.XValues.Last + 1;
        newY = rnd.Next(MaxValue);
        if ((Math.Abs(newY) > MaxValue) || (Math.Abs(newY) < MinValue)) newY = 0.0;
        s.Add(newX, newY);
      }

      tChart1.Axes.Bottom.SetMinMax(tChart1.Axes.Bottom.Minimum + 1, tChart1.Axes.Bottom.Maximum + 1);

      tChart1.AutoRepaint = true;
      tChart1.Chart.Invalidate();
    }
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

IliaStoilov
Newbie
Newbie
Posts: 15
Joined: Tue Nov 17, 2015 12:00 am

Re: Series animation example?

Post by IliaStoilov » Tue Jun 14, 2016 10:14 am

Thank you, I will give it a try. :)

IliaStoilov
Newbie
Newbie
Posts: 15
Joined: Tue Nov 17, 2015 12:00 am

Re: Series animation example?

Post by IliaStoilov » Thu Jun 16, 2016 1:34 pm

Hi again Narcis, I tried your example, it works, but I don't think that this is "animation".

Lets say we have a simple line chart. On app start, you load 100 points on it. Now, every 3 seconds you have to draw a new point. So, when the data for the new point arrives, we have to actually draw the line from the last point to the new point with an animation, which lasts, lets say 500 ms. Is this possible?

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Series animation example?

Post by Narcís » Thu Jun 16, 2016 3:16 pm

Hi Ilia,

This type of animation is not supported at the present moment. I have added your request at bugzilla (ID1559).

Moreover, existing TeeChart for .NET animations need to be enhanced to work fine with Xamarin.Forms, which I also added to bugzilla (ID1560).
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

IliaStoilov
Newbie
Newbie
Posts: 15
Joined: Tue Nov 17, 2015 12:00 am

Re: Series animation example?

Post by IliaStoilov » Fri Jun 17, 2016 7:27 am

Hi Narcis,

Thank you for the clarification. :)

When should we expect this kind of animation support? Are we talking 1 month or 1 year? We are not trying to push you, we know that this isn't an easy process, so we are asking just for information. :)

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Series animation example?

Post by Narcís » Fri Jun 17, 2016 7:41 am

Hi Ilia,

You should refer to point 4 and 5 of Steema's bug fixing policy. I'm sorry but at the present moment I'm not able to provide more precise information.
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

Narcís
Site Admin
Site Admin
Posts: 14730
Joined: Mon Jun 09, 2003 4:00 am
Location: Banyoles, Catalonia
Contact:

Re: Series animation example?

Post by Narcís » Fri Jun 17, 2016 1:46 pm

Hi Ilia,

BTW, please feel free to sign up at bugzilla and add yourself to the CC List to receive automatic notifications on issues status updates.
Best Regards,
Narcís Calvet / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Image Image Image Image Image Image
Instructions - How to post in this forum

Post Reply