Multiple series in RadCartesianChart with ChartSeriesProvider and Model is real-time

[li]

I have a question about Telerik UI for WPF, i want to achieve a number of real-time monitoring curve, here is my code:

XAML:  in UserControl)

<telerik:RadCartesianChart.SeriesProvider>

                    <telerik:ChartSeriesProvider Source="{Binding CurrentProject.CurrentSubProject.LineSeriesCollection}">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                            <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Points" ValuePath="Sales" CategoryPath="Time">
                                <telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="telerik:LineSeries">
                                        <Setter Property="StrokeThickness" Value="2"/>
                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor>
                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>
                </telerik:RadCartesianChart.SeriesProvider>

 

Model:

        private ObservableCollection<Line> _lineSeriesCollection = new ObservableCollection<Line>() { };

        /// <summary>
        /// 界面中线条集合的Model
        /// </summary>
        public ObservableCollection<Line> LineSeriesCollection
        {
            get
            {
               
                if (_lineSeriesCollection.Count == 0)
                {
                    _lineSeriesCollection.Add(new Line(0, 15));
                    _lineSeriesCollection.Add(new Line(10, 25));
                    _lineSeriesCollection.Add(new Line(20, 35));
                    _lineSeriesCollection.Add(new Line(30, 50));
                }


                return _lineSeriesCollection;
            }
        }

 

///////Line Class:

    /// <summary>
    /// 界面的线条集合Model
    /// 20170417
    /// </summary>
    public class Line : INotifyPropertyChanged
    {
        #region INotifyPropertyChanged Members

        [field: NonSerialized]
        public event PropertyChangedEventHandler PropertyChanged;
        public virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }



        #endregion
        /// <summary>
        /// 用于存储当前线条的数据信息（组件名称+组件次序+输出参数）
        /// </summary>
        public string[] SelectedComponentInfo=new string[3];
        /// <summary>
        /// 用于存储线条中点数据的单位
        /// </summary>
        public string Unit;
       
        private ObservableCollection<ShowRealTimePoint> _points = new ObservableCollection<ShowRealTimePoint>();
        /// <summary>
        ///线条集合
        /// </summary>
        public ObservableCollection<ShowRealTimePoint> Points
        {
            get
            {
                return _points;
            }

            set
            {
                if (_points != value)
                {
                    _points = value;
                    OnPropertyChanged("Points");
                }
            }
        }


        private int minRange;
        private int maxRange;
        private System.Timers.Timer timer;
        public Line(int minRange, int maxRange)
        {
            this._points = new ObservableCollection<ShowRealTimePoint>();

            this.minRange = minRange;
            this.maxRange = maxRange;

            this.timer = new System.Timers.Timer();
            this.timer.Interval = 1000;
            this.timer.Elapsed += this.Timer_Elapsed;
            this.timer.Start();
        }





      private static Random r = new Random();
        private void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            System.Windows.Application.Current.Dispatcher.BeginInvoke((Action)(() =>
            {
                if (this.Points.Count > 50)
                {
                    this.Points.RemoveAt(0);
                }
                this.Points.Add(new ShowRealTimePoint { Time = DateTime.Now, ParamValue = r.Next(0,100), });
            }));
        }

    }

///////ShowRealTimePoint Class:properties:Time ,ParamValue 

Actually, I'm referring to your example，but I cannot achieve the goal(my English is not good)

I ask you to help me see what the problem is，

Thank you very much.！！

 

 

 

 

[Martin Ivanov]

Hello Li,

Thank you for sharing runnable code snippets. I tested them on my side and your set up is correct, except one small detail. The ValuePath property of the CategoricalSeriesDescriptor points to a property in your ShowRealTimePoint model called "Sales". However, there is no such property. I guess you want to bind the ParamValue defined there. So, to run the chart properly you can change the ValuePath to ParamValue.

Here is an example:

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="Points" ValuePath="ParamValue" CategoryPath="Time">

I also attached a project with your code. Please give it a try and let me know if it helps.

Regards,
Martin
Telerik by Progress

[li]

Thank you for your help. It can work in demo. 

Since the Vistual Studio in the update Telerik is not completely successful, resulting in the use of telerik:ChartSeriesProvider   no effect, and now want to use code-behind to achieve.Can you give some demo for adding LineSeries to RadCartesianChart in code-behind ?

Thanks again!!

 

 

I don't know why

[li]

I have successfully implemented multiple curves，but the Tooltip function is not implemented,   I am not able to implement multiple series' tooltip in your example(attach file is your example)

Please tell me how to implement multiple series tooltip?  thank you

[Martin Ivanov]

Hello li,

The chart tooltip behavior displays only the information about the most top data point positioned under the mouse. In other words you cannot use it to show information for multiple series out of the box. Instead you can try the TrackBall behavior.

Regards,
Martin
Telerik by Progress