Its back up. So you can check that out if you want. But the exampl linked is really more for if you want to create the series based on a template in Xaml. If you are already creating the series collection in your View Model have you tried just binding it to the chart?

I.E if the property holding the SeriesCollection on your DataContext is called Series. Have you tried

<XamWebChart Series="{Binding Series} ...

-Graham

Your problem is that when you are setting the actual DataContext programmatically you are setting it at a higher level than you are setting it inside the user control. The DataContext set on the chart will take precedence over the UserControl's DataContext. You have to replace the DataContext at the same level or lower than it was originally set.

One way to resolve your problem would be to give the chart in your user control a name 

e.g. x:Name="theChart"

and then instead of this line:

ucChart.DataContext = vmChart;

write

(ucChart.FindName("theChart") as FrameworkElement).DataContext = vmChart;

let me know how it goes.

-Graham

Thank you very much Graham. That works like a charm. If possible, please keep me posted about the bug status.

Thank you.

Hi,

I'm trying to do the same thing for a XamDataChart, but the Series property is marked as read-only. How would one assign the series collection to the control fro mthe view model in this control?

Sorry for the delay, I've been out of the office for a while. Here's something that can should get you started.
The gist is to use an attached property to synchronize your source viewmodel with the series that are populated in the chart.
The viewmodels for the series are produce the concrete series by means of a DataTemplate you provide which should produce a series when loaded.

Here's an example of the Xaml:

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ig:XamDataChart Name="xamDataChart1" >
            <ig:XamDataChart.Axes>
                <ig:CategoryXAxis x:Name="xAxis"
                          ItemsSource="{Binding Item.Data}"
                          Label="{}{Label}"/>
                <ig:NumericYAxis x:Name="yAxis" />
            </ig:XamDataChart.Axes>
            
            <local:SeriesBinder.BindingInfo>
                <local:SeriesBindingInfo 
                    ItemsSource="{Binding}">
                    <local:SeriesBindingInfo.SeriesTemplate>
                        <DataTemplate>
                            <ig:LineSeries 
                                ItemsSource="{Binding Item.Data}"
                                ValueMemberPath="{Binding Item.ValueMemberPath}"
                                XAxis="{Binding Path=Owner.Axes[0]}"
                                YAxis="{Binding Path=Owner.Axes[1]}"
                                >
                            </ig:LineSeries>
                        </DataTemplate>
                    </local:SeriesBindingInfo.SeriesTemplate>
                </local:SeriesBindingInfo>
            </local:SeriesBinder.BindingInfo>
        </ig:XamDataChart>

        <Button Grid.Row="1" 
                Content="Click" 
                Click="Button_Click"/>
    </Grid>

