SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components



I am evaluating the possibility to use SciChart for our corporate project, and now trying to create a series using data binding, strict MVVM (no code in code behind). The data we have are provided as an ObservableCollection, and the series would need to use the property “SomeKey” for X-Axis value, and the property “SomeValue” for the Y-Axis. Is it possible to do this, and if yes, then how?

Best regards
Petr Osipov
Rohde & Schwarz

  • You must to post comments
Best Answer

Hi there,

How about using an attached behaviour? You would need to create an attached behaviour in code to marshal the ObservableCollection to XyDataSeries. This is the best way to do it at present. It would also result in all the code being ‘in the view’ and decoupled nicely from your business logic.

Something like this would work:

    public class MyObject
        public double XValue { get; set; }
        public double YValue { get; set; }

    public class BindingHelper
        public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.RegisterAttached("ItemsSource", typeof(ObservableCollection<MyObject>), typeof(BindingHelper), new PropertyMetadata(default(ObservableCollection<MyObject>), OnItemsSourceChanged));        

        public static void SetDataObjectBinding(UIElement element, ObservableCollection<MyObject> value)
            element.SetValue(ItemsSourceProperty, value);

        public static ObservableCollection<MyObject> GetDataObjectBinding(UIElement element)
            return (ObservableCollection<MyObject>)element.GetValue(ItemsSourceProperty);

        private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            var attachedSurface = d as SciChartSurface;
            if (attachedSurface == null) return;

            var sourceItems = e.NewValue as ObservableCollection<MyObject>;
            if (sourceItems == null)
                // TODO: null or clear data series

            // Now todo. Using your ObservableCollection<MyObject> convert into DataSeries and items for the chart surface
            // If you wanted to be clever, you can subscribe to sourceItems.CollectionChanged and dynamically update the dataseries too as observable collection changes

Then usage like this

<SciChartSurface BindingHelper.ItemsSource="{Binding ObservableCollectionInViewModel}">
   <!-- ... -->

Note that you’ll have to get into some more interesting code to define how to render the data series. I’m assuming above that you will write code to marshal or convert MyObject’s into XyDataSeries points, and also add appropriate DataSeries to the chart.

Another way to do the same thing is to have a separate layer of ViewModels and Views for the chart component, and an API that you create to talk to it. That way you separate out your charting from your business logic.

Hope this helps!


  • Chaos
    Thank you for the fast answer, take note of it :)
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.