Series animation example?

[IliaStoilov]

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]

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.

[Narcís]

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();
    }

[IliaStoilov]

Thank you, I will give it a try.

[IliaStoilov]

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]

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).

[IliaStoilov]

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]

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.

[Narcís]

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.