And here is the code behind to support this usage:

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            DataContext = new TestSeries();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            (DataContext as TestSeries).Add(
                new TestSeriesItem());
        }
    }

    public class TestSeries
        : ObservableCollection<TestSeriesItem>
    {
        public TestSeries()
        {
            Add(new TestSeriesItem());
            Add(new TestSeriesItem());
            Add(new TestSeriesItem());
        }
    }

    public class TestSeriesItem
    {
        public TestSeriesItem()
        {
            Data = new TestData();
            ValueMemberPath = "Value";
        }

        public IEnumerable Data { get; set; }
        public string ValueMemberPath { get; set; }
    }

    public class TestData
        : ObservableCollection<TestDataItem>
    {
        private static Random rand = new Random();

        public TestData()
        {
            for (int i = 0; i < 20; i++)
            {
                Add(new TestDataItem()
                {
                    Label = i.ToString(),
                    Value = rand.NextDouble()
                });
            }
        }
    }

    public class TestDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    public class SeriesDataContext
        : DependencyObject
    {
        public static DependencyProperty ItemProperty =
          DependencyProperty.Register("Item",
          typeof(object), typeof(SeriesDataContext),
          new PropertyMetadata(null,
              (o, e) =>
              {
              }));

        public object Item
        {
            get
            {
                return GetValue(ItemProperty);
            }
            set
            {
                SetValue(ItemProperty, value);
            }
        }

        public static DependencyProperty OuterContextProperty =
         DependencyProperty.Register("OuterContext",
         typeof(object), typeof(SeriesDataContext),
         new PropertyMetadata(null,
             (o, e) =>
             {
             }));

        public object OuterContext
        {
            get
            {
                return GetValue(OuterContextProperty);
            }
            set
            {
                SetValue(OuterContextProperty, value);
            }
        }

        public static DependencyProperty OwnerProperty =
          DependencyProperty.Register("Owner",
          typeof(XamDataChart), typeof(SeriesDataContext),
          new PropertyMetadata(null,
              (o, e) =>
              {
              }));

        public XamDataChart Owner
        {
            get
            {
                return (XamDataChart)GetValue(OwnerProperty);
            }
            set
            {
                SetValue(OwnerProperty, value);
            }
        }
    }

    public class SeriesBindingInfo
       : FrameworkElement
    {
        public static DependencyProperty OwnerProperty =
          DependencyProperty.Register("Owner",
          typeof(XamDataChart), typeof(SeriesBindingInfo),
          new PropertyMetadata(null,
              (o, e) =>
              {
                  (o as SeriesBindingInfo).OnOwnerChanged(e);
              }));

        public XamDataChart Owner
        {
            get
            {
                return (XamDataChart)GetValue(OwnerProperty);
            }
            set
            {
                SetValue(OwnerProperty, value);
            }
        }

        public static DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register("ItemsSource",
            typeof(IEnumerable), typeof(SeriesBindingInfo),
            new PropertyMetadata(null,
                (o, e) =>
                {
                    (o as SeriesBindingInfo).OnItemsSourceChanged(e);
                }));

        public IEnumerable ItemsSource
        {
            get
            {
                return (IEnumerable)GetValue(ItemsSourceProperty);
            }
            set
            {
                SetValue(ItemsSourceProperty, value);
            }
        }

        public static DependencyProperty SeriesTemplateProperty =
            DependencyProperty.Register("SeriesTemplate",
            typeof(DataTemplate), typeof(SeriesBindingInfo),
            new PropertyMetadata(null,
                (o, e) =>
                {
                    (o as SeriesBindingInfo).OnSeriesTemplateChanged(e);
                }
                    ));

        public DataTemplate SeriesTemplate
        {
            get
            {
                return (DataTemplate)GetValue(SeriesTemplateProperty);
            }
            set
            {
                SetValue(SeriesTemplateProperty, value);
            }
        }

        protected void OnItemsSourceChanged(
            DependencyPropertyChangedEventArgs e)
        {
            Clear();

            if (e.OldValue != null)
            {
                UnRegCollection(e.OldValue as IEnumerable);
            }
            if (e.NewValue != null)
            {
                RegCollection(e.NewValue as IEnumerable);
                UpdateFromCollection(e.NewValue as IEnumerable);
            }
        }

        public static DependencyProperty OuterContextProperty =
        DependencyProperty.Register("OuterContext",
        typeof(object), typeof(SeriesBindingInfo),
        new PropertyMetadata(null,
            (o, e) =>
            {
            }));

        public object OuterContext
        {
            get
            {
                return GetValue(OuterContextProperty);
            }
            set
            {
                SetValue(OuterContextProperty, value);
            }
        }

        protected void OnSeriesTemplateChanged(
            DependencyPropertyChangedEventArgs e)
        {
            Clear();
            UpdateFromCollection(ItemsSource);
        }

        private void OnOwnerChanged(
            DependencyPropertyChangedEventArgs e)
        {
            SetBinding(DataContextProperty,
            new Binding("OuterContext")
                    {
                        Source = this
                    });
            Clear();
            UpdateFromCollection(ItemsSource);
        }

        private void Clear()
        {
            if (Owner == null)
            {
                return;
            }
            Owner.Series.Clear();
        }

        private void UpdateFromCollection(
            IEnumerable collection)
        {
            if (collection == null)
            {
                return;
            }
            foreach (object item in collection)
            {
                AddItem(item);
            }
        }

        private void AddItem(
            object item)
        {
            if (SeriesTemplate == null)
            {
                return;
            }

            Series series = SeriesTemplate.LoadContent() as Series;
            if (series != null)
            {
                SeriesDataContext context =
                    new SeriesDataContext()
                        {
                            Item = item,
                            Owner = Owner
                        };
                BindingOperations.SetBinding(
                    context,
                    SeriesDataContext.OuterContextProperty,
                    new Binding("OuterContext")
                    {
                        Source = this
                    });

                series.DataContext = context;
                Axis xAxis = null;
                Axis yAxis = null;
                GetAxes(series, ref xAxis, ref yAxis);

                if (xAxis != null)
                {
                    UpdateAxis(context, xAxis);
                }
                if (yAxis != null)
                {
                    UpdateAxis(context, yAxis);
                }

                Owner.Series.Add(series);
            }
        }

        private void UpdateAxis(SeriesDataContext context, Axis axis)
        {
            axis.DataContext = context;
            if (!Owner.Axes.Contains(axis))
            {
                Owner.Axes.Add(axis);
            }
        }

        private void GetAxes(Series series, ref Axis xAxis, ref Axis yAxis)
        {
            if (series is AnchoredCategorySeries)
            {
                xAxis = (series as AnchoredCategorySeries).XAxis;
                yAxis = (series as AnchoredCategorySeries).YAxis;
            }
            else if (series is RangeCategorySeries)
            {
                xAxis = (series as RangeCategorySeries).XAxis;
                yAxis = (series as RangeCategorySeries).YAxis;
            }
            else if (series is FinancialSeries)
            {
                xAxis = (series as FinancialSeries).XAxis;
                yAxis = (series as FinancialSeries).YAxis;
            }
            else if (series is ScatterBase)
            {
                xAxis = (series as ScatterBase).XAxis;
                yAxis = (series as ScatterBase).YAxis;
            }
        }

        private void RegCollection(
            IEnumerable collection)
        {
            if (collection is INotifyCollectionChanged)
            {
                (collection as INotifyCollectionChanged).CollectionChanged
                    += SeriesBindingInfo_CollectionChanged;
            }
        }

        private void UnRegCollection(
            IEnumerable collection)
        {
            if (collection is INotifyCollectionChanged)
            {
                (collection as INotifyCollectionChanged).CollectionChanged
                    -= SeriesBindingInfo_CollectionChanged;
            }
        }

        void SeriesBindingInfo_CollectionChanged(
            object sender,
            NotifyCollectionChangedEventArgs e)
        {
            if (Owner == null)
            {
                return;
            }
            //this could be made more efficient of course.   
            Clear();
            UpdateFromCollection(ItemsSource);
        }
    }

    public class SeriesBinder
        : DependencyObject
    {
        public static DependencyProperty ContextBridgeProperty =
          DependencyProperty.RegisterAttached("ContextBridge",
          typeof(object), typeof(SeriesBinder),
          new PropertyMetadata(null,
              (o, e) =>
              {
                  SeriesBindingInfo sbi = GetBindingInfo(o);
                  if (sbi != null)
                  {
                      sbi.OuterContext = e.NewValue;
                  }
              }));

        public static DependencyProperty BindingInfoProperty =
            DependencyProperty.RegisterAttached("BindingInfo",
            typeof(SeriesBindingInfo), typeof(SeriesBinder),
            new PropertyMetadata(null,
                (o, e) =>
                {
                    if (o is XamDataChart)
                    {
                        SeriesBindingInfo prev = GetBindingInfo(o);
                        if (prev != null && prev.Owner != null)
                        {
                            prev.Owner = null;
                        }
                        if (e.NewValue != null)
                        {
                            XamDataChart newOwner =
                                o as XamDataChart;
                            newOwner.SetBinding(
                                SeriesBinder.ContextBridgeProperty,
                                new Binding());
                            
                            (e.NewValue as SeriesBindingInfo)
                                .Owner = (XamDataChart)o;

                            if (GetContextBridge(o) != null)
                            {
                                (e.NewValue as SeriesBindingInfo)
                                    .OuterContext = GetContextBridge(o);
                            }
                        }
                    }
                }));


        public static void SetBindingInfo(
            DependencyObject target,
            SeriesBindingInfo info)
        {
            target.SetValue(BindingInfoProperty, info);
        }

        public static SeriesBindingInfo GetBindingInfo(
            DependencyObject target)
        {
            return (SeriesBindingInfo)target.GetValue(BindingInfoProperty);
        }

        public static void SetContextBridge(
            DependencyObject target,
            object context)
        {
            target.SetValue(ContextBridgeProperty, context);
        }

        public static object GetContextBridge(
            DependencyObject target)
        {
            return target.GetValue(ContextBridgeProperty);
        }
    }

