Multiple Series

[Mike Hanson]

I am doing a review of 7 major chart controls for WPF and during my review of the RadControl for WPF I cannot find a way to bind two separate Line Series on a single chart to individual properties of an underlying view model.

My view model has two ObservableCollection properties.  FixedPoints is populated in the constructor to represent a collection of static data points that are known at startup.  DynamicPoints is populated via Rx's Observable.Interval to simulate a real time steam of data being plotted.

I want a single chart control to display two line series each plotting one of the collections mentioned, but it seems the only place I can bind to my view model is on the RadChart so I have a single ItemsSource to bind.  Is this correct?  I need to do this completely declaritively no code behind work arounds.

I found a sample that uses a collection of collections and sets the CollectionIndex of each SeriesMapping but that is completely against the MVVM pattern.  It means I have to design any view model according the choice of chart control.  It is also IMHO a very ugly implementation.

[Vladimir Milev]

Hi Michael Hanson,

Unfortunately RadChart does not support separate items source for each data series. We are currently considering implementing such support as other customers also require this functionality.

The data-binding to collections of collections is a work-around implementation looking facilitate a specific user scenario, not to provide full fledged support for the above mentioned functionality.

Best wishes,
Vladimir Milev
the Telerik team

[VJ]

Hello Telerik Team,

Is it possible to know, when the discussed support is expected to be implemented?

Regards,

Vera Jepsen

[Vladimir Milev]

Hi Developer,

Good news. The SeriesMapping.ItemsSource property just shipped with Q1 2011.

Kind regards,
Vladimir Milev
the Telerik team

[Mark]

That is good news. Can you provide a link to a description of this property and perhaps a working example?

Also looking for a working example using the CollectionIndex property.

Thank you.

[Giuseppe]

Hello Mark,

You can find online example of the usage of SeriesMapping.ItemsSource here and the help article here.
Also, you can find the help article on CollectionIndex usage here.

Hope this helps.


Best wishes,
Giuseppe
the Telerik team

[Nathan]

Hi... the examples you've listed are for Silverlight.  Is this valid for WPF?  I've tried pretty much what you've described and get an exception (below).  My XAML is:

            <telerik:RadChart x:Name="CapacityPlanChart" Grid.Row="0">
                <telerik:RadChart.Resources>
                    <Style x:Key="NoLabelStyle" TargetType="telerik:SeriesItemLabel">
                        <Setter Property="Visibility" Value="Hidden" />
                    </Style>
                </telerik:RadChart.Resources>

                <telerik:ChartArea x:Name="ChartArea1" EnableAnimations="False" />
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping ItemsSource="{Binding CapacityPlanViewModel.DayUseItems}" ChartAreaName="ChartArea1">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:BarSeriesDefinition SeriesItemLabelStyle="{StaticResource NoLabelStyle}" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="TotalUsage" />
                            <telerik:ItemMapping DataPointMember="XValue" FieldName="Day" />
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping ItemsSource="{Binding Flight}" ChartAreaName="ChartArea1">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:SplineSeriesDefinition/>
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:SeriesMapping.ItemMappings>
                            <telerik:ItemMapping DataPointMember="XValue" FieldName="Point"/>
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Penetration"/>
                        </telerik:SeriesMapping.ItemMappings>
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
            </telerik:RadChart>

I'm running version Q1 2011.  If I remove one of the series mappings (doesn't matter which), the error goes away.  But of course I need both. I'm at my wit's end on this... any ideas?

Thanks,
Nate

