Page 1 of 1
Series animation example?
Posted: Thu Jun 09, 2016 2:41 pm
by 18276989
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?
Re: Series animation example?
Posted: Fri Jun 10, 2016 1:39 pm
by narcis
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. 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.
Re: Series animation example?
Posted: Mon Jun 13, 2016 9:51 am
by narcis
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();
}
Re: Series animation example?
Posted: Tue Jun 14, 2016 10:14 am
by 18276989
Thank you, I will give it a try.
Re: Series animation example?
Posted: Thu Jun 16, 2016 1:34 pm
by 18276989
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?
Re: Series animation example?
Posted: Thu Jun 16, 2016 3:16 pm
by narcis
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).
Re: Series animation example?
Posted: Fri Jun 17, 2016 7:27 am
by 18276989
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.
Re: Series animation example?
Posted: Fri Jun 17, 2016 7:41 am
by narcis
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.
Re: Series animation example?
Posted: Fri Jun 17, 2016 1:46 pm
by narcis
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.