Chart Live Data example with multiple series

2 posts, 0 answers
  1. Andrea
    Andrea avatar
    1 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2012 Link to this post

    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
  2. Nikolay
    Admin
    Nikolay avatar
    385 posts

    Posted 15 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top