Databinding in XAML

[Ryan]

I have looked all over and I cannot find a single example of how to databind an ObservableCollect to a RadChart. I would like to be able to create 3 series and bind each one of them to a different ObservableCollection. Binding through XAML would work best in my case because my application is written using the MVVM.

Does anyone have an example they can point me to?

[Vladimir Milev]

Hello Ryan,

There is no example, but you can do it like this:

<telerik:RadChart ItemsSource={StaticResource collection_here} />

or

<telerik:RadChart ItemsSource={Binding .....} />

This should work for you. For the RadChart control and actualy for all itemscontrols for that matter you simply need to set the ItemsSource property in order to bind them. Whether you do that in XAML or in code-behind the principle is unchanged.

Kind regards,
Vladimir Milev

[Ryan]

It isn't the ItemsSource that I was having problems with. What structure does the data need to be in to bind it to a series? If I have a data structure and that data structure contains 3 - 5 different unique series. Can you provide an example of how that might work?

Are there any specific requirements for the structure of the data?

[Vladimir Milev]

Hello Ryan,

I'm guessing you will need to create series mappings to map your data into several unique series. Have you seen this help topic? I think it will help a lot.

Best wishes,
Vladimir Milev

[Dan]

I have exactly the same question as the above person.  How does one bind the data (line chart in my case) to the ItemsSource?
The 'help topic' link from Vladimir is no longer valid.  Please provide the helping link.Thanks,
Dan

[Dan]

Ok, so I found the binding solution here:
http://www.telerik.com/help/wpf/radchart-populating-with-data-series-mapping-items-source.html
It works well for passing the YValue data.  My xaml:

<telerikChart:RadChart Width="500" Height="400" x:Name="radChart" UseDefaultLayout="False" ItemsSource="{Binding Data}">
    <telerikCharting:ChartArea x:Name="ChartArea1" EnableAnimations="False"></telerikCharting:ChartArea>
        <telerik:RadChart.SeriesMappings>
            <telerikCharting:SeriesMapping ChartAreaName="ChartArea1"  >
                <telerikCharting:SeriesMapping.SeriesDefinition>
                    <telerikCharting:LineSeriesDefinition />
                </telerikCharting:SeriesMapping.SeriesDefinition>
                <telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue" />
                <telerikCharting:ItemMapping FieldName="Xlabel" DataPointMember="XCategory" />
            </telerikCharting:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
</telerikChart:RadChart>

However, when I added the X axis labels to the ItemsSource Data, and referenced them with the xaml line:
<telerikCharting:ItemMapping FieldName="Xlabel" DataPointMember="XCategory" />
then the line chart collapsed itself over to the y axis with all of the data points on top of each other on teh left of the chart.
Any ideas why this might be happening?

Here is the code that generates the Data:

public class DSOBarChartViewModel : WorkspaceViewModel
{
    public DSOBarChartViewModel()
    {
        this.Data = MyDateObject.GetData( 10 );
                    }

    public class MyDateObject
    {
        public double Value { get; set; }
        public string Xlabel { get; set; }

        public MyDateObject( double value,  string xlabel )
        {
                            this.Value = value;
            this.Xlabel = xlabel;
        }

        public static ObservableCollection<MyDateObject> GetData( int count )
        {
            Random r = new Random();
            ObservableCollection<MyDateObject> result = new ObservableCollection<MyDateObject>();

            for ( int i = 0; i < count; i++ )
            {
                result.Add( new MyDateObject( r.Next( 0, 100 ),  "xyz" ) );
            }

            return result;
        }
    }


    private ObservableCollection<MyDateObject> _data;
    public ObservableCollection<MyDateObject> Data
    {
        get
        {
            return this._data;
        }
        set
        {
            if ( this._data != value )
            {
                this._data = value;
                this.OnPropertyChanged( "Data" );
            }
        }
    }

[Dan]

I found the problem with this code. All of the YValues were being assigned to the same XCategory value.  By assigning unique values to the Xlabel variable, I got the result that I was looking for.
Dan