The above example was assuming a situation where you wanted to share axes between all the series in the chart
However, you could also use an approach like this to define seperate axes per item in your viewmodel collection, e.g:

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ig:XamDataChart Name="xamDataChart1" >
            <ig:XamDataChart.Axes>
                <ig:NumericYAxis x:Name="yAxis" />
            </ig:XamDataChart.Axes>
            
            <local:SeriesBinder.BindingInfo>
                <local:SeriesBindingInfo 
                    ItemsSource="{Binding}">
                    <local:SeriesBindingInfo.SeriesTemplate>
                        <DataTemplate>
                            <ig:LineSeries 
                                ItemsSource="{Binding Item.Data}"
                                ValueMemberPath="{Binding Item.ValueMemberPath}"
                                YAxis="{Binding Path=Owner.Axes[0]}"
                                >
                                <ig:LineSeries.XAxis>
                                    <ig:CategoryXAxis
                                        ItemsSource="{Binding Item.Data}"
                                        Label="{}{Label}"/>
                                </ig:LineSeries.XAxis>
                            </ig:LineSeries>
                        </DataTemplate>
                    </local:SeriesBindingInfo.SeriesTemplate>
                </local:SeriesBindingInfo>
            </local:SeriesBinder.BindingInfo>
        </ig:XamDataChart>

        <Button Grid.Row="1" 
                Content="Click" 
                Click="Button_Click"/>
    </Grid>