Exception:
System.NullReferenceException was unhandled
  Message=Object reference not set to an instance of an object.
  Source=Telerik.Windows.Controls.Charting
  StackTrace:
       at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessMapping(SeriesMapping seriesMapping, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState)
       at Telerik.Windows.Controls.Charting.DataBindingHelper.ProcessMappings(SeriesMappingCollection seriesMappings, QueryableCollectionView dataEngine, Int32 samplingThreshold, ZoomScrollSettings zoomScrollSettings, ISeriesDefinition defaultSeriesDefinition, AxisRangeState axisXRangeState)
       at Telerik.Windows.Controls.Charting.DataBindingHelper.GenerateDataSeries(Object originalData, SeriesMappingCollection seriesMappings, ISeriesDefinition defaultSeriesDefinition, ChartFilterDescriptorCollection globalFilterDescriptors, ChartSortDescriptorCollection globalSortDescriptors, SamplingSettings samplingSettings, ZoomScrollSettings zoomScrollSettings, AxisRangeState axisXRangeState)
       at Telerik.Windows.Controls.RadChart.GenerateDataSeries(Object originalData, SeriesMappingCollection seriesMappings, ChartArea chartArea)
       at Telerik.Windows.Controls.RadChart.GenerateDataSeries(Object originalData)
       at Telerik.Windows.Controls.RadChart.Rebind(Object originalData)
       at Telerik.Windows.Controls.RadChart.Rebind()
       at Telerik.Windows.Controls.Charting.SeriesMapping.RebindChart()
       at Telerik.Windows.Controls.Charting.SeriesMapping.ManageChangeNotifications(Object originalData, Object oldData)
       at Telerik.Windows.Controls.Charting.SeriesMapping.ItemsSourcePropertyChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
       at System.Windows.DependencyObject.OnPropertyChanged(DependencyPropertyChangedEventArgs e)
       at System.Windows.Freezable.OnPropertyChanged(DependencyPropertyChangedEventArgs e)
       at System.Windows.DependencyObject.NotifyPropertyChange(DependencyPropertyChangedEventArgs args)
       at System.Windows.DependencyObject.UpdateEffectiveValue(EntryIndex entryIndex, DependencyProperty dp, PropertyMetadata metadata, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType)
       at System.Windows.DependencyObject.InvalidateProperty(DependencyProperty dp)
       at System.Windows.Data.BindingExpressionBase.Invalidate(Boolean isASubPropertyChange)
       at System.Windows.Data.BindingExpression.TransferValue(Object newValue, Boolean isASubPropertyChange)
       at System.Windows.Data.BindingExpression.Activate(Object item)
       at System.Windows.Data.BindingExpression.AttachToContext(AttachAttempt attempt)
       at System.Windows.Data.BindingExpression.MS.Internal.Data.IDataBindEngineClient.AttachToContext(Boolean lastChance)
       at MS.Internal.Data.DataBindEngine.Task.Run(Boolean lastChance)
       at MS.Internal.Data.DataBindEngine.Run(Object arg)
       at MS.Internal.Data.DataBindEngine.OnLayoutUpdated(Object sender, EventArgs e)
       at System.Windows.ContextLayoutManager.fireLayoutUpdateEvent()
       at System.Windows.ContextLayoutManager.UpdateLayout()
       at System.Windows.UIElement.UpdateLayout()
       at System.Windows.Interop.HwndSource.SetLayoutSize()
       at System.Windows.Interop.HwndSource.set_RootVisualInternal(Visual value)
       at System.Windows.Interop.HwndSource.set_RootVisual(Visual value)
       at System.Windows.Window.SetRootVisual()
       at System.Windows.Window.SetRootVisualAndUpdateSTC()
       at System.Windows.Window.SetupInitialState(Double requestedTop, Double requestedLeft, Double requestedWidth, Double requestedHeight)
       at System.Windows.Window.CreateSourceWindow(Boolean duringShow)
       at System.Windows.Window.CreateSourceWindowDuringShow()
       at System.Windows.Window.SafeCreateWindowDuringShow()
       at System.Windows.Window.ShowHelper(Object booleanBox)
       at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
       at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
       at System.Windows.Threading.DispatcherOperation.InvokeImpl()
       at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
       at System.Threading.ExecutionContext.runTryCode(Object userData)
       at System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
       at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Windows.Threading.DispatcherOperation.Invoke()
       at System.Windows.Threading.Dispatcher.ProcessQueue()
       at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
       at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
       at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
       at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
       at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
       at System.Windows.Threading.Dispatcher.InvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
       at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
       at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
       at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
       at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
       at System.Windows.Threading.Dispatcher.Run()
       at System.Windows.Application.RunDispatcher(Object ignore)
       at System.Windows.Application.RunInternal(Window window)
       at System.Windows.Application.Run(Window window)
       at System.Windows.Application.Run()
       at Magnetar.Dali.Runner.App.Main() in C:\dev\StarzDali\Source\Common\Magnetar.Dali.Runner\obj\x86\Debug\App.g.cs:line 0
       at System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
       at System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
       at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
       at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Threading.ThreadHelper.ThreadStart()
  InnerException: 

 

