Chart Live Data example with multiple series

[Andrea]

Hi, i'm trying to edit the Live data example you provide so that it is capable of displaying multiple series (the number is variable from 1 to a rasonable N, say 15).
Each series has the same format and is mapped this way:
MyCustomObject.DateTime -> XAxis
MyCustomObect.Value -> YAxis
I define the SeriesMapping in codeBehind as i said the number of series is variable.

I edited the ExampleViewModel.cs so that i have a List of Queue (1 Queue for each series i want to display). 
The problem is that the chart doen't get populated at all.

Here is my sample code:

MyChart.xaml

<UserControl.DataContext>
        <db:TimeChartViewModel />
    </UserControl.DataContext>

    <UserControl.Resources>
        <Style x:Key="YAxisTitleStyle" TargetType="telerik:AxisTitle">
            <Setter Property="Padding" Value="0, 0, 0, 0" />
            <Setter Property="Margin" Value="0, 0, 0, 0" />
        </Style>

        <Style x:Key="AdditionalYAxisTitleStyle" TargetType="telerik:AxisTitle">
            <Setter Property="Padding" Value="0, 0, 0, 0" />
            <Setter Property="Margin" Value="0, 3, 0, 0" />
        </Style>
    </UserControl.Resources>

    <Grid>
        <Border telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True">
            <telerik:RadChart x:Name="RadTimeChart" ItemsSource="{Binding Data}">
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView ChartLegendPosition="Bottom">
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="ChartLegend1"
                                               NoDataString="Loading..."
                                               EnableAnimations="False"
                                               Padding="5, 10, 0, 5">
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX DefaultLabelFormat="#VAL{H:mm:ss}" LabelRotationAngle="45" LabelStep="2"
                                                   LayoutMode="Normal" Title="Time" AutoRange="False"
                                                   MinValue="{Binding AxisXMinValue}"
                                                   MaxValue="{Binding AxisXMaxValue}"
                                                   Step="{Binding AxisXStep}" />
                                </telerik:ChartArea.AxisX>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY DefaultLabelFormat="#VAL" Title="Power [W]"
                                                   AutoRange="False" MinValue="0" MaxValue="3000" Step="500">
                                        <telerik:AxisY.AxisStyles>
                                            <telerik:AxisStyles TitleStyle="{StaticResource YAxisTitleStyle}"/>
                                        </telerik:AxisY.AxisStyles>
                                    </telerik:AxisY>
                                </telerik:ChartArea.AxisY>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend x:Name="ChartLegend1" Padding="0, 10, 0, 5"/>
                        </telerik:ChartDefaultView.ChartLegend>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Border>
    </Grid>

ExampleModelView.cs

       #region Fields

  

        private const int queueCapacity = 30;

        private List<Queue<MeasurementData>> tcMeasurementData = new List<Queue<MeasurementData>>(queueCapacity);

        private DateTime nowTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second);

        private DispatcherTimer timer1;

        private List<Queue<MeasurementData>> _data;

        private double _axisXMinValue;

        private double _axisXMaxValue;

        private double _axisXStep;

        private LEAF.Devices.Common.TimeChartHistory device;

  

        #endregion

  

        #region Properties

  

        public LEAF.Devices.Common.TimeChartHistory Device

        {

            get { return this.device; }

            set { this.device = value; }

        }

  

        public List<Queue<MeasurementData>> Data

        {

            get { return this._data; }

            set

            {

                if (this._data != value)

                {

                    this._data = value;

                    this.OnPropertyChanged("Data");

                }

            }

        }

  

        public double AxisXMinValue

        {

            get { return this._axisXMinValue; }

            set

            {

                if (this._axisXMinValue != value)

                {

                    this._axisXMinValue = value;

                    this.OnPropertyChanged("AxisXMinValue");

                }

            }

        }

  

        public double AxisXMaxValue

        {

            get { return this._axisXMaxValue; }

            set

            {

                if (this._axisXMaxValue != value)

                {

                    this._axisXMaxValue = value;

                    this.OnPropertyChanged("AxisXMaxValue");

                }

            }

        }

  

        public double AxisXStep

        {

            get { return this._axisXStep; }

            set

            {

                if (this._axisXStep != value)

                {

                    this._axisXStep = value;

                    this.OnPropertyChanged("AxisXStep");

                }

            }

        }

  

        #endregion

  

  

        #region Constructor

  

        public TimeChartViewModel()

        {

            this.SetUpTimer();

        }

  

        #endregion

  

  

        #region Methods

  

        public void StartTimer()

        {

            if (timer1 != null)

                timer1.Start();

        }

  

        public void StopTimer()

        {

            if (timer1 != null)

                timer1.Stop();

        }

  

        private void SetUpTimer()

        {

            timer1 = new DispatcherTimer();

            timer1.Interval = TimeSpan.FromMilliseconds(500);

            timer1.Tick += OnTimerTick;

        }

  

        private void OnTimerTick(object sender, EventArgs e)

        {

            this.nowTime = this.nowTime.AddMilliseconds(500);

  

            this.UpdateData(this.nowTime);

            this.SetUpAxisXRange(this.nowTime);

  

            this.Data = null;

            this.Data = this.tcMeasurementData;

        }

  

        private void SetUpAxisXRange(DateTime now)

        {

            this.AxisXMinValue = now.AddSeconds(-14.5).ToOADate();

            this.AxisXMaxValue = now.ToOADate();

            this.AxisXStep = 1.0 / 24.0 / 3600.0 / 2.0;

        }

  

        private void UpdateData(DateTime now)

        {

            int i = 0;

  

        //This lines update data for each series... I'm pretty sure it is correct

            foreach (ChannelKeyValueConfiguration channelKeyValue in this.Device.Configuration.ChannelConfigurations)

            {

                IChannel channel = this.Device.Channels[channelKeyValue.Name];

  

                Queue<MeasurementData> seriesData = this.tcMeasurementData[i];

                if (seriesData.Count >= queueCapacity) seriesData.Dequeue();

                MeasurementData lastMeasure = new MeasurementData(channel.Measure.Value, now);

                seriesData.Enqueue(lastMeasure);

                i++;

            }

  

        }

  

        public void AddMeasureDataSeries(Queue<MeasurementData> series)

        {

            this.tcMeasurementData.Add(series);

        }

  

        #endregion

Please tell me how do i bind chart's itemsource to a List of Queue instead of a simple collection.
Thanks

[Nikolay]

Hello,

If you want the insertions or the deletions in the collection to be automatically applied to the UI, the collection to which you bind must also implement the INotifyCollectionChanged interface. You may also use the RadHierarchicalObservableCollection<T>. Please, have a look at this helpt opic for more information.

Regards,
Nikolay
the Telerik team