MVVM with observalbe collection not updating series

2 posts, 0 answers
  1. Rüdiger
    Rüdiger avatar
    6 posts
    Member since:
    Nov 2010

    Posted 02 Dec 2010 Link to this post

    HI,
    (must say that I am a SL and RadChart newbie)

    1. I created a sample application, with one SL Toolkit chart and a RadChart on a page. I do it in what I believe is the usual SL way, by creating a ViewModel, which is INotyfy-able and contains an observable collection (of keyvalues). A timer in the viewmodel updates the collection every some seconds and fires the property-change event.
    My ToolKit chart updates, the RadChart does not. What went wrong. I attach my code at the end.

    2. My final goal is to create an interactive column chart: When a column is selected AndAlso the mouse-wheel is moved, then the value of the column is in/decremented. Quite simple. That is why I do the observable collection. My question is whether somebody already has such a scenario and could communicate this to me?

    Thanks in advance,
    RüdiActivity

    3. The code:
    <UserControl x:Class="TestSimpleViewModel.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:thisApp="clr-namespace:TestSimpleViewModel"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" 
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
        <UserControl.Resources>
            <thisApp:MySimpleViewModel x:Key="VM" />
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="139*" />
                <RowDefinition Height="15" />
                <RowDefinition Height="146*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="17" />
                <ColumnDefinition Width="365*" />
                <ColumnDefinition Width="18" />
            </Grid.ColumnDefinitions>
            <telerik:RadChart Name="RadChart1" Grid.Column="1" />
            <toolkit:Chart Grid.Column="1" Grid.Row="2" Name="Chart1" Title="Chart Title">
                <toolkit:ColumnSeries Name="Executed" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding Source={StaticResource VM}, Path=HistoricalData}"></toolkit:ColumnSeries>
            </toolkit:Chart>
        </Grid>
    </UserControl>







    The ViewModel:

    Imports System.ComponentModel
    Imports System.Windows.Threading
    Imports System.Collections.ObjectModel

    Public Class MySimpleViewModel
        Implements INotifyPropertyChanged

        Public Event PropertyChanged(ByVal sender As ObjectByVal e As System.ComponentModel.PropertyChangedEventArgsImplements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
        Public Property HistoricalData As ObservableCollection(Of KeyValuePair(Of DateTimeDouble))
        Private WithEvents aTimer As New DispatcherTimer

        Public Sub New()
            Me.UpdateSeries()
            With aTimer
                .Interval = TimeSpan.FromMilliseconds(8000)
                .Start()
            End With
        End Sub

        Private Sub aTimer_Tick(ByVal sender As ObjectByVal e As EventArgsHandles aTimer.Tick
            Me.UpdateSeries()
            RaiseEvent PropertyChanged(MeNew PropertyChangedEventArgs("HistoricalData"))
        End Sub

        Private Sub UpdateSeries()
            Me.HistoricalData = New ObservableCollection(Of KeyValuePair(Of DateTimeDouble))
            Dim rnd As New Random

            Dim d As DateTime = Today
            For i = 1 To 24
                Me.HistoricalData.Add(New KeyValuePair(Of DateTimeDouble)(d, rnd.Next(30, 100) + rnd.Next(0, 30)))
                d = d.AddDays(1)
            Next
            RaiseEvent PropertyChanged(MeNew PropertyChangedEventArgs("HistoricalData"))
        End Sub

    End Class

    Code-behind:
    Imports System.ComponentModel
    Imports Telerik.Windows.Controls.Charting

    Partial Public Class MainPage
        Inherits UserControl

        Private m_ViewModel As MySimpleViewModel

        Public Sub New()
            InitializeComponent()

            If Not DesignerProperties.IsInDesignTool Then
                m_ViewModel = New MySimpleViewModel
                Me.DataContext = m_ViewModel

                Dim seriesMapping As New SeriesMapping()
                seriesMapping.LegendLabel = "Product Sales"
                seriesMapping.SeriesDefinition = New SplineSeriesDefinition()
                seriesMapping.ItemMappings.Add(New ItemMapping("Key"DataPointMember.XValue))
                seriesMapping.ItemMappings.Add(New ItemMapping("Value"DataPointMember.YValue))

                Me.RadChart1.SeriesMappings.Add(seriesMapping)
                Me.RadChart1.ItemsSource = m_ViewModel.HistoricalData
            End If
        End Sub
    End Class
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 06 Dec 2010 Link to this post

    Hi Rüdiger,

    Can you please confirm that you are using the latest version of the control?
    This capability of the control was re-enabled in the latest version, so in case you are using an older version, this may be the cause of the problem. You can download the latest internal build, and give the setup a try. If the problem continues, you can open a formal support ticket, and send us a small working project, demonstrating the issue, for additional review and testing.

    Regards,
    Yavor
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top