[Nathan]

We were able to fix this by removing the ItemsSource from the first series and placing it on the chart... i.e. instead of:

<telerik:RadChart x:Name="CapacityPlanChart" Grid.Row="0">
...
<telerik:RadChart.SeriesMappings>
   <telerik:SeriesMapping ItemsSource="{Binding CapacityPlanViewModel.DayUseItems}" ChartAreaName="ChartArea1">
   ...
   </telerik:SeriesMapping>
   <telerik:SeriesMapping ItemsSource="{Binding Flight}" ChartAreaName="ChartArea1">
   ...
   </telerik:SeriesMapping>
</telerik:RadChart>

we now use:

<telerik:RadChart x:Name="CapacityPlanChart" Grid.Row="0" ItemsSource="{Binding CapacityPlanViewModel.DayUseItems}">
...
<telerik:RadChart.SeriesMappings>
   <telerik:SeriesMapping ChartAreaName="ChartArea1">
   ...
   </telerik:SeriesMapping>
   <telerik:SeriesMapping ItemsSource="{Binding Flight}" ChartAreaName="ChartArea1">
   ...
   </telerik:SeriesMapping>
</telerik:RadChart>

[Giuseppe]

Hello Nathan,

Generally if you would like to define the chart layout on your own (and not use the "default view"), you need to set the RadChart.UseDefaultLayout property to false.

<telerik:RadChart x:Name="CapacityPlanChart" Grid.Row="0" UseDefaultLayout="False">

    <telerik:ChartArea x:Name="ChartArea1" EnableAnimations="False" />

    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping ItemsSource="{Binding Data1}" ChartAreaName="ChartArea1">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:BarSeriesDefinition ShowItemLabels="False" />
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="TotalUsage" />
                <telerik:ItemMapping DataPointMember="XValue" FieldName="Day" />
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
        <telerik:SeriesMapping ItemsSource="{Binding Data2}" ChartAreaName="ChartArea1">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:SplineSeriesDefinition/>
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="XValue" FieldName="Point"/>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Penetration"/>
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

Alternatively, if you need to disable the animations on the chart area that is part of the default view, you can achieve it like this (note that in this case you should not specify SeriesMapping.ChartAreaName property value):

<telerik:RadChart x:Name="CapacityPlanChart" Grid.Row="0">
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea EnableAnimations="False" LegendName="Legend1" />
            </telerik:ChartDefaultView.ChartArea>
            <telerik:ChartDefaultView.ChartLegend>
                <telerik:ChartLegend x:Name="Legend1" />
            </telerik:ChartDefaultView.ChartLegend>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>

    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping ItemsSource="{Binding Data1}">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:BarSeriesDefinition ShowItemLabels="False" />
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="TotalUsage" />
                <telerik:ItemMapping DataPointMember="XValue" FieldName="Day" />
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
        <telerik:SeriesMapping ItemsSource="{Binding Data2}">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:SplineSeriesDefinition/>
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="XValue" FieldName="Point"/>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Penetration"/>
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

Attached is a sample application as well that works as expected in our local tests.


Kind regards,
Giuseppe
the Telerik team