Hello,
We have utilized the Motion Framework in our Scatter Chart series and it is really powerful feature in Infragistics controls suite. However I am wondering that can we also apply the same affect on LINE SERIES? I noticed on the below chart, they are highlighting the lines series in this sample. But I need the transition affect in the line series from previous datapoint value to new value.
Thanks,
M. Irfan
The chart doesn't animate when you replace the itemssource. If you want animations to occur you should modify the existing source or items.Here is a modified version of your ViewModel to accomplish this:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.DataContext = new PriceBandViewModel(); } private void Button_Click(object sender, RoutedEventArgs e) { ((PriceBandViewModel)this.DataContext).PlayStop(); } } public class PriceBandViewModel : INotifyPropertyChanged { private readonly DispatcherTimer playTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(2) }; private DateTime drawDateTime; public PriceBandViewModel() { ButtonCaption = "Play"; MinChartDate = DateTime.Now.AddYears(-1); MaxChartDate = DateTime.Now; MinChartValue = 0; MaxChartValue = 2; drawDateTime = MinChartDate; //this.ChartSource = new List<DataItem>(); playTimer.Tick += new EventHandler(playTimer_Tick); //playTimer.Stop(); //playTimer.Start(); } #region Binding private ObservableCollection<DataItem> _chartSource = null; public ObservableCollection<DataItem> ChartSource { get { return _chartSource; } set { _chartSource = value; OnPropertyChanged("ChartSource"); } } private DateTime _minChartDate; public DateTime MinChartDate { get { return _minChartDate; } set { if (_minChartDate == value) return; _minChartDate = value; OnPropertyChanged("MinChartDate"); } } private DateTime _maxChartDate; public DateTime MaxChartDate { get { return _maxChartDate; } set { if (_maxChartDate == value) return; _maxChartDate = value; OnPropertyChanged("MaxChartDate"); } } private double _minChartValue; public double MinChartValue { get { return _minChartValue; } set { if (_minChartValue == value) return; _minChartValue = value; OnPropertyChanged("MinChartValue"); } } private double _maxChartValue; public double MaxChartValue { get { return _maxChartValue; } set { if (_maxChartValue == value) return; _maxChartValue = value; OnPropertyChanged("MaxChartValue"); } } private string _buttonCaption; public string ButtonCaption { get { return _buttonCaption; } set { if (value == _buttonCaption) return; _buttonCaption = value; OnPropertyChanged("ButtonCaption"); } } #endregion #region Helper Methods public void PlayStop() { if (ButtonCaption.Equals("Stop", StringComparison.InvariantCultureIgnoreCase)) { playTimer.Stop(); ButtonCaption = "Play"; } else { if (drawDateTime >= MaxChartDate) { ChartSource = new ObservableCollection<DataItem>(); drawDateTime = MinChartDate; } playTimer.Start(); ButtonCaption = "Stop"; } } private void playTimer_Tick(object sender, EventArgs e) { Random r = new Random(); DateTime startDate = MinChartDate; drawDateTime = drawDateTime.AddMonths(3); List<DataItem> _fullChartSource = new List<DataItem>(); while (startDate < drawDateTime) { _fullChartSource.Add(new DataItem { Date = startDate, Value1 = r.NextDouble() * 2, Value2 = r.NextDouble() * 2, Value3 = r.NextDouble() * 2, Value4 = r.NextDouble() * 2 }); startDate = startDate.AddDays(3); } if (ChartSource == null) { ChartSource = new ObservableCollection<DataItem>(); } ChartSource.Clear(); foreach (var item in _fullChartSource) { ChartSource.Add(item); } if (drawDateTime >= MaxChartDate) { playTimer.Stop(); ButtonCaption = "Play"; } } #endregion #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } #endregion } public class DataItem : INotifyPropertyChanged { #region Public Properties private DateTime _date; public DateTime Date { get { return _date; } set { if (_date == value) return; _date = value; OnPropertyChanged("Date"); } } private double _value1; public double Value1 { get { return _value1; } set { if (_value1 == value) return; _value1 = value; OnPropertyChanged("Value1"); } } private double _value2; public double Value2 { get { return _value2; } set { if (_value2 == value) return; _value2 = value; OnPropertyChanged("Value2"); } } private double _value3; public double Value3 { get { return _value3; } set { if (_value3 == value) return; _value3 = value; OnPropertyChanged("Value3"); } } private double _value4; public double Value4 { get { return _value4; } set { if (_value4 == value) return; _value4 = value; OnPropertyChanged("Value4"); } } #endregion #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } #endregion }
Hope this helps!-Graham
Hello Graham,
Thank you for your reply. Yes I have fixed X-Axis values as well as Y-Axis values but it is not working.
Basically we have set of financial report and we need to show transition from one report data to second report. It works incremental way like, at start, we show complete first report data and then next timer interval, we take basic data from first report and remaining data from second and so on.
I have attached a sample application so that you can reproduce the issue at your side and let me know that what I am missing in it.
Yes,
You can set a transition duration on line series in the same way that you would to scatter series. The one thing to be careful of is that an animation will not start if your value change results in the auto ranges of the y axis changing. So you should either use a fixed range of the y axis, or make sure that changes that you want animated don't result in the y axis range changing.
This is done because the axis visual does not currently support animation, so looks odd if the range changes immediately while the series visual is still animating.
A good strategy for if you want animated changes for a line series, is to manage the y axis range yourself, and only change it in larger chunks. This way most changes are animated until a threshold is hit where the axis range needs to be modified. And then that one change is not animated.
Hope this helps,
-Graham