Hope this helps! Let me know if you have questions.

-Graham

Hi there!

Very nice post, and very useful as well.

I  was wondering if the DataMapping defined in the code above can be used for Indexed properties of dynamically generated objects as well. I tried but it did not work.

Is it possible to have dynamically generated objects, with indexed properties being used for binding?

Thanks,

There may not be a way to use indexed properties currently with the labels. I would suggest making a feature request.

The xamWebChart does not support indexed properties.

In either case, your work would be easier if you bound types with named properties against the chart. If this is not possible, I'd recommend making the above feature request.

Also, when I am trying to use indexed properties with XamDataChart, I am able to use indexed properties in "ValueMemberPath", but unable to use them in Axis Labels. Can you please help me on that as well?

Thanks,

-Vikram

I am not sure if I could follow the approach you mentioned about using adapter instead of using DataMapping. If any example code can be provided, I guess that should help.

Also, what I need in essence  is to use MVVM pattern and have different types of charts e.g., Bar, Column, Line, Pie etc. generated. The data to be used for binding is going to have variable no. of fields, so the collection I end up with after receiving response from service is a collection of dynamic objects, with indexed properties. This is the reason I cannot go for named properties.

My question is will it be possible to implement charts as mentioned in above para with MVVM approach, OR I will be required to have code-behind approach mixed with MVVM for creating charts dynamically?

Hi,

I thought you were talking about xamDataChart. The xamWebChart does not support string indexers for the series data. You could try the 11.2 xamDataChart or create a type with named properties for the xamWebChartData.

Alternatively you could create an adapter that looks at your dynamicObjects and creates a collection of DataPoint and adds those directly to the series rather than using DataMapping.

-Graham

Here is the Dynamic object I have used in my code:

public class DynamicObject

    {

        Dictionary<string, object> properties = new Dictionary<string, object>();

        public object this[string name]

        {

            get

            {

                if (properties.ContainsKey(name))

                {

                    return properties[name];

                }

                return null;

            }

            set

            {

                properties[name] = value;

            }

        }

    }

}