This is a migrated thread and some comments may be shown as answers.

Chart Live Data example with multiple series

1 Answer 136 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Andrea
Top achievements
Rank 1
Andrea asked on 11 Feb 2012, 06:18 PM
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

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 15 Feb 2012, 02:36 PM
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 >>
Tags
Chart
Asked by
Andrea
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or